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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exampleSite/go.mod
View File

@ -27,5 +27,5 @@ require (
github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20240925042433-d2b5d05977e8 // indirect github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20240925042433-d2b5d05977e8 // indirect
github.com/gethugothemes/hugo-modules/videos v0.0.0-20240925042433-d2b5d05977e8 // indirect github.com/gethugothemes/hugo-modules/videos v0.0.0-20240925042433-d2b5d05977e8 // indirect
github.com/hugomods/mermaid v0.1.4 // indirect github.com/hugomods/mermaid v0.1.4 // indirect
github.com/zeon-studio/hugoplate v0.0.0-20240925040917-e6d108168086 // indirect github.com/zeon-studio/hugoplate v0.0.0-20240925044951-fe74d0e62893 // indirect
) )

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

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

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "hugoplate", "name": "hugoplate",
"description": "hugo tailwindcss boilerplate", "description": "hugo tailwindcss boilerplate",
"version": "1.16.0", "version": "1.16.1",
"license": "MIT", "license": "MIT",
"author": "zeon.studio", "author": "zeon.studio",
"scripts": { "scripts": {