forked from drowl87/hextra_mirror
feat: add theme switcher to support dark mode
This commit is contained in:
Xin
parent
923f794d29
commit
e99f44319a
@ -13,7 +13,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900;
|
||||
@apply w-full bg-white dark:bg-dark dark:text-gray-100;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
44
assets/js/theme.js
Normal file
44
assets/js/theme.js
Normal file
@ -0,0 +1,44 @@
|
||||
// Dark theme toggle
|
||||
// https://flowbite.com/docs/customize/dark-mode/
|
||||
|
||||
const themeToggleBtn = document.getElementById("theme-toggle");
|
||||
|
||||
const themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
|
||||
const themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
|
||||
|
||||
// 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)
|
||||
) {
|
||||
themeToggleLightIcon.classList.remove("hidden");
|
||||
} else {
|
||||
themeToggleDarkIcon.classList.remove("hidden");
|
||||
}
|
||||
|
||||
themeToggleBtn.addEventListener("click", function () {
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon.classList.toggle("hidden");
|
||||
themeToggleLightIcon.classList.toggle("hidden");
|
||||
|
||||
// if set via local storage previously
|
||||
if (localStorage.getItem("color-theme")) {
|
||||
if (localStorage.getItem("color-theme") === "light") {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("color-theme", "dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("color-theme", "light");
|
||||
}
|
||||
|
||||
// if NOT set via local storage previously
|
||||
} else {
|
||||
if (document.documentElement.classList.contains("dark")) {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("color-theme", "light");
|
||||
} else {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("color-theme", "dark");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -26,9 +26,8 @@ hugo-full: >
|
||||
<path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
|
||||
</svg>
|
||||
|
||||
theme-light: <svg fill="none" viewBox="3 3 18 18" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
||||
|
||||
theme-dark: <svg fill="none" viewBox="2 2 20 20" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
|
||||
sun: <svg fill="none" viewBox="3 3 18 18" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
||||
moon: <svg fill="none" viewBox="2 2 20 20" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
|
||||
|
||||
chevron-right: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
|
||||
|
||||
@ -6,4 +6,5 @@
|
||||
{{- block "main" . }}{{ end -}}
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
{{ partial "scripts.html" . }}
|
||||
</html>
|
||||
|
||||
@ -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
2
layouts/partials/scripts.html
Normal file
@ -0,0 +1,2 @@
|
||||
{{ $themeJS := resources.Get "js/theme.js" }}
|
||||
<script src="{{ $themeJS.RelPermalink }}"></script>
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user