Adding prefersColorScheme option to theme provider to select the syst…

…em default
0xsequence · Nov 8, 2024 · a44e321 · a44e321
1 parent 37789c5
commit a44e321
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 21 deletions.
diff --git a/src/components/ThemeProvider/ThemeProvider.stories.tsx b/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -51,7 +51,7 @@ export const Nested = () => {
               <div id="app2">
                 <ThemeProvider root="#app2" scope="application2" theme="dark">
                   <Card background="backgroundPrimary" marginTop="4">
-                    <Collapsible label="Nested Application 2">
+                    <Collapsible label="Nested Application 2 (Dark)">
                       <Text variant="normal" color="text100">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore
@@ -85,7 +85,31 @@ export const Nested = () => {
                   }}
                 >
                   <Card background="backgroundPrimary" marginTop="4">
-                    <Collapsible label="Nested Application 3">
+                    <Collapsible label="Nested Application 3 (Custom Theme)">
+                      <Text variant="normal" color="text100">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in
+                        reprehenderit in voluptate velit esse cillum dolore eu
+                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit
+                        anim id est laborum.
+                      </Text>
+                    </Collapsible>
+                  </Card>
+                </ThemeProvider>
+              </div>
+
+              <div id="app4">
+                <ThemeProvider
+                  root="#app4"
+                  scope="application4"
+                  prefersColorScheme
+                >
+                  <Card background="backgroundPrimary" marginTop="4">
+                    <Collapsible label="Nested Application 4 (Prefers Color Scheme)">
                       <Text variant="normal" color="text100">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore

diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -39,9 +39,10 @@ interface ThemeProviderProps {
   theme?: Theme | ThemeOverrides
   root?: string
   scope?: string
+  prefersColorScheme?: boolean
 }
 
-const getTheme = (scope?: string): Theme => {
+const getPersistedTheme = (scope?: string) => {
   const persistedTheme = localStorage.getItem(
     getStorageKey(scope)
   ) as Theme | null
@@ -50,13 +51,17 @@ const getTheme = (scope?: string): Theme => {
     return persistedTheme
   }
 
-  // else if (matchMedia(`(prefers-color-scheme: light)`).matches) {
-  //   return 'light'
-  // } else if (matchMedia(`(prefers-color-scheme: dark)`).matches) {
-  //   return 'dark'
-  // }
+  return null
+}
+
+const getPreferredColorScheme = () => {
+  if (matchMedia(`(prefers-color-scheme: light)`).matches) {
+    return 'light'
+  } else if (matchMedia(`(prefers-color-scheme: dark)`).matches) {
+    return 'dark'
+  }
 
-  return DEFAULT_THEME
+  return null
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null)
@@ -72,19 +77,19 @@ export const ThemeProvider = (props: PropsWithChildren<ThemeProviderProps>) => {
       window.document.documentElement.classList.add('is-apple')
   }, [])
 
-  // Load theme from local storage
   useEffect(() => {
-    if (!props.theme) {
-      setTheme(getTheme(props.scope))
-    }
-  }, [props.theme, props.scope])
-
-  // Allow prop theme override
-  useEffect(() => {
-    if (props.theme) {
-      setTheme(props.theme)
-    }
-  }, [props.theme])
+    const theme =
+      // Use the theme prop if it exists
+      props.theme ||
+      // or use the persisted theme from local store if it exists
+      getPersistedTheme(props.scope) ||
+      // or use the browser's preferred color scheme if enabled
+      (props.prefersColorScheme && getPreferredColorScheme()) ||
+      // or use the default theme
+      DEFAULT_THEME
+
+    setTheme(theme)
+  }, [props.theme, props.scope, props.prefersColorScheme])
 
   // Set the data-theme attribtute on the document root element
   useEffect(() => {