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

feat: add theme switcher to support dark mode

Browse Source
This commit is contained in:
Xin
2023-07-30 21:50:41 +01:00
parent 923f794d29
commit e99f44319a
7 changed files with 75 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/_default/baseof.html
View File

@ -6,4 +6,5 @@
{{- block "main" . }}{{ end -}}
{{- partial "footer.html" . -}}
</body>
{{ partial "scripts.html" . }}
</html>

11
layouts/partials/head.html
View File

@ -8,7 +8,16 @@
{{ $styles := resources.Get "css/styles.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
<script>
/* Initialize light/dark mode */
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>

2
layouts/partials/scripts.html Normal file
View File

@ -0,0 +1,2 @@
{{ $themeJS := resources.Get "js/theme.js" }}
<script src="{{ $themeJS.RelPermalink }}"></script>

15
layouts/partials/sidebar.html
View File

@ -48,4 +48,19 @@
{{ end }}
</ul>
</div>
<!-- theme switch button -->
<div class="sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
<div class="grow flex flex-col">
<button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
<div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "context" . "name" "sun" "attributes" "height=12") -}}
<span>Light</span>
</div>
<div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
{{- partial "utils/icon.html" (dict "context" . "name" "moon" "attributes" "height=12") -}}
<span>Dark</span>
</div>
</button>
</div>
</div>
</aside>