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>

src/themes.ts

@@ -0,0 +1,25 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+
+export const lightThemeOverrides: GlobalThemeOverrides = {
+  Layout: { color: '#f1f5f9' },
+};
+
+export const darkThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#1ea54cFF',
+    primaryColorHover: '#36AD6AFF',
+    primaryColorPressed: '#0C7A43FF',
+    primaryColorSuppl: '#36AD6AFF',
+  },
+
+  Layout: {
+    color: '#121212',
+    siderColor: '#1e1e1e',
+    siderBorderColor: 'transparent',
+  },
+
+  Card: {
+    color: '#1e1e1e',
+    borderColor: 'transparent',
+  },
+};