Sync color mode prior to subscribing in ThemeProvider (#4039)

* sync theme once * sync theme once
primer · Dec 11, 2023 · 21e75dd · 21e75dd
1 parent 6a5d977
commit 21e75dd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/fresh-hotels-begin.md b/.changeset/fresh-hotels-begin.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Sync theme in effect
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
@@ -160,13 +160,20 @@ function useSystemColorMode() {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const media = window?.matchMedia?.('(prefers-color-scheme: dark)')
 
+    function matchesMediaToColorMode(matches: boolean) {
+      return matches ? 'night' : 'day'
+    }
+
     function handleChange(event: MediaQueryListEvent) {
       const isNight = event.matches
-      setSystemColorMode(isNight ? 'night' : 'day')
+      setSystemColorMode(matchesMediaToColorMode(isNight))
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (media) {
+      // just in case the preference changed before the event listener was attached
+      const isNight = media.matches
+      setSystemColorMode(matchesMediaToColorMode(isNight))
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (media.addEventListener !== undefined) {
         media.addEventListener('change', handleChange)