Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

- added toggel for dark/auto/white mode

Browse Source 
- added color
This commit is contained in:
Sören
2023-05-17 22:07:36 +02:00
parent e6238e80e8
commit 524feee54d
6 changed files with 73 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/frontend/partials/controls.eta.html
View File

@@ -159,7 +159,50 @@
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
</div>
</ul>
</div>
<!-- Align the mode picker at the bottom of the navbar -->
<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
<div class="input-group mb-3 justify-content-center w-100">
<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" >
<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked>
<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off">
<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
</div>
<script>
const modeFromStorage = localStorage.getItem('bs.theme') ?? 'auto';
const modeLight = document.getElementById('mode_light');
const modeAuto = document.getElementById('mode_auto');
const modeDark = document.getElementById('mode_dark');
if (modeFromStorage === 'light') {
modeLight.checked = true;
} else if (modeFromStorage === 'dark') {
modeDark.checked = true;
} else {
modeAuto.checked = true;
}
modeLight.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'light');
document.documentElement.setAttribute('data-bs-theme', 'light');
});
modeAuto.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'auto');
document.documentElement.setAttribute('data-bs-theme', 'auto');
});
modeDark.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'dark');
document.documentElement.setAttribute('data-bs-theme', 'dark');
});
</script>
</ul>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">