feat: add color modes support

src/components/AppHeader.vue

@@ -34,6 +34,58 @@
             <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
           </CNavLink>
         </CNavItem>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
+        <CDropdown variant="nav-item" placement="bottom-end">
+          <CDropdownToggle :caret="false">
+            <CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
+            <CIcon
+              v-else-if="getColorMode() === 'light'"
+              icon="cil-sun"
+              size="xl"
+            />
+            <CIcon v-else icon="cil-contrast" size="xl" />
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem
+              :active="getColorMode() === 'light'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('light')"
+            >
+              <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'dark'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('dark')"
+            >
+              <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'auto'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('auto')"
+            >
+              <CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
+            </CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
@@ -45,6 +97,7 @@
 </template>
 
 <script>
+import { useColorModes } from '@coreui/vue/'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const { getColorMode, setColorMode } = useColorModes(
+      'coreui-free-vue-admin-template-theme',
+    )
     return {
       logo,
+      setColorMode,
+      getColorMode,
     }
   },
 }