feat(style): dark mode

src/App.vue

@@ -5,16 +5,21 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router'
 
 import {
+  darkTheme,
   NConfigProvider,
   NGlobalStyle,
 } from 'naive-ui'
+import { useStyleStore } from './stores/style.store';
 
 const route = useRoute();
 const layout = computed(() => route?.meta?.layout ?? layouts.base)
+const styleStore = useStyleStore()
+
+const theme = computed(() => styleStore.isDarkTheme ? darkTheme : null)
 </script>
 
 <template>
-  <n-config-provider>
+  <n-config-provider :theme="theme">
     <n-global-style />
     <n-message-provider placement="bottom">
       <component :is="layout">

src/layouts/base.layout.vue

@@ -2,13 +2,15 @@
 import { NIcon } from 'naive-ui';
 import { h, ref, type Component } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
-import { User } from '@vicons/tabler'
+import { LightModeFilled, DarkModeFilled } from '@vicons/material'
 import { tools } from '@/tools';
 import SearchBar from '../components/SearchBar.vue';
+import { useStyleStore } from '@/stores/style.store';
 
 const collapsed = ref(false)
 const activeKey = ref(null)
 const route = useRoute()
+const styleStore = useStyleStore()
 
 const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text })
 const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) })
@@ -53,9 +55,16 @@ const menuOptions = tools.map(({ name, path, icon }) => ({
             <div class="bar-wrapper">
                 <search-bar />
 
-                <n-button secondary circle>
-                    <n-icon size="large">
-                        <user />
+                <n-button
+                    circle
+                    quaternary
+                    @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
+                >
+                    <n-icon size="large" v-if="styleStore.isDarkTheme">
+                        <LightModeFilled />
+                    </n-icon>
+                    <n-icon size="large" v-else>
+                        <DarkModeFilled />
                     </n-icon>
                 </n-button>
             </div>
@@ -76,7 +85,7 @@ const menuOptions = tools.map(({ name, path, icon }) => ({
 }
 
 .content {
-    background-color: #f1f5f9;
+    // background-color: #f1f5f9;
     ::v-deep(.n-layout-scroll-container) {
         padding: 26px;
     }

src/stores/style.store.ts

@@ -0,0 +1,5 @@
+import { defineStore } from 'pinia';
+
+export const useStyleStore = defineStore('style', () => ({
+  isDarkTheme: true,
+}));