diff --git a/assets/js/theme.js b/assets/js/theme.js index be292778..66653f28 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,40 +1,51 @@ -// Dark theme toggle +// Light / Dark theme toggle +(function () { + const defaultTheme = '{{ site.Params.theme.default | default `system`}}' -const themeToggleButtons = document.querySelectorAll(".theme-toggle"); + const themeToggleButtons = document.querySelectorAll(".theme-toggle"); -// Change the icons inside the button based on previous settings -if ( - localStorage.getItem("color-theme") === "dark" || - (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) -) { - themeToggleButtons.forEach((el) => el.dataset.theme = "dark"); -} else { - themeToggleButtons.forEach((el) => el.dataset.theme = "light"); -} + // Change the icons of the buttons based on previous settings or system theme + if ( + localStorage.getItem("color-theme") === "dark" || + (!("color-theme" in localStorage) && + ((window.matchMedia("(prefers-color-scheme: dark)").matches && defaultTheme === "system") || defaultTheme === "dark")) + ) { + themeToggleButtons.forEach((el) => el.dataset.theme = "dark"); + } else { + themeToggleButtons.forEach((el) => el.dataset.theme = "light"); + } -themeToggleButtons.forEach((el) => { - el.addEventListener("click", function () { - if (localStorage.getItem("color-theme")) { - if (localStorage.getItem("color-theme") === "light") { - document.documentElement.classList.add("dark"); - document.documentElement.style.colorScheme = "dark"; - localStorage.setItem("color-theme", "dark"); + // Add click event handler to the buttons + themeToggleButtons.forEach((el) => { + el.addEventListener("click", function () { + if (localStorage.getItem("color-theme")) { + if (localStorage.getItem("color-theme") === "light") { + setDarkTheme(); + localStorage.setItem("color-theme", "dark"); + } else { + setLightTheme(); + localStorage.setItem("color-theme", "light"); + } } else { - document.documentElement.classList.remove("dark"); - document.documentElement.style.colorScheme = "light"; - localStorage.setItem("color-theme", "light"); - } - } else { - if (document.documentElement.classList.contains("dark")) { - document.documentElement.classList.remove("dark"); - document.documentElement.style.colorScheme = "light"; - localStorage.setItem("color-theme", "light"); - } else { - document.documentElement.classList.add("dark"); - document.documentElement.style.colorScheme = "dark"; - localStorage.setItem("color-theme", "dark"); + if (document.documentElement.classList.contains("dark")) { + setLightTheme(); + localStorage.setItem("color-theme", "light"); + } else { + setDarkTheme(); + localStorage.setItem("color-theme", "dark"); + } } + el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"; + }); + }); + + // Listen for system theme changes + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => { + if (defaultTheme === "system" && !("color-theme" in localStorage)) { + e.matches ? setDarkTheme() : setLightTheme(); + themeToggleButtons.forEach((el) => + el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light" + ); } - el.dataset.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"; }); -}); +})(); diff --git a/exampleSite/content/docs/guide/configuration.md b/exampleSite/content/docs/guide/configuration.md index 2189887f..6ff24f0e 100644 --- a/exampleSite/content/docs/guide/configuration.md +++ b/exampleSite/content/docs/guide/configuration.md @@ -5,7 +5,7 @@ weight: 2 Hugo reads its configuration from `hugo.yaml` in the root of your Hugo site. The config file is where you can configure all aspects of your site. -You can find the config file for this site in `exampleSite/hugo.yaml` as a good starting point. +Check out the config file for this site [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) on GitHub to get a comprehensive idea of available settings and best practices. @@ -181,6 +181,26 @@ Include both `favicon.ico` and `favicon.svg` files in your project to ensure you While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode. Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons. +### Theme Configuration + +Use the `theme` setting to configure the default theme mode and toggle button, allowing visitors to switch between light or dark mode. + +```yaml {filename="hugo.yaml"} +params: + theme: + # light | dark | system + default: system + displayToggle: true +``` + +Options for `theme.default`: + +- `light` - always use light mode +- `dark` - always use dark mode +- `system` - sync with the operating system setting (default) + +The `theme.displayToggle` parameter allows you to display a toggle button for changing themes. +When set to `true`, visitors can switch between light or dark mode, overriding the default setting. ### Page Width @@ -193,8 +213,7 @@ params: width: wide ``` -There are three available options: `full`, `wide`, and `normal`. -By default, the page width is set to `normal`. +There are three available options: `full`, `wide`, and `normal`. By default, the page width is set to `normal`. Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters. @@ -215,7 +234,8 @@ params: index: content ``` -available options for `flexsearch.index`: +Options for `flexsearch.index`: + - `content` - full content of the page (default) - `summary` - summary of the page, see [Hugo Content Summaries](https://gohugo.io/content-management/summaries/) for more details - `heading` - level 1 and level 2 headings diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 1c5881b7..418476f1 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -109,6 +109,11 @@ params: # full (100%), wide (90rem), normal (1280px) width: normal + theme: + # light | dark | system + default: system + displayToggle: true + footer: displayCopyright: true displayPoweredBy: true diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 08c136f7..64a387a7 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,4 +1,5 @@ {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}} +{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}} {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}} @@ -11,16 +12,19 @@ {{ end -}} {{- end -}} +