Improve dark mode

src/App.vue

@@ -11,7 +11,7 @@ import { drawerRtl } from 'naive-ui/es/drawer/styles'
 import { darkTheme, lightTheme } from 'naive-ui'
 
 import useColors from './composables/colors'
-import themeOverrides from '~/common/theme/theme-overrides'
+import themeOverrides, { darkThemeOverrides } from '~/common/theme/theme-overrides'
 
 const layout = useLayoutStore()
 
@@ -29,6 +29,7 @@ const rtlStyles = [
 ]
 
 const customTheme = ref({ ...themeOverrides })
+const customDarkTheme = ref({ ...themeOverrides, ...darkThemeOverrides })
 const { makeLighter } = useColors()
 
 watch(() => layout.activeLanguage, () => {
@@ -61,7 +62,7 @@ watch(() => layout.themeColor, (newValue) => {
 
 <template>
   <n-config-provider
-    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="customTheme"
+    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="layout.isDark ? customDarkTheme : customTheme"
     :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
   >
     <n-notification-provider placement="bottom-right">

src/common/theme/theme-overrides.ts

@@ -3,12 +3,27 @@ import type { GlobalThemeOverrides } from 'naive-ui'
 const themeOverrides: GlobalThemeOverrides = {
   common: {
     primaryColor: '#00ad4c',
+    hoverColor: 'var(--primary-color-shade1)',
     errorColor: '#FF0055',
     warningColor: '#FF8000',
     borderRadius: '5px',
   },
+  Button: {
+    colorHover: 'var(--primary-color-shade1)',
+    colorPressed: 'var(--primary-color-shade2)',
+    colorFocus: 'var(--primary-color-shade3)',
+  },
   Tag: {
     borderRadius: '4px',
   },
 }
+
+export const darkThemeOverrides: GlobalThemeOverrides = {
+  DataTable: {
+    thColor: '#1c202c',
+    tdColor: '#1c2334',
+    hoverColor: '#1c202c',
+  },
+}
+
 export default themeOverrides

src/components.d.ts

@@ -40,13 +40,14 @@ declare module 'vue' {
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    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']
@@ -61,6 +62,7 @@ declare module 'vue' {
     Notifications: typeof import('./components/Navbar/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']
     NTag: typeof import('naive-ui')['NTag']

src/components/DonutChart.vue

@@ -29,7 +29,7 @@ const donutChartOptions = ref({
   labels: ['Tech', 'Cloth', 'HH', 'Food'],
   stroke: {
     width: 0,
-    show: true,
+    show: false,
     curve: 'smooth',
     lineCap: 'round',
   },
@@ -47,7 +47,6 @@ const donutChartOptions = ref({
       startAngle: -20,
       donut: {
         borderRadius: 10,
-
         labels: {
           show: true,
           name: {
@@ -62,9 +61,9 @@ const donutChartOptions = ref({
           total: {
             show: true,
             offsetY: 15,
-            label: 'App',
+            label: 'Sells',
             formatter() {
-              return '53%'
+              return '100%'
             },
           },
         },

src/components/Sidebar.vue

@@ -128,6 +128,7 @@ const menuOptions: MenuOption[] = [
     children: [
       {
         label: () => renderMenuLabel(t('menu.notFound'), '/404'),
+        key: 'not-found',
       },
     ],
   },

src/styles/utils/_override.scss

@@ -31,7 +31,7 @@
 .rtl {
   .n-menu-item-content__icon {
     margin-left: 8px;
-    margin-right: 5px!important;
+    margin-right: 5px !important;
   }
 
   .n-menu .n-submenu .n-menu-item-content {
@@ -56,12 +56,12 @@
   .n-data-table-expand-trigger {
     transform: rotate(180deg);
     margin-left: 8px;
-    margin-right:0!important;
+    margin-right: 0 !important;
   }
 
-    .n-rate {
-      direction: ltr;
-    }
+  .n-rate {
+    direction: ltr;
+  }
 }
 
 
@@ -77,4 +77,23 @@ select:-webkit-autofill:focus {
   -webkit-text-fill-color: #000;
   -webkit-box-shadow: 0 0 0 1000px #eff0f1 inset;
   transition: background-color 5000s ease-in-out 0s;
-}
+}
+
+// ApexCharts
+.dark {
+  .apexcharts-text {
+    fill: #fff;
+  }
+
+  .apexcharts-tooltip,
+  .apexcharts-tooltip-title {
+    background-color: #333 !important;
+    color: #fff !important;
+    border: 1px solid #555 !important;
+  }
+
+  .apexcharts-legend-text {
+    color: #fff !important;
+    border: 1px solid #555 !important;
+  }
+}