drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 01:21:25 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add option to set default theme and hide toggle button (#146)

Browse Source 
resolves #135 

Light / dark theme can be configured via:

```yaml
  theme:
    # light | dark | system
    default: system
    displayToggle: true
```
This commit is contained in:
Xin
2023-10-21 17:18:04 -04:00
committed by GitHub
parent 93cb788e52
commit 97e6945c04
7 changed files with 114 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
layouts/partials/head.html
View File

@ -33,13 +33,25 @@
<script>
/* Initialize light/dark mode */
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
const defaultTheme = '{{ site.Params.theme.default | default `system`}}';
const setDarkTheme = () => {
document.documentElement.classList.add("dark");
document.documentElement.style.colorScheme = "dark";
} else {
}
const setLightTheme = () => {
document.documentElement.classList.remove("dark");
document.documentElement.style.colorScheme = "light";
}
if ("color-theme" in localStorage) {
localStorage.getItem("color-theme") === "dark" ? setDarkTheme() : setLightTheme();
} else {
defaultTheme === "dark" ? setDarkTheme() : setLightTheme();
if (defaultTheme === "system") {
window.matchMedia("(prefers-color-scheme: dark)").matches ? setDarkTheme() : setLightTheme();
}
}
</script>
{{ partial "custom/head-end.html" . }}