slightly modernized & updated default dark theme (#1315)

* first update of dark theme

- more amoled style look

* updated colors again and added borders to side panels

* misc change

* added hover & refactored css overrides

* made json easier on eyes too, oops forgot

* revert dark theme, added amoled

src/assets/scss/themes/theme.amoled.scss

@@ -0,0 +1,183 @@
+@charset "utf-8";
+
+//
+// Copyright(c) 2019-2025 pypy and individual contributors.
+// All rights reserved.
+//
+// This work is licensed under the terms of the MIT license.
+// For a copy, see <https://opensource.org/licenses/MIT>.
+//
+
+$--theme-hue: 0;
+$--theme-saturation: 0%;
+
+// AMOLED background tones
+// #0f0f0f
+$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); 
+$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 6%); 
+$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 6%); 
+$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 7%); 
+$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 9%);
+
+$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 8%);   
+$--theme-border-2: hsla($--theme-hue, $--theme-saturation, 6%, 0.5); 
+$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 12%);  
+
+$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 85%); 
+$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 70%); 
+$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 68%); 
+$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); 
+
+$--theme-primary: #B18FFF;
+$--theme-success: #67c23a;
+$--theme-warning: #e6a23c;
+$--theme-danger: #f56c6c;
+$--theme-info: #909399;
+
+// Mapping
+
+$--color-primary: $--theme-primary;
+$--color-success: $--theme-success;
+$--color-warning: $--theme-warning;
+$--color-danger: $--theme-danger;
+$--color-info: $--theme-info;
+
+$--color-white: $--theme-text-1;
+$--color-black: $--theme-bg-1;
+
+$--color-text-primary: $--theme-text-1;
+$--color-text-regular: $--theme-text-2;
+$--color-text-secondary: $--theme-info;
+$--color-text-placeholder: $--theme-text-4;
+
+$--border-color-base: $--theme-border-1;
+$--border-color-light: $--theme-bg-5;
+$--border-color-lighter: hsl($--theme-hue, $--theme-saturation, 16%);
+$--border-color-extra-light: hsl($--theme-hue, $--theme-saturation, 15%);
+
+$--background-color-base: hsl($--theme-hue, $--theme-saturation, 16%);
+
+$--button-default-background-color: $--theme-bg-5;
+$--button-default-border-color: $--theme-border-2;
+$--button-default-font-color: $--theme-text-2;
+
+$--input-background-color: $--theme-bg-5;
+$--input-border-color: $--theme-border-1;
+$--input-font-color: $--theme-text-1;
+$--input-focus-border: hsl($--theme-hue, $--theme-saturation, 33%);
+
+$--select-input-focus-border-color: hsl($--theme-hue, $--theme-saturation, 33%);
+
+$--dialog-background-color: $--theme-bg-4;
+$--popover-background-color: $--theme-bg-4;
+
+$--table-border-color: $--theme-border-2;
+$--table-header-background-color: hsl($--theme-hue, $--theme-saturation, 15%);
+$--table-row-hover-background-color: hsl(
+    $--theme-hue,
+    $--theme-saturation,
+    18%
+);
+
+$--pagination-font-color: $--theme-text-2;
+$--pagination-background-color: $--theme-bg-4;
+
+$--tooltip-fill: $--theme-bg-4;
+$--tooltip-color: $--theme-text-1;
+$--tooltip-border-color: $--theme-bg-4;
+
+$--backtop-background-color: $--theme-bg-5;
+$--backtop-font-color: $--theme-text-2;
+$--backtop-hover-background-color: $--theme-border-2;
+
+$--datepicker-font-color: $--theme-text-1;
+$--datepicker-header-font-color: $--theme-text-1;
+$--datepicker-icon-color: $--theme-text-1;
+
+$--skeleton-color: $--theme-bg-5;
+$--skeleton-to-color: hsl($--theme-hue, $--theme-saturation, 33%);
+
+$--select-dropdown-background: $--theme-bg-4;
+$--select-dropdown-border: 1px solid $--theme-border-1;
+
+$--dropdown-menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+
+$--tree-font-color: $--theme-text-2;
+$--tree-node-hover-background-color: hsl(
+    $--theme-hue,
+    $--theme-saturation,
+    16%
+);
+
+$--menu-item-font-color: $--theme-text-2;
+$--menu-background-color: $--theme-bg-2;
+
+$--collapse-header-background-color: $--theme-bg-5;
+$--collapse-content-background-color: $--theme-bg-4;
+$--collapse-border-color: $--theme-border-2;
+$--collapse-header-font-color: $--theme-text-2;
+$--collapse-content-font-color: hsl($--theme-hue, $--theme-saturation, 66%);
+
+$--message-background-color: $--theme-bg-5;
+$--message-close-icon-color: hsl($--theme-hue, $--theme-saturation, 60%);
+$--message-close-hover-color: $--theme-text-2;
+$--message-success-font-color: #52c41a;
+$--message-info-font-color: #1890ff;
+$--message-warning-font-color: #faad14;
+$--message-danger-font-color: #ff4d4f;
+
+$--pagination-hover-color: $--theme-text-4;
+
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import '~element-ui/packages/theme-chalk/src/index';
+
+@import '_theme.dark_styles';
+
+
+.el-table tr,
+.el-table td.el-table__cell,
+.el-table th.el-table__cell {
+    background-color: hsl($--theme-hue, $--theme-saturation, 6%);
+}
+
+.el-radio-button__inner {
+    background: hsl($--theme-hue, $--theme-saturation, 9%);
+}
+
+.el-tree{
+    background: hsl($--theme-hue, $--theme-saturation, 9%);
+}
+
+.x-menu-container {
+    border-right: 1px solid $--theme-bg-5;
+}
+
+.x-aside-container {
+    border-left: 1px solid $--theme-bg-5;
+}
+
+.x-friend-item:hover,
+.x-change-image-item:hover,
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
+.x-friend-item:hover .el-input__count {
+    background: hsl($--theme-hue, $--theme-saturation, 9%);
+    color: $--color-primary;
+}
+
+
+.x-friend-item:hover,
+.x-change-image-item:hover {
+    color: $--color-primary;
+}
+
+// Tag background variants
+@each $type in success, warning, danger {
+  .el-tag--plain.el-tag--#{$type} {
+    background-color: hsl($--theme-hue, $--theme-saturation, 9%);
+  }
+}

src/assets/scss/themes/theme.dark.scss

@@ -130,4 +130,4 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import '~element-ui/packages/theme-chalk/src/index';
 
-@import '_theme.dark_styles';
+@import '_theme.dark_styles';

src/localization/en/en.json

@@ -381,6 +381,7 @@
                     "theme_mode_dark": "Dark",
                     "theme_mode_blue": "Blue",
                     "theme_mode_darkblue": "Dark Blue",
+                    "theme_mode_amoled" : "Amoled",
                     "theme_mode_darkvanillaold": "Dark Vanilla (old)",
                     "theme_mode_darkvanilla": "Dark Vanilla",
                     "theme_mode_pink": "Pink",

src/shared/constants/themes.js

@@ -18,6 +18,12 @@ export const THEME_CONFIG = {
         isDark: true,
         name: 'Dark Blue'
     },
+    amoled: {
+        cssFile: 'theme.amoled.css',
+        requiresDarkBase: true,
+        isDark: true,
+        name: 'Amoled'
+    },
     darkvanillaold: {
         cssFile: 'theme.darkvanillaold.css',
         requiresDarkBase: true,