Invario/Inventarsystem
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 341 Wiki Activity

changes to the deisgn
Release Inventarsystem / release-docker (push) Successful in 3m28s
Details

Browse Source
This commit is contained in:
AIIrondev
2026-09-14 11:02:11 +02:00
parent e71567db11
commit 6311e7710a
1 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/base.html
+48 -25
View File
@@ -1136,7 +1136,7 @@
</li> </li>
{% endif %} {% endif %}
<li class="nav-item" data-nav-fixed="true"> <li class="nav-item" data-nav-fixed="true">
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten"> <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
<span class="theme-icon-light" style="display: none;">☀️</span> <span class="theme-icon-light" style="display: none;">☀️</span>
<span class="theme-icon-dark" style="display: none;">🌙</span> <span class="theme-icon-dark" style="display: none;">🌙</span>
</button> </button>
@@ -1229,7 +1229,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
<li class="nav-item" data-nav-fixed="true"> <li class="nav-item" data-nav-fixed="true">
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten"> <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
<span class="theme-icon-light" style="display: none;">☀️</span> <span class="theme-icon-light" style="display: none;">☀️</span>
<span class="theme-icon-dark" style="display: none;">🌙</span> <span class="theme-icon-dark" style="display: none;">🌙</span>
</button> </button>
@@ -1358,7 +1358,7 @@
</li> </li>
{% endif %} {% endif %}
<li class="nav-item" data-nav-fixed="true"> <li class="nav-item" data-nav-fixed="true">
<button id="themeToggleBtn" class="btn btn-link nav-link px-3" aria-label="Dark Mode umschalten" title="Theme umschalten"> <button type="button" class="btn btn-link nav-link px-3" data-theme-toggle aria-label="Dark Mode umschalten" aria-pressed="false" title="Theme umschalten">
<span class="theme-icon-light" style="display: none;">☀️</span> <span class="theme-icon-light" style="display: none;">☀️</span>
<span class="theme-icon-dark" style="display: none;">🌙</span> <span class="theme-icon-dark" style="display: none;">🌙</span>
</button> </button>
@@ -2345,33 +2345,56 @@
<!-- Theme Toggle Script --> <!-- Theme Toggle Script -->
<script> <script>
document.addEventListener('DOMContentLoaded', () => { (function () {
const toggleBtns = document.querySelectorAll('#themeToggleBtn'); const root = document.documentElement;
if (toggleBtns.length === 0) return; const metaThemeColor = document.getElementById('meta-theme-color');
const themeToggleSelector = '[data-theme-toggle]';
function updateIcons(theme) {
const isDark = theme === 'dark'; function getTheme() {
document.querySelectorAll('.theme-icon-light').forEach(icon => icon.style.display = isDark ? 'inline' : 'none'); return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
document.querySelectorAll('.theme-icon-dark').forEach(icon => icon.style.display = isDark ? 'none' : 'inline');
} }
// Get current setup from initial script in head function updateThemeUi(theme) {
let currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; const isDark = theme === 'dark';
updateIcons(currentTheme); document.querySelectorAll('.theme-icon-light').forEach(icon => {
icon.style.display = isDark ? 'inline' : 'none';
});
document.querySelectorAll('.theme-icon-dark').forEach(icon => {
icon.style.display = isDark ? 'none' : 'inline';
});
document.querySelectorAll(themeToggleSelector).forEach(button => {
button.setAttribute('aria-pressed', String(isDark));
button.setAttribute('aria-label', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
button.setAttribute('title', isDark ? 'Light Mode einschalten' : 'Dark Mode einschalten');
});
if (metaThemeColor) {
metaThemeColor.setAttribute('content', isDark ? '#1a252f' : '#2c3e50');
}
}
toggleBtns.forEach(btn => { function applyTheme(theme, persist) {
btn.addEventListener('click', (e) => { const normalizedTheme = theme === 'dark' ? 'dark' : 'light';
e.preventDefault(); root.setAttribute('data-theme', normalizedTheme);
currentTheme = currentTheme === 'light' ? 'dark' : 'light'; if (persist) {
try {
document.documentElement.setAttribute('data-theme', currentTheme); localStorage.setItem('inventarsystem-theme', normalizedTheme);
localStorage.setItem('inventarsystem-theme', currentTheme); } catch (error) {
document.getElementById('meta-theme-color').setAttribute('content', currentTheme === 'dark' ? '#1a252f' : '#2c3e50'); console.warn('Theme konnte nicht gespeichert werden:', error);
}
updateIcons(currentTheme); }
updateThemeUi(normalizedTheme);
}
document.addEventListener('DOMContentLoaded', function () {
updateThemeUi(getTheme());
document.addEventListener('click', function (event) {
const button = event.target.closest(themeToggleSelector);
if (!button) return;
event.preventDefault();
applyTheme(getTheme() === 'dark' ? 'light' : 'dark', true);
}); });
}); });
}); })();
</script> </script>
<script> <script>
(function () { (function () {