feat(style): theme overrides

src/App.vue

@@ -3,7 +3,8 @@ import { RouterView } from 'vue-router'
 import { layouts } from './layouts';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router'
-
+import { darkThemeOverrides, lightThemeOverrides } from './themes'
+import { NThemeEditor } from 'naive-ui'; // TODO: remove before mep
 import {
   darkTheme,
   NConfigProvider,
@@ -16,15 +17,19 @@ const layout = computed(() => route?.meta?.layout ?? layouts.base)
 const styleStore = useStyleStore()
 
 const theme = computed(() => styleStore.isDarkTheme ? darkTheme : null)
+const themeOverrides = computed(() => styleStore.isDarkTheme ? darkThemeOverrides : lightThemeOverrides)
 </script>
 
 <template>
-  <n-config-provider :theme="theme">
+  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
     <n-global-style />
     <n-message-provider placement="bottom">
-      <component :is="layout">
-        <router-view />
-      </component>
+      <n-theme-editor>
+        <!-- TODO: remove before mep -->
+        <component :is="layout">
+          <router-view />
+        </component>
+      </n-theme-editor>
     </n-message-provider>
   </n-config-provider>
 </template>