feat(useColorModes): add the new hook to handling color modes

Author: mrholek

packages/coreui-react/src/hooks/index.ts

@@ -1,3 +1,4 @@
+import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 
-export { useForkedRef }
+export { useColorModes, useForkedRef }

packages/coreui-react/src/hooks/useColorModes.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+
+interface UseColorModesOutput {
+  getColorMode: () => string
+  setColorMode: (mode: string) => void
+}
+
+const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
+  localStorage.setItem(localStorageItemName, colorMode)
+
+const getPreferredColorScheme = (localStorageItemName: string) => {
+  const storedTheme = getStoredTheme(localStorageItemName)
+
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = (colorMode: string) => {
+  document.documentElement.dataset.coreuiTheme =
+    colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : colorMode
+
+  const event = new Event('ColorSchemeChange')
+  document.documentElement.dispatchEvent(event)
+}
+
+export const useColorModes = (
+  localStorageItemName = 'coreui-react-color-scheme',
+): UseColorModesOutput => {
+  const [colorMode, setColorMode] = useState<string>(getPreferredColorScheme(localStorageItemName))
+
+  useEffect(() => {
+    setStoredTheme(localStorageItemName, colorMode)
+    setTheme(colorMode)
+  }, [colorMode])
+
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      const storedTheme = getStoredTheme(localStorageItemName)
+      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+        setTheme(colorMode)
+      }
+    })
+  }, [])
+
+  return {
+    getColorMode: () => colorMode,
+    setColorMode: (mode: string) => setColorMode(mode),
+  }
+}

packages/coreui-react/src/index.ts

@@ -1 +1,2 @@
 export * from './components/'
+export * from './hooks/'

packages/docs/src/AppContext.tsx

@@ -4,8 +4,6 @@ export interface AppContextProps {
   name?: string
   sidebarVisible?: boolean | undefined
   setSidebarVisible?: React.Dispatch<React.SetStateAction<boolean | undefined>>
-  storedTheme?: string | undefined
-  setStoredTheme?: React.Dispatch<React.SetStateAction<string | undefined>>
 }
 
 export const AppContextInitialState: AppContextProps = {

packages/docs/src/components/Header.tsx

@@ -23,10 +23,13 @@ import {
   CHeaderNav,
   CHeaderToggler,
   CNavItem,
+  useColorModes,
 } from '@coreui/react/src'
 import { AppContext } from './../AppContext'
 
 const Header: FC = () => {
+  const { getColorMode, setColorMode } = useColorModes('coreui-react-docs-theme')
+  const colorMode = getColorMode()
   return (
     <>
       <AppContext.Consumer>
@@ -63,39 +66,39 @@ const Header: FC = () => {
               </li>
               <CDropdown variant="nav-item" placement="bottom-end">
                 <CDropdownToggle caret={false}>
-                  {context.storedTheme === 'dark' ? (
+                  {colorMode === 'dark' ? (
                     <CIcon icon={cilMoon} size="xl" />
-                  ) : (context.storedTheme === 'auto' ? (
+                  ) : colorMode === 'auto' ? (
                     <CIcon icon={cilContrast} size="xl" />
                   ) : (
                     <CIcon icon={cilSun} size="xl" />
-                  ))}
+                  )}
                 </CDropdownToggle>
                 <CDropdownMenu>
                   <CDropdownItem
-                    active={context.storedTheme === 'light'}
+                    active={colorMode === 'light'}
                     className="d-flex align-items-center"
                     component="button"
                     type="button"
-                    onClick={() => context.setStoredTheme && context.setStoredTheme('light')}
+                    onClick={() => setColorMode('light')}
                   >
                     <CIcon className="me-2" icon={cilSun} size="lg" /> Light
                   </CDropdownItem>
                   <CDropdownItem
-                    active={context.storedTheme === 'dark'}
+                    active={colorMode === 'dark'}
                     className="d-flex align-items-center"
                     component="button"
                     type="button"
-                    onClick={() => context.setStoredTheme && context.setStoredTheme('dark')}
+                    onClick={() => setColorMode('dark')}
                   >
                     <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
                   </CDropdownItem>
                   <CDropdownItem
-                    active={context.storedTheme === 'auto'}
+                    active={colorMode === 'auto'}
                     className="d-flex align-items-center"
                     component="button"
                     type="button"
-                    onClick={() => context.setStoredTheme && context.setStoredTheme('auto')}
+                    onClick={() => setColorMode('auto')}
                   >
                     <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
                   </CDropdownItem>

packages/docs/src/templates/DefaultLayout.tsx

@@ -13,58 +13,19 @@ interface DefaultLayoutProps {
   path: any // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
-const getPreferredTheme = (storedTheme: string | undefined) => {
-  if (storedTheme) {
-    return storedTheme
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-const setTheme = (theme: string) => {
-  document.documentElement.dataset.coreuiTheme =
-    theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
-
-  const event = new Event('ColorSchemeChange')
-  document.documentElement.dispatchEvent(event)
-}
-
 const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, path }) => {
-  const theme = 'coreui-react-docs-theme'
   const [sidebarVisible, setSidebarVisible] = useState()
-  const [storedTheme, setStoredTheme] = useState()
-
-  useEffect(() => {
-    if (typeof localStorage.getItem(theme) === 'string') {
-      setStoredTheme(localStorage.getItem(theme))
-    }
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-      if (storedTheme !== 'light' || storedTheme !== 'dark') {
-        setTheme(getPreferredTheme(storedTheme))
-      }
-    })
-  }, [])
 
   const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
   const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
   const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
   const route = pageContext.frontmatter ? pageContext.frontmatter.route : ''
 
-  useEffect(() => {
-    if (storedTheme) {
-      localStorage.setItem(theme, storedTheme)
-      setTheme(storedTheme)
-    }
-  }, [storedTheme])
-
   return (
     <AppContext.Provider
       value={{
         sidebarVisible,
         setSidebarVisible,
-        storedTheme,
-        setStoredTheme,
       }}
     >
       <Seo title={title} description={description} name={name} />