Merge pull request #1041 from LoneCoder21/forcetheme

Override color theme preferences. #323
molly · Nov 25, 2023 · 68c4920 · 68c4920
2 parents dee3abe + 8f23ab0
commit 68c4920
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 32 deletions.
diff --git 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, theme } = useAppState();
 
   return (
     <main
       className={clsx([
-        { "use-sans-serif": useSansSerif, "use-dark": useDarkMode },
+        {
+          "use-sans-serif": useSansSerif,
+          "use-dark": theme === "dark",
+          "use-system": theme === "system",
+        },
       ])}
     >
       {children}

diff --git a/src/components/timeline/SettingsPanel.js b/src/components/timeline/SettingsPanel.js
@@ -11,8 +11,7 @@ export default function SettingsPanel({
   isGriftCounterCountingUp,
   toggleIsGriftCounterCountingUp,
 }) {
-  const { useDarkMode, useSansSerif, toggleUseSansSerif, toggleDarkMode } =
-    useAppState();
+  const { theme, setTheme, useSansSerif, toggleUseSansSerif } = useAppState();
 
   return (
     <div className="settings-panel">
@@ -32,13 +31,49 @@ export default function SettingsPanel({
         >
           Use sans-serif font
         </SettingsCheckbox>
-        <SettingsCheckbox
-          id="use-dark-mode"
-          checked={!!useDarkMode}
-          toggleCheckbox={toggleDarkMode}
-        >
-          Force dark mode
-        </SettingsCheckbox>
+
+        <div className="radio-group">
+          <h4>Theme</h4>
+          <div className="input-group">
+            <input
+              type="radio"
+              id="use-system-theme"
+              name="system-theme"
+              value="use-system-theme"
+              checked={theme === "system"}
+              onChange={() => {
+                setTheme("system");
+              }}
+            />
+            <label htmlFor="use-system-theme">Use system theme</label>
+          </div>
+          <div className="input-group">
+            <input
+              type="radio"
+              id="use-dark-mode"
+              name="dark-mode"
+              value="use-dark-mode"
+              checked={theme === "dark"}
+              onChange={() => {
+                setTheme("dark");
+              }}
+            />
+            <label htmlFor="use-dark-mode">Force dark mode</label>
+          </div>
+          <div className="input-group">
+            <input
+              type="radio"
+              id="use-light-mode"
+              name="light-mode"
+              value="use-light-mode"
+              checked={theme === "light"}
+              onChange={() => {
+                setTheme("light");
+              }}
+            />
+            <label htmlFor="use-light-mode">Force light mode</label>
+          </div>
+        </div>
       </div>
       <h3>Grift counter</h3>
       <div className="settings-section">

diff --git a/src/context/AppContext.js b/src/context/AppContext.js
@@ -16,30 +16,30 @@ import {
 export const AppContext = createContext();
 
 export function AppProvider({ children }) {
-  const [useDarkMode, setUseDarkMode] = useState(null);
-  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 toggleDarkMode = useCallback(() => {
-    setLocalStorage(LOCALSTORAGE_KEYS.useDarkMode, !useDarkMode);
-    setUseDarkMode(!useDarkMode);
-  }, [useDarkMode]);
+  const setTheme = useCallback((theme) => {
+    setLocalStorage(LOCALSTORAGE_KEYS.theme, theme);
+    _setTheme(theme);
+  }, []);
 
   useEffect(() => {
     // Localstorage can't be accessed during SSR
-    setUseSansSerif(getLocalStorage(LOCALSTORAGE_KEYS.useSansSerif));
-    setUseDarkMode(getLocalStorage(LOCALSTORAGE_KEYS.useDarkMode));
-  }, [setUseSansSerif, setUseDarkMode]);
+    _setUseSansSerif(getLocalStorage(LOCALSTORAGE_KEYS.useSansSerif));
+    _setTheme(getLocalStorage(LOCALSTORAGE_KEYS.theme, "system"));
+  }, [_setUseSansSerif, _setTheme]);
 
   const state = {
-    useDarkMode,
+    theme,
+    setTheme,
     useSansSerif,
     toggleUseSansSerif,
-    toggleDarkMode,
   };
 
   return <AppContext.Provider value={state}>{children}</AppContext.Provider>;

diff --git a/src/js/localStorage.js b/src/js/localStorage.js
@@ -1,6 +1,6 @@
 export const LOCALSTORAGE_KEYS = {
   // General appearance
-  useDarkMode: "use-dark-mode",
+  theme: "theme",
   useSansSerif: "use-sans-serif",
 
   // Grift counter

diff --git a/src/styles/main.sass b/src/styles/main.sass
@@ -1076,11 +1076,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()