michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 11:26: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() {
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) {
setTheme('light')
setStoredTheme('light')
});
const elem2 = document.getElementById('dark_mode');
elem2.addEventListener("click", function(event) {
setTheme('dark')
setStoredTheme('dark')
const theme = elem.getAttribute('data-bs-theme-value');
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme);
});
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) {

3
app/templates/base.html
View file

@ -260,8 +260,7 @@
</li>
{% 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="{{ _('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="{{ _('Dark mode') }}"><a class="nav-link" id="dark_mode" href="#" tabindex="" title="{{ _('Dark mode') }}"><span class="fe fe-moon"></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>
</ul>
</div>