PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix theme toggle on phone

Browse Source
This commit is contained in:
Avijit 🚀
2021-08-04 23:23:48 +02:00
committed by Yash Mehrotra
parent 31b7a2d491
commit 534432aa94
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/gokarna/layouts/partials/header.html
View File

@@ -23,7 +23,7 @@
{{ end }} {{ end }}
<span class="nav-icons-divider"></span> <span class="nav-icons-divider"></span>
<div class="nav-link" id="dark-theme-toggle"> <div class="nav-link dark-theme-toggle">
<a> <a>
<span id="theme-toggle-icon" data-feather="moon"></span> <span id="theme-toggle-icon" data-feather="moon"></span>
</a> </a>
@@ -44,8 +44,8 @@
</a> </a>
</li> </li>
{{ end }} {{ end }}
<li class="nav-item"> <li class="nav-item dark-theme-toggle">
<a id="dark-theme-toggle"> <a>
<span id="theme-toggle-icon" data-feather="moon"></span> <span id="theme-toggle-icon" data-feather="moon"></span>
</a> </a>
</li> </li>

2
themes/gokarna/static/css/dark.css
View File

@@ -11,7 +11,7 @@ html {
} }
.header { .header {
background-color: rgb(var(--dark-bg-color)); background-color: rgba(var(--dark-bg-color), 0.95);
} }
.nav-hamburger-list { .nav-hamburger-list {

19
themes/gokarna/static/js/main.js
View File

@@ -14,15 +14,16 @@ function ready() {
const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light'); (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
setTheme(savedTheme); const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
document.getElementById('dark-theme-toggle').addEventListener('click', () => { setTheme(savedTheme, darkThemeToggles);
toggleIcon = document.querySelector("#dark-theme-toggle a svg.feather"); darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
toggleIcon = event.currentTarget.querySelector("a svg.feather");
if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) { if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
setTheme('light'); setTheme('light', [event.currentTarget]);
} else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) { } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
setTheme('dark'); setTheme('dark', [event.currentTarget]);
} }
}); }));
document.getElementById('hamburger-menu-toggle').addEventListener('click', () => { document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0] const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
@@ -47,9 +48,11 @@ window.addEventListener('scroll', () => {
}); });
function setTheme(themeToSet) { function setTheme(themeToSet, targets) {
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet); localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
darkThemeCss.disabled = themeToSet === 'light'; darkThemeCss.disabled = themeToSet === 'light';
document.querySelector('#dark-theme-toggle a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg(); targets.forEach((target) => {
target.querySelector('a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
});
} }