michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request 'make night/day theme a single toggle button' (#406) from h3ndrik/pyfedi:light_dark into main

Browse source 
Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/406
This commit is contained in:
rimu 2024-12-30 00:09:56 +00:00
commit 753e552641
2 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/static/js/scripts.js
View file

@ -231,16 +231,39 @@ function setupMobileNav() {
} }
function setupLightDark() { function setupLightDark() {
const elem = document.getElementById('light_mode'); const elem = document.getElementById('color_mode');
const icon = document.getElementById('color_mode_icon');
const showActiveTheme = (theme) => {
if (theme === 'dark') {
elem.setAttribute('aria-label', 'Light mode');
elem.setAttribute('title', 'Light mode');
elem.setAttribute('data-bs-theme-value', 'light');
icon.classList.remove('fe-moon');
icon.classList.add('fe-sun');
} else {
elem.setAttribute('aria-label', 'Dark mode');
elem.setAttribute('title', 'Dark mode');
elem.setAttribute('data-bs-theme-value', 'dark');
icon.classList.remove('fe-sun');
icon.classList.add('fe-moon');
}
};
elem.addEventListener("click", function(event) { elem.addEventListener("click", function(event) {
setTheme('light') const theme = elem.getAttribute('data-bs-theme-value');
setStoredTheme('light') setStoredTheme(theme);
}); setTheme(theme);
const elem2 = document.getElementById('dark_mode'); showActiveTheme(theme);
elem2.addEventListener("click", function(event) {
setTheme('dark')
setStoredTheme('dark')
}); });
var preferredTheme = getStoredTheme();
if (!preferredTheme || (preferredTheme !== 'light' && preferredTheme !== 'dark')) {
preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
//setTheme(preferredTheme);
icon.classList.remove('fe-eye');
showActiveTheme(preferredTheme);
} }
function toggleClass(elementId, className) { function toggleClass(elementId, className) {

3
app/templates/base.html
View file

@ -260,8 +260,7 @@
</li> </li>
{% endif %} {% endif %}
<li class="nav-item" aria-label="{{ _('Search') }}"><a class="nav-link" id="search" href="/search" tabindex="" title="{{ _('Search') }}"><span class="fe fe-search"></span></a></li> <li class="nav-item" aria-label="{{ _('Search') }}"><a class="nav-link" id="search" href="/search" tabindex="" title="{{ _('Search') }}"><span class="fe fe-search"></span></a></li>
<li class="nav-item" aria-label="{{ _('Light mode') }}"><a class="nav-link" id="light_mode" href="#" tabindex="" title="{{ _('Light mode') }}"><span class="fe fe-sun"></span></a></li> <li class="nav-item" aria-label="{{ _('Color mode') }}"><a class="nav-link" id="color_mode" href="#" tabindex="" title="{{ _('Color mode') }}"><span id="color_mode_icon" class="fe fe-eye"></span></a></li>
<li class="nav-item" aria-label="{{ _('Dark mode') }}"><a class="nav-link" id="dark_mode" href="#" tabindex="" title="{{ _('Dark mode') }}"><span class="fe fe-moon"></span></a></li>
</ul> </ul>
</div> </div>