sync theme once

Author: mattcosta7

.changeset/fresh-hotels-begin.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Sync theme in effect

src/ThemeProvider.tsx

@@ -160,15 +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
-      setSystemColorMode(media.matches ? 'night' : 'day')
+      const isNight = media.matches
+      setSystemColorMode(matchesMediaToColorMode(isNight))
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (media.addEventListener !== undefined) {
         media.addEventListener('change', handleChange)