refactor(useColorModes): update the handling of color modes

Author: mrholek

packages/coreui-vue/src/composables/useColorModes.ts

@@ -2,6 +2,7 @@ import { onBeforeMount, ref, watch } from 'vue'
 
 const getStoredTheme = (localStorageItemName: string) =>
   typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
+
 const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
   localStorage.setItem(localStorageItemName, colorMode)
 
@@ -53,7 +54,7 @@ export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme')
   })
 
   return {
-    getColorMode: () => colorMode.value,
+    colorMode,
     isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
     setColorMode: (mode: string) => {
       colorMode.value = mode

packages/docs/.vuepress/theme-coreui/src/client/components/Header.vue

@@ -20,13 +20,13 @@
       </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-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
+          <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="xl" />
           <CIcon v-else icon="cil-contrast" size="xl" />
         </CDropdownToggle>
         <CDropdownMenu>
           <CDropdownItem
-            :active="getColorMode() === 'light'"
+            :active="colorMode === 'light'"
             class="d-flex align-items-center"
             component="button"
             type="button"
@@ -35,7 +35,7 @@
             <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
           </CDropdownItem>
           <CDropdownItem
-            :active="getColorMode() === 'dark'"
+            :active="colorMode === 'dark'"
             class="d-flex align-items-center"
             component="button"
             type="button"
@@ -44,7 +44,7 @@
             <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
           </CDropdownItem>
           <CDropdownItem
-            :active="getColorMode() === 'auto'"
+            :active="colorMode === 'auto'"
             class="d-flex align-items-center"
             component="button"
             type="button"
@@ -97,11 +97,11 @@ export default defineComponent({
   },
   emits: ['toggle-sidebar'],
   setup() {
-    const { getColorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
+    const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
     
     return {
+      colorMode,
       setColorMode,
-      getColorMode,
     }
   },
 })