feat: add dark mode support

Author: mrholek

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.1",
-    "@coreui/coreui": "^4.2.6",
+    "@coreui/coreui": "4.3.0-alpha.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
     "@coreui/react": "^4.6.0",

src/App.js

@@ -1,13 +1,29 @@
-import React, { Component, Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+import { CSpinner } from '@coreui/react'
 import './scss/style.scss'
 
 const loading = (
   <div className="pt-3 text-center">
-    <div className="sk-spinner sk-spinner-pulse"></div>
+    <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'))
 
@@ -17,22 +33,35 @@ const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
-class App extends Component {
-  render() {
-    return (
-      <HashRouter>
-        <Suspense fallback={loading}>
-          <Routes>
-            <Route exact path="/login" name="Login Page" element={<Login />} />
-            <Route exact path="/register" name="Register Page" element={<Register />} />
-            <Route exact path="/404" name="Page 404" element={<Page404 />} />
-            <Route exact path="/500" name="Page 500" element={<Page500 />} />
-            <Route path="*" name="Home" element={<DefaultLayout />} />
-          </Routes>
-        </Suspense>
-      </HashRouter>
-    )
+const App = () => {
+  const theme = useSelector((state) => state.theme)
+
+  if (theme) {
+    document.documentElement.dataset.coreuiTheme =
+      theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
   }
+
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme !== 'light' || theme !== 'dark') {
+        setTheme(getPreferredTheme(theme))
+      }
+    })
+  }, [])
+
+  return (
+    <HashRouter>
+      <Suspense fallback={loading}>
+        <Routes>
+          <Route exact path="/login" name="Login Page" element={<Login />} />
+          <Route exact path="/register" name="Register Page" element={<Register />} />
+          <Route exact path="/404" name="Page 404" element={<Page404 />} />
+          <Route exact path="/500" name="Page 500" element={<Page500 />} />
+          <Route path="*" name="Home" element={<DefaultLayout />} />
+        </Routes>
+      </Suspense>
+    </HashRouter>
+  )
 }
 
 export default App

src/components/AppHeader.js

@@ -3,6 +3,10 @@ import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   CContainer,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
   CHeader,
   CHeaderBrand,
   CHeaderDivider,
@@ -12,7 +16,15 @@ import {
   CNavItem,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
-import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
+import {
+  cilBell,
+  cilContrast,
+  cilEnvelopeOpen,
+  cilList,
+  cilMenu,
+  cilMoon,
+  cilSun,
+} from '@coreui/icons'
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
@@ -21,6 +33,7 @@ import { logo } from 'src/assets/brand/logo'
 const AppHeader = () => {
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
+  const theme = useSelector((state) => state.theme)
 
   return (
     <CHeader position="sticky" className="mb-4">
@@ -63,6 +76,52 @@ const AppHeader = () => {
               <CIcon icon={cilEnvelopeOpen} size="lg" />
             </CNavLink>
           </CNavItem>
+          <li className="nav-item py-2 py-lg-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <CDropdown variant="nav-item" placement="bottom-end">
+            <CDropdownToggle caret={false}>
+              {theme === 'dark' ? (
+                <CIcon icon={cilMoon} size="xl" />
+              ) : theme === 'auto' ? (
+                <CIcon icon={cilContrast} size="xl" />
+              ) : (
+                <CIcon icon={cilSun} size="xl" />
+              )}
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem
+                active={theme === 'light'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'light' })}
+              >
+                <CIcon className="me-2" icon={cilSun} size="lg" /> Light
+              </CDropdownItem>
+              <CDropdownItem
+                active={theme === 'dark'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'dark' })}
+              >
+                <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
+              </CDropdownItem>
+              <CDropdownItem
+                active={theme === 'auto'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'auto' })}
+              >
+                <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
+              </CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <li className="nav-item py-2 py-lg-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
         </CHeaderNav>
         <CHeaderNav className="ms-3">
           <AppHeaderDropdown />

src/components/header/AppHeaderDropdown.js

@@ -31,7 +31,7 @@ const AppHeaderDropdown = () => {
         <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Account</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilBell} className="me-2" />
           Updates
@@ -60,7 +60,7 @@ const AppHeaderDropdown = () => {
             42
           </CBadge>
         </CDropdownItem>
-        <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilUser} className="me-2" />
           Profile

src/layout/DefaultLayout.js

@@ -5,7 +5,7 @@ const DefaultLayout = () => {
   return (
     <div>
       <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
+      <div className="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
         <AppHeader />
         <div className="body flex-grow-1 px-3">
           <AppContent />

src/scss/_example.scss

@@ -1,33 +1,23 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
 .example {
   &:not(:first-child) {
     margin-top: 1.5rem;
   }
 
   .tab-content {
-    background-color: $light-50 !important;
-
-    @at-root .dark-theme & {
-      background-color: rgba(255, 255, 255, .1) !important;
-    }
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-size: .875rem !important;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
+    background-color: var(--#{$prefix}tertiary-bg) !important;
   }
 
   & + p {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
   }
 
   // Components examples
-  .preview,
-  .preview .col {
+  .preview {
     + p {
       margin-top: 2rem;
     }
@@ -105,5 +95,20 @@
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}