feat: put colorMode preference in local storage

Author: laine-hallot

src/hooks/use-color-preference.js

@@ -0,0 +1,20 @@
+import {useCallback, useMemo} from 'react'
+import {useTheme} from '@primer/react'
+
+export const useColorPreference = (themeContextId = 'root') => {
+  const {colorMode, setColorMode} = useTheme()
+  const setColorPreference = useCallback(
+    mode => {
+      localStorage.setItem(`${themeContextId}-color-mode`, mode)
+      setColorMode(mode)
+    },
+    [setColorMode, themeContextId],
+  )
+
+  const preferredColorMode = useMemo(
+    () => colorMode ?? localStorage.getItem(`${themeContextId}-color-mode`) ?? 'auto',
+    [colorMode, themeContextId],
+  )
+
+  return {preferredColorMode, setColorPreference}
+}

src/theme.js

@@ -4,6 +4,8 @@ import deepmerge from 'deepmerge'
 
 export const NPM_RED = '#cb3837'
 
+const colorModePreference = localStorage.getItem('root-color-mode') ?? 'auto'
+
 export const npmTheme = deepmerge(theme, {
   colors: {
     logoBg: NPM_RED,
@@ -37,7 +39,7 @@ export const npmTheme = deepmerge(theme, {
   },
 })
 
-export const ThemeProvider = props => <Provider theme={npmTheme} {...props} />
+export const ThemeProvider = props => <Provider theme={npmTheme} colorMode={colorModePreference} {...props} />
 
 export const Theme = React.forwardRef(function Theme({theme: colorMode, as = Box, ...props}, ref) {
   return (