refactor: move useColorModes

Author: mrholek

src/App.js

@@ -1,29 +1,9 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
 
-import { CSpinner } from '@coreui/react'
+import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
 
-const loading = (
-  <div className="pt-3 text-center">
-    <CSpinner color="primary" variant="grow" />
-  </div>
-)
-
-const getPreferredTheme = (storedTheme) => {
-  if (storedTheme) {
-    return storedTheme
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-const setTheme = (theme) => {
-  document.documentElement.dataset.coreuiTheme =
-    theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
-}
-
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
@@ -34,29 +14,24 @@ const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const dispatch = useDispatch()
-  const theme = useSelector((state) => state.theme)
+  const { setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
 
   useEffect(() => {
     if (urlParams.get('theme')) {
-      dispatch({ type: 'setTheme', theme: urlParams.get('theme') })
+      setColorMode(urlParams.get('theme'))
     }
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-      if (theme !== 'light' || theme !== 'dark') {
-        setTheme(getPreferredTheme(theme))
-      }
-    })
   }, [])
 
-  useEffect(() => {
-    setTheme(getPreferredTheme(theme))
-  }, [theme])
-
   return (
     <HashRouter>
-      <Suspense fallback={loading}>
+      <Suspense
+        fallback={
+          <div className="pt-3 text-center">
+            <CSpinner color="primary" variant="grow" />
+          </div>
+        }
+      >
         <Routes>
           <Route exact path="/login" name="Login Page" element={<Login />} />
           <Route exact path="/register" name="Register Page" element={<Register />} />

src/components/AppHeader.js

@@ -14,6 +14,7 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
+  useColorModes,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import {
@@ -31,9 +32,11 @@ import { AppHeaderDropdown } from './header/index'
 import { logo } from 'src/assets/brand/logo'
 
 const AppHeader = () => {
+  const { getColorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const colorMode = getColorMode()
+
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
-  const theme = useSelector((state) => state.theme)
 
   return (
     <CHeader position="sticky" className="mb-4">
@@ -81,39 +84,39 @@ const AppHeader = () => {
           </li>
           <CDropdown variant="nav-item" placement="bottom-end">
             <CDropdownToggle caret={false}>
-              {theme === 'dark' ? (
+              {colorMode === 'dark' ? (
                 <CIcon icon={cilMoon} size="xl" />
-              ) : theme === 'auto' ? (
+              ) : colorMode === 'auto' ? (
                 <CIcon icon={cilContrast} size="xl" />
               ) : (
                 <CIcon icon={cilSun} size="xl" />
               )}
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem
-                active={theme === 'light'}
+                active={colorMode === 'light'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'light' })}
+                onClick={() => setColorMode('light')}
               >
                 <CIcon className="me-2" icon={cilSun} size="lg" /> Light
               </CDropdownItem>
               <CDropdownItem
-                active={theme === 'dark'}
+                active={colorMode === 'dark'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'dark' })}
+                onClick={() => setColorMode('dark')}
               >
                 <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
               </CDropdownItem>
               <CDropdownItem
-                active={theme === 'auto'}
+                active={colorMode === 'auto'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'auto' })}
+                onClick={() => setColorMode('auto')}
               >
                 <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
               </CDropdownItem>

src/store.js

@@ -2,16 +2,10 @@ import { createStore } from 'redux'
 
 const initialState = {
   sidebarShow: true,
-  theme: localStorage.getItem('coreui-free-react-admin-template-theme') ?? 'light',
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {
   switch (type) {
-    case 'setTheme':
-      const event = new Event('ColorSchemeChange')
-      document.documentElement.dispatchEvent(event)
-      localStorage.setItem('coreui-free-react-admin-template-theme', rest.theme)
-      return { ...state, ...rest }
     case 'set':
       return { ...state, ...rest }
     default: