props.scss should only add the prefered theme for the prefers-color mode

rename getDefaultBrowserTheme
duality-labs · Aug 4, 2022 · c837bfb · c837bfb
1 parent c07eb54
commit c837bfb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/src/lib/themeProvider.tsx b/src/lib/themeProvider.tsx
@@ -11,7 +11,7 @@ export type ThemeMode = 'light' | 'dark';
 const storageName = 'themeMode';
 const attributeName = 'data-theme-mode';
 // name of css property indicating mode
-const themeProperty = '--theme';
+const themeProperty = '--default-theme';
 
 interface ThemeContextType {
   setThemeMode: (theme: ThemeMode | null) => void;
@@ -34,7 +34,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [savedTheme, setSavedTheme] = useState(
     localStorage.getItem(storageName) as ThemeMode | null
   );
-  const themeMode = savedTheme ?? getCSSTheme();
+  const themeMode = savedTheme ?? getDefaultBrowserTheme();
 
   const toggleThemeMode = useCallback(
     function () {
@@ -89,11 +89,12 @@ export function useThemeMode() {
 
 export function getTheme(): ThemeMode {
   return (
-    (localStorage.getItem(storageName) as ThemeMode | null) ?? getCSSTheme()
+    (localStorage.getItem(storageName) as ThemeMode | null) ??
+    getDefaultBrowserTheme()
   );
 }
 
-export function getCSSTheme(): ThemeMode {
+export function getDefaultBrowserTheme(): ThemeMode {
   return getComputedStyle(document.documentElement)
     .getPropertyValue(themeProperty)
     .trim() as ThemeMode;

diff --git a/src/styles/theme/props.scss b/src/styles/theme/props.scss
@@ -10,29 +10,27 @@
 
 :root {
   @include color-list(core.$map);
-  --theme: dark;
+  --default-theme: dark;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
     @include color-list(light.$map);
-    --theme: light;
+    --default-theme: light;
   }
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     @include color-list(dark.$map);
-    --theme: dark;
+    --default-theme: dark;
   }
 }
 
 html[data-theme-mode='light'] {
   @include color-list(light.$map);
-  --theme: light;
 }
 
 html[data-theme-mode='dark'] {
   @include color-list(dark.$map);
-  --theme: dark;
 }