theme dark grey

src/app.css

@@ -384,6 +384,20 @@ html.dark,
     }
 }
 
+:root[data-theme='darkgrey'] {
+    --el-bg-color: var(--color-neutral-900);
+    --el-bg-color-page: var(--color-neutral-900);
+    --el-bg-color-overlay: var(--color-neutral-800);
+
+    .el-dialog {
+        background-color: var(--el-bg-color-overlay) !important;
+    }
+
+    .el-message-box {
+        background-color: var(--el-bg-color-overlay) !important;
+    }
+}
+
 html.dark body,
 :root.dark body,
 :root[data-theme='dark'] body {
@@ -400,8 +414,8 @@ html.dark body,
         ),
         linear-gradient(
             180deg,
-            color-mix(in oklch, var(--color-neutral-950) 92%, transparent),
-            var(--color-neutral-950)
+            color-mix(in oklch, var(--el-bg-color-page) 92%, transparent),
+            var(--el-bg-color-page)
         );
 }
 

src/localization/en.json

@@ -551,6 +551,7 @@
                     "theme_mode_system": "System",
                     "theme_mode_light": "Light",
                     "theme_mode_dark": "Dark",
+                    "theme_mode_darkgrey": "Dark Grey",
                     "theme_mode_blue": "Blue",
                     "theme_mode_darkblue": "Dark Blue",
                     "theme_mode_amoled": "Amoled",

src/shared/constants/themes.js

@@ -19,6 +19,12 @@ export const THEME_CONFIG = {
         isDark: true,
         useDarkClass: true,
         name: 'Dark'
+    },
+    darkgrey: {
+        cssFiles: [appCss],
+        isDark: true,
+        useDarkClass: true,
+        name: 'Dark Grey'
     }
     // darkold: {
     //     cssFiles: [appLegacy, dark],

src/shared/utils/base/ui.js

@@ -107,6 +107,8 @@ function changeAppThemeStyle(themeMode) {
 
     applyThemeFonts(themeMode, themeConfig.fontLinks);
 
+    document.documentElement.setAttribute('data-theme', themeMode);
+
     const shouldUseDarkClass =
         typeof themeConfig.useDarkClass === 'boolean'
             ? themeConfig.useDarkClass

src/styles/globals.css

@@ -126,6 +126,12 @@
     }
 }
 
+[data-slot='table-header'],
+[data-slot='table-header'] [data-slot='table-row'],
+[data-slot='table-head'] {
+    background-color: transparent;
+}
+
 .lucide {
     width: 16px;
     height: 16px;

src/views/FriendsLocations/components/FriendsLocationsCard.vue

@@ -195,7 +195,6 @@
         min-height: calc(40px * var(--card-scale));
         padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
         border-radius: calc(10px * var(--card-scale));
-        background: var(--el-fill-color);
         color: var(--el-text-color-regular);
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;