diff options
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | source/js/theme.js | 22 |
3 files changed, 15 insertions, 11 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 244813d..f138adb 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -7,6 +7,8 @@ paginate = 5 [params] subtitle = "A simple theme for Hugo" + # "light" or "dark" + defaultTheme = "dark" [params.logo] logoText = "hello friend" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 173295d..1e91b7d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ end }} {{ partial "head.html" . }} </head> -<body class="dark-theme"> +<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}"> <div class="container"> {{ partial "header.html" . }} diff --git a/source/js/theme.js b/source/js/theme.js index b30171f..d5a324b 100644 --- a/source/js/theme.js +++ b/source/js/theme.js @@ -1,16 +1,18 @@ // Toggle theme -const getTheme = window.localStorage && window.localStorage.getItem('theme') -const themeToggle = document.querySelector('.theme-toggle') -const isDark = getTheme === 'dark' || getTheme === null +const getTheme = window.localStorage && window.localStorage.getItem("theme"); +const themeToggle = document.querySelector(".theme-toggle"); +const isDark = getTheme === "dark"; -document.body.classList.toggle('dark-theme', isDark) +if (getTheme !== null) { + document.body.classList.toggle("dark-theme", isDark); +} -themeToggle.addEventListener('click', () => { - document.body.classList.toggle('dark-theme') +themeToggle.addEventListener("click", () => { + document.body.classList.toggle("dark-theme"); window.localStorage && window.localStorage.setItem( - 'theme', - document.body.classList.contains('dark-theme') ? 'dark' : 'light', - ) -}) + "theme", + document.body.classList.contains("dark-theme") ? "dark" : "light", + ); +}); |