diff --git a/src/assets/scss/themes/theme.amoled.scss b/src/assets/scss/themes/theme.amoled.scss new file mode 100644 index 00000000..8d1dfa2c --- /dev/null +++ b/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 . +// + +$--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%); + } +} \ No newline at end of file diff --git a/src/assets/scss/themes/theme.dark.scss b/src/assets/scss/themes/theme.dark.scss index 2120e21c..4595f39d 100644 --- a/src/assets/scss/themes/theme.dark.scss +++ b/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'; \ No newline at end of file diff --git a/src/localization/en/en.json b/src/localization/en/en.json index 068e1d2b..211c9d4e 100644 --- a/src/localization/en/en.json +++ b/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", diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js index 495f289a..80f30c44 100644 --- a/src/shared/constants/themes.js +++ b/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, diff --git a/webpack.config.js b/webpack.config.js index 416fee2e..bb2601e2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,6 +24,7 @@ module.exports = (env, argv) => { }, 'theme.dark': `${themeBasePath}theme.dark.scss`, 'theme.darkblue': `${themeBasePath}theme.darkblue.scss`, + 'theme.amoled' : `${themeBasePath}theme.amoled.scss`, 'theme.darkvanillaold': `${themeBasePath}theme.darkvanillaold.scss`, 'theme.darkvanilla': `${themeBasePath}theme.darkvanilla.scss`, 'theme.pink': `${themeBasePath}theme.pink.scss`,