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

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

@@ -11,7 +11,7 @@ html {
}
.header {
background-color: rgb(var(--dark-bg-color));
background-color: rgba(var(--dark-bg-color), 0.95);
}
.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) ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
setTheme(savedTheme);
document.getElementById('dark-theme-toggle').addEventListener('click', () => {
toggleIcon = document.querySelector("#dark-theme-toggle a svg.feather");
const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
setTheme(savedTheme, darkThemeToggles);
darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
toggleIcon = event.currentTarget.querySelector("a svg.feather");
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) {
setTheme('dark');
setTheme('dark', [event.currentTarget]);
}
});
}));
document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
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);
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();
});
}