From f1480b687838c19a8c8f9596c6d002d6bb66aa39 Mon Sep 17 00:00:00 2001 From: Abhinav Neelam Date: Sun, 19 Nov 2023 21:14:14 -0800 Subject: [PATCH 1/3] override theme preferences --- src/components/Layout.js | 8 +++- src/components/timeline/SettingsPanel.js | 52 ++++++++++++++++++++---- src/context/AppContext.js | 21 ++++++---- src/js/localStorage.js | 2 +- src/styles/main.sass | 18 ++++---- 5 files changed, 73 insertions(+), 28 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 6ba179bf..023ede90 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -3,12 +3,16 @@ import clsx from "clsx"; import { useAppState } from "../context/AppContext"; export default function Layout({ children }) { - const { useDarkMode, useSansSerif } = useAppState(); + const { useSansSerif, useTheme } = useAppState(); return (
{children} diff --git a/src/components/timeline/SettingsPanel.js b/src/components/timeline/SettingsPanel.js index 5d6239d2..badbaaae 100644 --- a/src/components/timeline/SettingsPanel.js +++ b/src/components/timeline/SettingsPanel.js @@ -11,7 +11,7 @@ export default function SettingsPanel({ isGriftCounterCountingUp, toggleIsGriftCounterCountingUp, }) { - const { useDarkMode, useSansSerif, toggleUseSansSerif, toggleDarkMode } = + const { useTheme, setTheme, useSansSerif, toggleUseSansSerif } = useAppState(); return ( @@ -32,13 +32,49 @@ export default function SettingsPanel({ > Use sans-serif font - - Force dark mode - + +
+

Theme

+
+ { + setTheme("system"); + }} + /> + +
+
+ { + setTheme("dark"); + }} + /> + +
+
+ { + setTheme("light"); + }} + /> + +
+

Grift counter

diff --git a/src/context/AppContext.js b/src/context/AppContext.js index fbb60f91..33fe8afd 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -16,7 +16,7 @@ import { export const AppContext = createContext(); export function AppProvider({ children }) { - const [useDarkMode, setUseDarkMode] = useState(null); + const [useTheme, setUseTheme] = useState("system"); const [useSansSerif, setUseSansSerif] = useState(null); const toggleUseSansSerif = useCallback(() => { @@ -24,22 +24,25 @@ export function AppProvider({ children }) { setUseSansSerif(!useSansSerif); }, [useSansSerif]); - const toggleDarkMode = useCallback(() => { - setLocalStorage(LOCALSTORAGE_KEYS.useDarkMode, !useDarkMode); - setUseDarkMode(!useDarkMode); - }, [useDarkMode]); + const setTheme = useCallback( + (theme) => { + setLocalStorage(LOCALSTORAGE_KEYS.useTheme, theme); + setUseTheme(theme); + }, + [useTheme] + ); useEffect(() => { // Localstorage can't be accessed during SSR setUseSansSerif(getLocalStorage(LOCALSTORAGE_KEYS.useSansSerif)); - setUseDarkMode(getLocalStorage(LOCALSTORAGE_KEYS.useDarkMode)); - }, [setUseSansSerif, setUseDarkMode]); + setUseTheme(getLocalStorage(LOCALSTORAGE_KEYS.useTheme, "system")); + }, [setUseSansSerif, setUseTheme]); const state = { - useDarkMode, + useTheme, + setTheme, useSansSerif, toggleUseSansSerif, - toggleDarkMode, }; return {children}; diff --git a/src/js/localStorage.js b/src/js/localStorage.js index 51446187..f157fa8e 100644 --- a/src/js/localStorage.js +++ b/src/js/localStorage.js @@ -1,6 +1,6 @@ export const LOCALSTORAGE_KEYS = { // General appearance - useDarkMode: "use-dark-mode", + useTheme: "use-theme", useSansSerif: "use-sans-serif", // Grift counter diff --git a/src/styles/main.sass b/src/styles/main.sass index 4ad60d65..2cd4e18c 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -1045,11 +1045,13 @@ table @include chartsDarkMode() @include reactDateRangeDarkMode() -@media (prefers-color-scheme: dark) - @include mainDarkMode() - @include navigationDarkMode() - @include filtersDarkMode() - @include fixedDarkMode() - @include popoversDarkMode() - @include chartsDarkMode() - @include reactDateRangeDarkMode() +.use-system + @media (prefers-color-scheme: dark) + background-color: $dark-main-background + @include mainDarkMode() + @include navigationDarkMode() + @include filtersDarkMode() + @include fixedDarkMode() + @include popoversDarkMode() + @include chartsDarkMode() + @include reactDateRangeDarkMode() \ No newline at end of file From 24a5d369492e3ba3bc25e371ee3b34a03cf5758f Mon Sep 17 00:00:00 2001 From: Molly White Date: Sat, 25 Nov 2023 11:52:36 -0500 Subject: [PATCH 2/3] Minor wording tweak, lint --- src/components/timeline/SettingsPanel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/timeline/SettingsPanel.js b/src/components/timeline/SettingsPanel.js index badbaaae..cef6c9e0 100644 --- a/src/components/timeline/SettingsPanel.js +++ b/src/components/timeline/SettingsPanel.js @@ -42,11 +42,11 @@ export default function SettingsPanel({ name="system-theme" value="use-system-theme" checked={useTheme === "system"} - onChange={(e) => { + onChange={() => { setTheme("system"); }} /> - +
{ + onChange={() => { setTheme("dark"); }} /> @@ -68,7 +68,7 @@ export default function SettingsPanel({ name="light-mode" value="use-light-mode" checked={useTheme === "light"} - onChange={(e) => { + onChange={() => { setTheme("light"); }} /> From 8f23ab09c4769143a657090c67e0301372668991 Mon Sep 17 00:00:00 2001 From: Molly White Date: Sat, 25 Nov 2023 12:02:15 -0500 Subject: [PATCH 3/3] use... suggests boolean variable --- src/components/Layout.js | 6 +++--- src/components/timeline/SettingsPanel.js | 9 ++++----- src/context/AppContext.js | 25 +++++++++++------------- src/js/localStorage.js | 2 +- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 023ede90..34710e0d 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -3,15 +3,15 @@ import clsx from "clsx"; import { useAppState } from "../context/AppContext"; export default function Layout({ children }) { - const { useSansSerif, useTheme } = useAppState(); + const { useSansSerif, theme } = useAppState(); return (
diff --git a/src/components/timeline/SettingsPanel.js b/src/components/timeline/SettingsPanel.js index cef6c9e0..f402bfc3 100644 --- a/src/components/timeline/SettingsPanel.js +++ b/src/components/timeline/SettingsPanel.js @@ -11,8 +11,7 @@ export default function SettingsPanel({ isGriftCounterCountingUp, toggleIsGriftCounterCountingUp, }) { - const { useTheme, setTheme, useSansSerif, toggleUseSansSerif } = - useAppState(); + const { theme, setTheme, useSansSerif, toggleUseSansSerif } = useAppState(); return (
@@ -41,7 +40,7 @@ export default function SettingsPanel({ id="use-system-theme" name="system-theme" value="use-system-theme" - checked={useTheme === "system"} + checked={theme === "system"} onChange={() => { setTheme("system"); }} @@ -54,7 +53,7 @@ export default function SettingsPanel({ id="use-dark-mode" name="dark-mode" value="use-dark-mode" - checked={useTheme === "dark"} + checked={theme === "dark"} onChange={() => { setTheme("dark"); }} @@ -67,7 +66,7 @@ export default function SettingsPanel({ id="use-light-mode" name="light-mode" value="use-light-mode" - checked={useTheme === "light"} + checked={theme === "light"} onChange={() => { setTheme("light"); }} diff --git a/src/context/AppContext.js b/src/context/AppContext.js index 33fe8afd..0832d7e4 100644 --- a/src/context/AppContext.js +++ b/src/context/AppContext.js @@ -16,30 +16,27 @@ import { export const AppContext = createContext(); export function AppProvider({ children }) { - const [useTheme, setUseTheme] = useState("system"); - const [useSansSerif, setUseSansSerif] = useState(null); + const [theme, _setTheme] = useState("system"); + const [useSansSerif, _setUseSansSerif] = useState(null); const toggleUseSansSerif = useCallback(() => { setLocalStorage(LOCALSTORAGE_KEYS.useSansSerif, !useSansSerif); - setUseSansSerif(!useSansSerif); + _setUseSansSerif(!useSansSerif); }, [useSansSerif]); - const setTheme = useCallback( - (theme) => { - setLocalStorage(LOCALSTORAGE_KEYS.useTheme, theme); - setUseTheme(theme); - }, - [useTheme] - ); + const setTheme = useCallback((theme) => { + setLocalStorage(LOCALSTORAGE_KEYS.theme, theme); + _setTheme(theme); + }, []); useEffect(() => { // Localstorage can't be accessed during SSR - setUseSansSerif(getLocalStorage(LOCALSTORAGE_KEYS.useSansSerif)); - setUseTheme(getLocalStorage(LOCALSTORAGE_KEYS.useTheme, "system")); - }, [setUseSansSerif, setUseTheme]); + _setUseSansSerif(getLocalStorage(LOCALSTORAGE_KEYS.useSansSerif)); + _setTheme(getLocalStorage(LOCALSTORAGE_KEYS.theme, "system")); + }, [_setUseSansSerif, _setTheme]); const state = { - useTheme, + theme, setTheme, useSansSerif, toggleUseSansSerif, diff --git a/src/js/localStorage.js b/src/js/localStorage.js index f157fa8e..17ecd88f 100644 --- a/src/js/localStorage.js +++ b/src/js/localStorage.js @@ -1,6 +1,6 @@ export const LOCALSTORAGE_KEYS = { // General appearance - useTheme: "use-theme", + theme: "theme", useSansSerif: "use-sans-serif", // Grift counter