-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* admin: Overhaul light/dark theme (#227) * fixed background color with white theme * simplyfied theme toggling and fixed detecting it * finished theme change issues * added color sheme to root * fixed window height issues * added some consistency to theme changing * removed white padding on drawer * Redesigned sidebar layout * Improved light mode coloring * fixed hover colors * admin: small styling changes --------- Co-authored-by: Konrad Struck <[email protected]>
- Loading branch information
1 parent
9d55c0f
commit 9afb7dc
Showing
18 changed files
with
105 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,35 @@ | ||
| import { browser } from "$app/environment"; | ||
|
|
||
| export const toggleDarkMode = () => { | ||
| const root = document.documentElement; // Get the :root element | ||
| if (localStorage.getItem("color-theme")) { | ||
| if (localStorage.getItem("color-theme") === "light") { | ||
| root.classList.remove("light"); | ||
| root.classList.add("dark"); | ||
| root.style.setProperty("color-scheme", "dark"); | ||
| localStorage.setItem("color-theme", "dark"); | ||
| if (browser) { | ||
| if (!getTheme()) initTheme(); | ||
| if (getTheme() === "dark") { | ||
| localStorage.setItem("theme", "light"); | ||
| } else { | ||
| root.classList.remove("dark"); | ||
| root.classList.add("light"); | ||
| root.style.setProperty("color-scheme", "light"); | ||
| localStorage.setItem("color-theme", "light"); | ||
| localStorage.setItem("theme", "dark"); | ||
| } | ||
| reloadTheme(); | ||
| } | ||
| }; | ||
|
|
||
| // if NOT set via local storage previously | ||
| } else { | ||
| if (root.classList.contains("dark") || root.style.getPropertyValue("color-scheme") === "dark") { | ||
| root.classList.remove("dark"); | ||
| root.style.setProperty("color-scheme", "light"); | ||
| root.classList.add("light"); | ||
| localStorage.setItem("color-theme", "light"); | ||
| } else { | ||
| root.classList.add("dark"); | ||
| root.style.setProperty("color-scheme", "dark"); | ||
| localStorage.setItem("color-theme", "dark"); | ||
| } | ||
| export const initTheme = () => { | ||
| if (!getTheme()) { | ||
| window.matchMedia("(prefers-color-scheme: dark)").matches | ||
| ? localStorage.setItem("theme", "dark") | ||
| : localStorage.setItem("theme", "light"); | ||
| } | ||
| }; | ||
|
|
||
| export const initializeDarkMode = () => { | ||
| export const reloadTheme = () => { | ||
| if (!browser) return; | ||
| const root = document.documentElement; // Get the :root element | ||
| if ( | ||
| localStorage.getItem("color-theme") === "dark" || | ||
| (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) | ||
| ) { | ||
| root.classList.add("dark"); | ||
| root.style.setProperty("color-scheme", "dark"); | ||
| if (!getTheme()) { | ||
| initTheme(); | ||
| } | ||
| if (getTheme() === "dark") { | ||
| document.documentElement.classList.add("dark"); | ||
| } else { | ||
| root.classList.remove("dark"); | ||
| root.style.setProperty("color-scheme", "light"); | ||
| document.documentElement.classList.remove("dark"); | ||
| } | ||
| }; | ||
|
|
||
| export const getIsThemeDark = () => { | ||
| return ( | ||
| localStorage.getItem("color-theme") === "dark" || | ||
| document.documentElement.style.getPropertyValue("color-scheme") === "dark" || | ||
| document.documentElement.classList.contains("dark") | ||
| ); | ||
| }; | ||
| export const getTheme = () => localStorage.getItem("theme"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.