update dark theme style of desktop version

src/components/desktop/AccountBalanceTrendsChart.vue

@@ -243,6 +243,11 @@ const chartOptions = computed<object>(() => {
                             return formatAmountWithCurrency(Math.floor(params.value as number), props.account.currency);
                         }
                     }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
+                    }
                 }
             }
         ],

src/components/desktop/MonthlyTrendsChart.vue

@@ -376,6 +376,11 @@ const chartOptions = computed<object>(() => {
                             return formatAmountWithCurrency(Math.floor(params.value as number), props.defaultCurrency);
                         }
                     }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
+                    }
                 }
             }
         ],

src/desktop-main.ts

@@ -366,8 +366,8 @@ const vuetify = createVuetify({
                     'primary': '#c67e48',
                     'primary-darken-1': '#b67443',
                     'on-primary': '#ffffff',
-                    'secondary': '#8a8d93',
-                    'secondary-darken-1': '#545659',
+                    'secondary': '#4d4c4b',
+                    'secondary-darken-1': '#3e3d3c',
                     'on-secondary': '#fff',
                     'success': '#4cd964',
                     'success-darken-1': '#40b654',
@@ -382,9 +382,9 @@ const vuetify = createVuetify({
                     'error-darken-1': '#e1342b',
                     'on-error': '#ffffff',
                     'teal': '#009688',
-                    'background': '#000000',
+                    'background': '#060504',
                     'on-background': '#fcf0e3',
-                    'surface': '#1c1c1d',
+                    'surface': '#1a1a1a',
                     'on-surface': '#fcf0e3',
                     'notification-background': '#1e1e1e',
                     'on-notification-background': '#fff',
@@ -398,14 +398,14 @@ const vuetify = createVuetify({
                     'grey-700': '#c6c6c6',
                     'grey-800': '#d8d8d8',
                     'grey-900': '#eaeaea',
-                    'perfect-scrollbar-thumb': '#4a5072',
-                    'skin-bordered-background': '#312d4b',
-                    'skin-bordered-surface': '#312d4b',
-                    'expansion-panel-text-custom-bg': '#373350'
+                    'perfect-scrollbar-thumb': '#725b4a',
+                    'skin-bordered-background': '#4b3b2d',
+                    'skin-bordered-surface': '#4b3b2d',
+                    'expansion-panel-text-custom-bg': '#503f33'
                 },
                 variables: {
                     'code-color': '#ff8000',
-                    'overlay-scrim-background': '#1c1c1d',
+                    'overlay-scrim-background': '#1a1a1a',
                     'tooltip-background': '#d7d7d7',
                     'overlay-scrim-opacity': 0.6,
                     'hover-opacity': 0.04,
@@ -417,12 +417,12 @@ const vuetify = createVuetify({
                     'dragged-opacity': 0.1,
                     'border-color': '#edece9',
                     'border-opacity': 0.12,
-                    'table-header-color': '#312f2b',
+                    'table-header-color': '#242322',
                     'high-emphasis-opacity': 0.9,
                     'medium-emphasis-opacity': 0.7,
 
                     // 👉 Shadows
-                    'shadow-key-umbra-color': '#67615d',
+                    'shadow-key-umbra-color': '#383736',
                     'shadow-xs-opacity': '0.20',
                     'shadow-sm-opacity': '0.22',
                     'shadow-md-opacity': '0.24',

src/styles/desktop/global.scss

@@ -59,6 +59,10 @@ input[type=number] {
     --v-card-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
 }
 
+.v-theme--dark .nav-link {
+    --v-hover-opacity: 0.1;
+}
+
 .pin-codes-input {
     --ebk-pin-code-input-height: 56px;
     --ebk-pin-code-input-gap: 12px;

src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue

@@ -124,7 +124,10 @@ const chartOptions = computed<object>(() => {
         tooltip: {
             trigger: 'axis',
             axisPointer: {
-                type: 'shadow'
+                type: 'shadow',
+                shadowStyle: {
+                    color: props.isDarkMode ? 'rgba(210, 210, 210, 0.05)' : 'rgba(120, 120, 120, 0.05)'
+                }
             },
             backgroundColor: props.isDarkMode ? '#333' : '#fff',
             borderColor: props.isDarkMode ? '#333' : '#fff',