peskyadmin/DAM-static-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed theme-switcher flickering issue

Browse Source
This commit is contained in:
Somrat
2024-09-25 11:48:42 +06:00
parent fe74d0e628
commit 3334b7bc9b
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
layouts/partials/components/theme-switcher.html
View File

@@ -1,7 +1,7 @@
<!-- theme switcher -->
{{ $class := .Class }}
{{ if site.Params.theme_switcher }}
<div class="theme-switcher {{ $class }}">
<div class="theme-switcher {{ $class }} hidden">
<input id="theme-switcher" data-theme-switcher type="checkbox" />
<label for="theme-switcher">
<span class="sr-only">theme switcher</span>
@@ -43,12 +43,17 @@
if (localStorage.getItem("theme") === "dark"){darkMode = true}
else if (localStorage.getItem("theme") === "light"){darkMode = false}
if (darkMode){document.documentElement.classList.toggle("dark")}
var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
if (darkMode){document.documentElement.classList.add("dark")}
else {document.documentElement.classList.remove("dark")}
// Show theme switcher after applying theme
document.addEventListener("DOMContentLoaded", () => {
var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
var themeSwitcherContainer = document.querySelector('.theme-switcher');
[].forEach.call(themeSwitch, function (ts) {
ts.checked = darkMode ? true : false;
ts.checked = darkMode;
ts.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
localStorage.setItem(
@@ -57,6 +62,9 @@
);
});
});
// Now make the switcher visible
themeSwitcherContainer.classList.remove('hidden');
});
</script>
{{ end }}