Make light as default theme

Fixes #111

Author: doroudi

src/App.vue

@@ -31,11 +31,18 @@ watch(() => layout.activeLanguage, () => {
 }, {
   immediate: true,
 })
+
+watch(() => layout.isDark, (newValue) => {
+  if (newValue)
+    document.documentElement.classList.add('dark')
+  else
+    document.documentElement.classList.remove('dark')
+}, { immediate: true })
 </script>
 
 <template>
   <n-config-provider
-    :theme="isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
+    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
     :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
   >
     <n-notification-provider placement="bottom-right">

src/auto-imports.d.ts

@@ -47,7 +47,6 @@ declare global {
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
-  const isDark: typeof import('./composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -372,7 +371,6 @@ declare module 'vue' {
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
-    readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -433,7 +431,6 @@ declare module 'vue' {
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly toggleDark: UnwrapRef<typeof import('./composables/dark')['toggleDark']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>

src/components.d.ts

@@ -34,12 +34,14 @@ declare module 'vue' {
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
@@ -49,13 +51,17 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     Notifications: typeof import('./components/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     PersianIcon: typeof import('./components/CountryIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']

src/components/ThemeSwitch.vue

@@ -4,15 +4,15 @@ import {
   WeatherSunny48Regular as SunIcon,
 } from '@vicons/fluent'
 
-const layoutStore = useLayoutStore()
+const layout = useLayoutStore()
 </script>
 
 <template>
   <div v-bind="$attrs">
-    <n-button quaternary circle @click="layoutStore.toggleTheme()">
+    <n-button quaternary circle @click="layout.toggleTheme()">
       <template #icon>
         <NIcon size="1.4rem">
-          <SunIcon v-if="isDark" />
+          <SunIcon v-if="layout.isDark" />
           <MoonIcon v-else />
         </NIcon>
       </template>

src/composables/dark.ts

@@ -7,15 +7,18 @@ export const useLayoutStore = defineStore('layout', () => {
   const isRtl = ref(false)
   const { t, locale } = useI18n()
 
+  const isDark = ref(false)
+
   watch(() => useWindowSize().width.value, (newValue: number) => {
     forceCollapsed.value = newValue < 1000
   })
+
   function toggleSidebar() {
     collapsed.value = !collapsed.value
   }
 
   function toggleTheme() {
-    toggleDark()
+    isDark.value = !isDark.value
   }
 
   function changeLanguage(lang: string) {
@@ -33,6 +36,7 @@ export const useLayoutStore = defineStore('layout', () => {
     activeLanguage,
     changeLanguage,
     forceCollapsed,
+    isDark,
   }
 }, { persist: true })
 

src/store/layout.store.ts

@@ -142,7 +142,7 @@ export default defineConfig({
     // }),
 
     // https://github.com/webfansplz/vite-plugin-vue-devtools
-    VueDevTools(),
+    // VueDevTools(),
   ],
 
   // https://github.com/vitest-dev/vitest