use media queries

This commit is contained in:
Elizabeth Hunt 2024-03-27 19:53:04 -06:00
parent 68f3bd5332
commit b6e8e04109
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
3 changed files with 27 additions and 13 deletions

View File

@ -1,13 +1,25 @@
:root { :root {
--background-color: #f4e8e9; --background-color-light: #f4e8e9;
--text-color: #333; --text-color-light: #333;
--link-color: #d291bc; --link-color-light: #d291bc;
--container-bg: #fff7f8; --container-bg-light: #fff7f8;
--background-color-dark: #333;
--text-color-dark: #f4e8e9;
--link-color-dark: #b86b77;
--container-bg-dark: #424242;
} }
[data-theme="DARK"] { [data-theme="DARK"] {
--background-color: #333; --background-color: var(--background-color-dark);
--text-color: #f4e8e9; --text-color: var(--text-color-dark);
--link-color: #b86b77; --link-color: var(--link-color-dark);
--container-bg: #424242; --container-bg: var(--container-bg-dark);
}
[data-theme="LIGHT"] {
--background-color: var(--background-color-light);
--text-color: var(--text-color-light);
--link-color: var(--link-color-light);
--container-bg: var(--container-bg-light);
} }

View File

@ -24,4 +24,4 @@ themeSwitcher.addEventListener("click", () =>
setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))), setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
); );
setTheme(localStorage.getItem("theme") ?? THEMES.LIGHT); setTheme(localStorage.getItem("theme") || THEMES.LIGHT);

View File

@ -1,6 +1,8 @@
const preferredMode = window.matchMedia("(prefers-color-scheme: dark)").matches
? "DARK"
: "LIGHT";
localStorage.setItem("theme", localStorage.getItem("theme") || preferredMode);
// sets theme before rendering & jquery loaded to prevent flashing of uninitialized theme // sets theme before rendering & jquery loaded to prevent flashing of uninitialized theme
// (ugly white background) // (ugly white background)
document.documentElement.setAttribute( document.documentElement.setAttribute("data-theme", preferredMode);
"data-theme",
localStorage.getItem("theme"),
);