drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 01:12:03 -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

2
assets/css/styles.css
View File

@ -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
View 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");
}
}
});