diff --git a/html/src/localization/en/en.json b/html/src/localization/en/en.json
index a4eab80f..50fefd62 100644
--- a/html/src/localization/en/en.json
+++ b/html/src/localization/en/en.json
@@ -265,6 +265,7 @@
"theme_mode_system": "System",
"theme_mode_light": "Light",
"theme_mode_dark": "Dark",
+ "theme_mode_darkvanillaold": "Dark Vanilla (old)",
"theme_mode_darkvanilla": "Dark Vanilla",
"theme_mode_pink": "Pink",
"theme_mode_material3": "Material 3",
diff --git a/html/src/localization/es/en.json b/html/src/localization/es/en.json
index 3ed97414..4d4432a3 100644
--- a/html/src/localization/es/en.json
+++ b/html/src/localization/es/en.json
@@ -265,7 +265,8 @@
"theme_mode_system": "Sistema",
"theme_mode_light": "Claro",
"theme_mode_dark": "Oscuro",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "Vainilla Oscura (viejo)",
+ "theme_mode_darkvanilla": "Vainilla Oscura",
"theme_mode_pink": "Rosa",
"theme_mode_material3": "Material 3",
"zoom": "Zoom",
diff --git a/html/src/localization/fr/en.json b/html/src/localization/fr/en.json
index 4b7a301f..70e66883 100644
--- a/html/src/localization/fr/en.json
+++ b/html/src/localization/fr/en.json
@@ -261,6 +261,7 @@
"theme_mode_system": "Système",
"theme_mode_light": "Clair",
"theme_mode_dark": "Sombre",
+ "theme_mode_darkvanillaold": "Vanilla Noire (vieux)",
"theme_mode_darkvanilla": "Vanilla Noire",
"theme_mode_pink": "Rose",
"theme_mode_material3": "Matériel 3",
diff --git a/html/src/localization/ja/en.json b/html/src/localization/ja/en.json
index 61864554..10c1f7bb 100644
--- a/html/src/localization/ja/en.json
+++ b/html/src/localization/ja/en.json
@@ -265,7 +265,8 @@
"theme_mode_system": "システム",
"theme_mode_light": "ライト",
"theme_mode_dark": "ダーク",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "ダークバニラ（古い）",
+ "theme_mode_darkvanilla": "ダークバニラ",
"theme_mode_pink": "ピンク",
"theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "VRC+ プロフィールアイコン",
diff --git a/html/src/localization/ko/en.json b/html/src/localization/ko/en.json
index 11e8a1c9..9ab6295e 100644
--- a/html/src/localization/ko/en.json
+++ b/html/src/localization/ko/en.json
@@ -244,6 +244,7 @@
"theme_mode_system": "시스템",
"theme_mode_light": "라이트",
"theme_mode_dark": "다크",
+ "theme_mode_darkvanillaold": "다크 바닐라 (오래된)",
"theme_mode_darkvanilla": "다크 바닐라",
"theme_mode_pink": "핑크",
"theme_mode_material3": "머티리얼 3",
diff --git a/html/src/localization/pl/en.json b/html/src/localization/pl/en.json
index 8abbae5b..82e880c8 100644
--- a/html/src/localization/pl/en.json
+++ b/html/src/localization/pl/en.json
@@ -244,7 +244,8 @@
"theme_mode_system": "Systemowy",
"theme_mode_light": "Jasny",
"theme_mode_dark": "Ciemny",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "Ciemna Wanilia (stary)",
+ "theme_mode_darkvanilla": "Ciemna Wanilia",
"theme_mode_pink": "Różowy",
"theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "Ikony profilu VRCPlus",
diff --git a/html/src/localization/ru/en.json b/html/src/localization/ru/en.json
index 8bb8a8da..acba15d5 100644
--- a/html/src/localization/ru/en.json
+++ b/html/src/localization/ru/en.json
@@ -257,7 +257,8 @@
"theme_mode_system": "Системная",
"theme_mode_light": "Светлая",
"theme_mode_dark": "Тёмная",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "Темная ваниль (старая)",
+ "theme_mode_darkvanilla": "Темная ваниль",
"theme_mode_pink": "Pink",
"theme_mode_material3": "Material 3",
"zoom": "Зум",
diff --git a/html/src/localization/vi/en.json b/html/src/localization/vi/en.json
index 66e1457f..78b31f49 100644
--- a/html/src/localization/vi/en.json
+++ b/html/src/localization/vi/en.json
@@ -244,7 +244,8 @@
"theme_mode_system": "Theo hệ thống",
"theme_mode_light": "Sáng",
"theme_mode_dark": "Tối",
- "theme_mode_darkvanilla": "Tối (Vanilla)",
+ "theme_mode_darkvanillaold": "Tối Vanilla (cũ)",
+ "theme_mode_darkvanilla": "Tối Vanilla",
"theme_mode_pink": "Hồng",
"theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "VRCPlus Profile Icons",
diff --git a/html/src/localization/zh-CN/en.json b/html/src/localization/zh-CN/en.json
index 51ba5af2..79c786bd 100644
--- a/html/src/localization/zh-CN/en.json
+++ b/html/src/localization/zh-CN/en.json
@@ -257,7 +257,8 @@
"theme_mode_system": "跟随系统",
"theme_mode_light": "浅色",
"theme_mode_dark": "深色",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "深色香草（旧）",
+ "theme_mode_darkvanilla": "深色香草",
"theme_mode_pink": "粉色",
"theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "VRC+ 个人信息图标",
diff --git a/html/src/localization/zh-TW/en.json b/html/src/localization/zh-TW/en.json
index e1a41b74..0a07207a 100644
--- a/html/src/localization/zh-TW/en.json
+++ b/html/src/localization/zh-TW/en.json
@@ -244,7 +244,8 @@
"theme_mode_system": "系統",
"theme_mode_light": "淺色",
"theme_mode_dark": "深色",
- "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_darkvanillaold": "深色香草（舊）",
+ "theme_mode_darkvanilla": "深色香草",
"theme_mode_pink": "Pink",
"theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "VRChat+ 個人檔案圖示",
diff --git a/html/src/mixins/tabs/settings.pug b/html/src/mixins/tabs/settings.pug
index 739927d9..6e356e4f 100644
--- a/html/src/mixins/tabs/settings.pug
+++ b/html/src/mixins/tabs/settings.pug
@@ -151,6 +151,7 @@ mixin settingsTab()
el-radio-button(label="system") {{ $t('view.settings.appearance.appearance.theme_mode_system') }}
el-radio-button(label="light") {{ $t('view.settings.appearance.appearance.theme_mode_light') }}
el-radio-button(label="dark") {{ $t('view.settings.appearance.appearance.theme_mode_dark') }}
+ el-radio-button(label="darkvanillaold") {{ $t('view.settings.appearance.appearance.theme_mode_darkvanillaold') }}
el-radio-button(label="darkvanilla") {{ $t('view.settings.appearance.appearance.theme_mode_darkvanilla') }}
el-radio-button(label="pink") {{ $t('view.settings.appearance.appearance.theme_mode_pink') }}
el-radio-button(label="material3") {{ $t('view.settings.appearance.appearance.theme_mode_material3') }}
diff --git a/html/src/theme.darkvanilla.1.7.scss b/html/src/theme.darkvanilla.1.7.scss
new file mode 100644
index 00000000..e7949e5e
--- /dev/null
+++ b/html/src/theme.darkvanilla.1.7.scss
@@ -0,0 +1,310 @@
+/*
+ * VRCX Dark-Vanilla theme by MintLily
+ * https://github.com/MintLily/Dark-Vanilla
+ */
+@import 'theme.dark.scss';
+:root {
+ --ThemeName: 'Dark Vanilla';
+ --ThemeVersion: 'v1.7';
+ --ThemeAuthor: 'MintLily'; /* Discord: MintLily#0001 */
+
+ --blur: 3px;
+ --blur-more: 8px;
+ --farback: #131719;
+ --mid: #191f22;
+ --top: #1e2427;
+ --top-border: #151a1c;
+ --theme-text: #eecce0;
+ --theme-text-muted: #906d92;
+ --theme-text-rgb: 238, 204, 224;
+ --theme-text-muted-rgb: 144, 109, 146;
+}
+
+div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
+ content: var(--ThemeName) ' ' var(--ThemeVersion) ' by ' var(--ThemeAuthor);
+ color: var(--theme-text);
+ float: right;
+ padding-bottom: 10px;
+ padding-right: 10px;
+}
+
+a {
+ color: var(--theme-text) !important;
+}
+.x-menu-container {
+ background: var(--top) !important;
+}
+.x-container {
+ background: var(--farback) !important;
+}
+.x-aside-container {
+ background: var(--mid) !important;
+}
+
+.el-tooltip__popper.is-dark {
+ background: rgba(var(--theme-text-muted-rgb), 0.2) !important;
+ backdrop-filter: blur(var(--blur));
+}
+
+.el-menu-item:focus,
+.el-menu-item:hover {
+ background: var(--theme-text-muted) !important;
+}
+.el-menu-item.is-active {
+ color: var(--theme-text) !important;
+}
+.el-menu-item.is-active::before {
+ background: var(--theme-text) !important;
+}
+.el-menu-item.notify::after {
+ background: var(--theme-text) !important;
+}
+.el-collapse-item__content,
+.el-collapse-item__wrap {
+ background: var(--mid) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-textarea .el-input__count,
+.el-input .el-input__count .el-input__count-inner {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-table th.is-leaf {
+ background: var(--top) !important;
+ /*border: 1px solid var(--top-border) !important;*/
+}
+
+.el-table td,
+.el-table th.is-leaf {
+ background: var(--top) !important;
+}
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: var(--mid) !important;
+}
+
+.el-dialog,
+.el-pager li,
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+ background: var(--mid) !important;
+}
+.el-pager li.active {
+ color: var(--theme-text) !important;
+}
+.el-pager li.btn-quicknext,
+.el-pager li.btn-quickprev {
+ color: var(--theme-text-muted) !important;
+}
+.el-pager li:hover,
+.el-pagination button:hover {
+ color: var(--theme-text) !important;
+}
+
+.x-friend-item:hover,
+.x-change-image-item:hover {
+ background: var(--theme-text-muted) !important;
+}
+
+.el-popover,
+.el-dropdown-menu {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-select-dropdown {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ background: var(--mid) !important;
+}
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ background: var(--farback) !important;
+ border: var(--top-border) !important;
+ color: white !important;
+}
+
+.el-tree,
+.el-message-box {
+ background: rgba(38, 50, 56, 0.2) !important;
+ border-color: rgba(38, 50, 56, 0.2) !important;
+ backdrop-filter: blur(var(--blur));
+}
+.el-tree-node__content:hover {
+ background: rgba(58, 69, 74, 0.6) !important;
+ backdrop-filter: blur(var(--blur-more));
+}
+.el-tree-node:focus > .el-tree-node__content {
+ background: rgba(0, 0, 0, 0.4) !important;
+}
+
+.el-tabs__item.is-active,
+.el-radio__input.is-checked + .el-radio__label {
+ color: var(--theme-text) !important;
+}
+.el-tabs__active-bar {
+ background-color: var(--theme-text) !important;
+}
+.el-tabs__item:hover {
+ color: var(--theme-text-muted) !important;
+}
+.el-radio__input.is-checked .el-radio__inner {
+ border-color: var(--theme-text) !important;
+ background: var(--theme-text) !important;
+}
+.el-radio__inner:hover {
+ border-color: var(--theme-text) !important;
+}
+
+.el-checkbox__input.is-checked + .el-checkbox__label {
+ color: var(--theme-text-muted) !important;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ border-color: var(--theme-text-muted) !important;
+ background: var(--theme-text-muted) !important;
+}
+
+.el-icon-star-on {
+ color: var(--theme-text) !important;
+}
+
+.el-tag.el-tag--info {
+ background: var(--farback) !important;
+}
+
+.el-loading-spinner .path {
+ stroke: var(--theme-text) !important;
+}
+
+.noty_theme__mint.noty_type__success {
+ background-color: var(--theme-text-muted) !important;
+ border-bottom: var(--theme-text) !important;
+}
+
+.noty_theme__mint.noty_type__error {
+ background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.el-button--primary {
+ border-color: var(--theme-text) !important;
+ background: var(--theme-text) !important;
+ color: black !important;
+}
+.el-button--primary:focus,
+.el-button--primary:hover {
+ border-color: var(--theme-text-muted) !important;
+ background: var(--theme-text-muted) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ border-color: var(--theme-text-muted) !important;
+ background: var(--theme-text-muted) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-radio-button__inner {
+ background-color: var(--top) !important;
+ border-color: var(--top) !important;
+}
+.el-radio-button__inner:hover {
+ color: var(--theme-text) !important;
+}
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+ background-color: var(--theme-text-muted) !important;
+ border-color: var(--theme-text-muted) !important;
+ box-shadow: -1px 0 0 0 var(--theme-text-muted) !important;
+}
+.el-switch.is-checked .el-switch__core {
+ background-color: var(--theme-text-muted) !important;
+ border-color: var(--theme-text-muted) !important;
+}
+.el-switch__label.is-active {
+ color: var(--theme-text) !important;
+}
+.el-tag {
+ background: var(--farback);
+ border-color: var(--farback);
+ color: var(--theme-text);
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+ border-bottom-color: var(--theme-text);
+}
+
+.toggle-switch li[data-v-3cf97114] > label {
+ background-color: var(--top) !important;
+ border-color: var(--top) !important;
+ color: lightgrey !important;
+}
+
+.toggle-switch li[data-v-3cf97114] > label:hover {
+ background-color: var(--mid) !important;
+ border-color: var(--mid) !important;
+ color: var(--theme-text-muted) !important;
+}
+
+.toggle-switch li[data-v-3cf97114] > label.selected {
+ background-color: var(--mid) !important;
+ border-color: var(--mid) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-slider__bar {
+ background-color: var(--theme-text-muted) !important;
+}
+.el-slider__button {
+ border-color: var(--theme-text-muted) !important;
+}
+.el-table .descending .sort-caret.descending,
+.el-table .ascending .sort-caret.ascending {
+ border-top-color: var(--theme-text) !important;
+}
+
+.el-select-dropdown__item.selected {
+ color: var(--theme-text);
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ background-color: var(--farback);
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+ background-color: var(--farback);
+ color: var(--theme-text);
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,
+.el-dialog__headerbtn:hover .el-dialog__close {
+ color: var(--theme-text);
+}
+
+.el-progress-bar__inner {
+ background-color: var(--theme-text);
+}
+.el-progress-bar__outer {
+ background-color: var(--farback);
+}
+.el-button--text:focus,
+.el-button--text:hover {
+ color: var(--theme-text);
+}
+
+path[stroke='#20a0ff'] {
+ stroke: var(--theme-text) !important;
+}
+path[stroke='#e5e9f2'] {
+ stroke: var(--farback) !important;
+}
diff --git a/html/src/theme.darkvanilla.scss b/html/src/theme.darkvanilla.scss
index e7949e5e..65960b15 100644
--- a/html/src/theme.darkvanilla.scss
+++ b/html/src/theme.darkvanilla.scss
@@ -2,309 +2,632 @@
* VRCX Dark-Vanilla theme by MintLily
* https://github.com/MintLily/Dark-Vanilla
*/
-@import 'theme.dark.scss';
-:root {
- --ThemeName: 'Dark Vanilla';
- --ThemeVersion: 'v1.7';
- --ThemeAuthor: 'MintLily'; /* Discord: MintLily#0001 */
+ @import 'theme.dark.scss';
- --blur: 3px;
- --blur-more: 8px;
- --farback: #131719;
- --mid: #191f22;
- --top: #1e2427;
- --top-border: #151a1c;
- --theme-text: #eecce0;
- --theme-text-muted: #906d92;
- --theme-text-rgb: 238, 204, 224;
- --theme-text-muted-rgb: 144, 109, 146;
-}
-
-div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
- content: var(--ThemeName) ' ' var(--ThemeVersion) ' by ' var(--ThemeAuthor);
- color: var(--theme-text);
- float: right;
- padding-bottom: 10px;
- padding-right: 10px;
-}
-
-a {
- color: var(--theme-text) !important;
-}
-.x-menu-container {
- background: var(--top) !important;
-}
-.x-container {
- background: var(--farback) !important;
-}
-.x-aside-container {
- background: var(--mid) !important;
-}
-
-.el-tooltip__popper.is-dark {
- background: rgba(var(--theme-text-muted-rgb), 0.2) !important;
- backdrop-filter: blur(var(--blur));
-}
-
-.el-menu-item:focus,
-.el-menu-item:hover {
- background: var(--theme-text-muted) !important;
-}
-.el-menu-item.is-active {
- color: var(--theme-text) !important;
-}
-.el-menu-item.is-active::before {
- background: var(--theme-text) !important;
-}
-.el-menu-item.notify::after {
- background: var(--theme-text) !important;
-}
-.el-collapse-item__content,
-.el-collapse-item__wrap {
- background: var(--mid) !important;
-}
-
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
- background: var(--top) !important;
- border: var(--top-border) !important;
-}
-
-.el-input__inner,
-.el-textarea__inner,
-.el-textarea .el-input__count,
-.el-input .el-input__count .el-input__count-inner {
- background: var(--top) !important;
- border: var(--top-border) !important;
-}
-
-.el-table th.is-leaf {
- background: var(--top) !important;
- /*border: 1px solid var(--top-border) !important;*/
-}
-
-.el-table td,
-.el-table th.is-leaf {
- background: var(--top) !important;
-}
-.el-table--striped .el-table__body tr.el-table__row--striped td {
- background: var(--mid) !important;
-}
-
-.el-dialog,
-.el-pager li,
-.el-pagination .btn-next,
-.el-pagination .btn-prev {
- background: var(--mid) !important;
-}
-.el-pager li.active {
- color: var(--theme-text) !important;
-}
-.el-pager li.btn-quicknext,
-.el-pager li.btn-quickprev {
- color: var(--theme-text-muted) !important;
-}
-.el-pager li:hover,
-.el-pagination button:hover {
- color: var(--theme-text) !important;
-}
-
-.x-friend-item:hover,
-.x-change-image-item:hover {
- background: var(--theme-text-muted) !important;
-}
-
-.el-popover,
-.el-dropdown-menu {
- background: var(--top) !important;
- border: var(--top-border) !important;
-}
-
-.el-select-dropdown {
- background: var(--top) !important;
- border: var(--top-border) !important;
-}
-
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
- background: var(--mid) !important;
-}
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
- background: var(--farback) !important;
- border: var(--top-border) !important;
- color: white !important;
-}
-
-.el-tree,
-.el-message-box {
- background: rgba(38, 50, 56, 0.2) !important;
- border-color: rgba(38, 50, 56, 0.2) !important;
- backdrop-filter: blur(var(--blur));
-}
-.el-tree-node__content:hover {
- background: rgba(58, 69, 74, 0.6) !important;
- backdrop-filter: blur(var(--blur-more));
-}
-.el-tree-node:focus > .el-tree-node__content {
- background: rgba(0, 0, 0, 0.4) !important;
-}
-
-.el-tabs__item.is-active,
-.el-radio__input.is-checked + .el-radio__label {
- color: var(--theme-text) !important;
-}
-.el-tabs__active-bar {
- background-color: var(--theme-text) !important;
-}
-.el-tabs__item:hover {
- color: var(--theme-text-muted) !important;
-}
-.el-radio__input.is-checked .el-radio__inner {
- border-color: var(--theme-text) !important;
- background: var(--theme-text) !important;
-}
-.el-radio__inner:hover {
- border-color: var(--theme-text) !important;
-}
-
-.el-checkbox__input.is-checked + .el-checkbox__label {
- color: var(--theme-text-muted) !important;
-}
-.el-checkbox__input.is-checked .el-checkbox__inner,
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
- border-color: var(--theme-text-muted) !important;
- background: var(--theme-text-muted) !important;
-}
-
-.el-icon-star-on {
- color: var(--theme-text) !important;
-}
-
-.el-tag.el-tag--info {
- background: var(--farback) !important;
-}
-
-.el-loading-spinner .path {
- stroke: var(--theme-text) !important;
-}
-
-.noty_theme__mint.noty_type__success {
- background-color: var(--theme-text-muted) !important;
- border-bottom: var(--theme-text) !important;
-}
-
-.noty_theme__mint.noty_type__error {
- background-color: rgba(0, 0, 0, 0) !important;
-}
-
-.el-button--primary {
- border-color: var(--theme-text) !important;
- background: var(--theme-text) !important;
- color: black !important;
-}
-.el-button--primary:focus,
-.el-button--primary:hover {
- border-color: var(--theme-text-muted) !important;
- background: var(--theme-text-muted) !important;
- color: var(--theme-text) !important;
-}
-
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
-.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
- border-color: var(--theme-text-muted) !important;
- background: var(--theme-text-muted) !important;
- color: var(--theme-text) !important;
-}
-
-.el-radio-button__inner {
- background-color: var(--top) !important;
- border-color: var(--top) !important;
-}
-.el-radio-button__inner:hover {
- color: var(--theme-text) !important;
-}
-.el-radio-button__orig-radio:checked + .el-radio-button__inner {
- background-color: var(--theme-text-muted) !important;
- border-color: var(--theme-text-muted) !important;
- box-shadow: -1px 0 0 0 var(--theme-text-muted) !important;
-}
-.el-switch.is-checked .el-switch__core {
- background-color: var(--theme-text-muted) !important;
- border-color: var(--theme-text-muted) !important;
-}
-.el-switch__label.is-active {
- color: var(--theme-text) !important;
-}
-.el-tag {
- background: var(--farback);
- border-color: var(--farback);
- color: var(--theme-text);
-}
-.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
- border-bottom-color: var(--theme-text);
-}
-
-.toggle-switch li[data-v-3cf97114] > label {
- background-color: var(--top) !important;
- border-color: var(--top) !important;
- color: lightgrey !important;
-}
-
-.toggle-switch li[data-v-3cf97114] > label:hover {
- background-color: var(--mid) !important;
- border-color: var(--mid) !important;
- color: var(--theme-text-muted) !important;
-}
-
-.toggle-switch li[data-v-3cf97114] > label.selected {
- background-color: var(--mid) !important;
- border-color: var(--mid) !important;
- color: var(--theme-text) !important;
-}
-
-.el-slider__bar {
- background-color: var(--theme-text-muted) !important;
-}
-.el-slider__button {
- border-color: var(--theme-text-muted) !important;
-}
-.el-table .descending .sort-caret.descending,
-.el-table .ascending .sort-caret.ascending {
- border-top-color: var(--theme-text) !important;
-}
-
-.el-select-dropdown__item.selected {
- color: var(--theme-text);
-}
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
- background-color: var(--farback);
-}
-
-.el-dropdown-menu__item:focus,
-.el-dropdown-menu__item:not(.is-disabled):hover {
- background-color: var(--farback);
- color: var(--theme-text);
-}
-
-.el-dialog__headerbtn:focus .el-dialog__close,
-.el-dialog__headerbtn:hover .el-dialog__close {
- color: var(--theme-text);
-}
-
-.el-progress-bar__inner {
- background-color: var(--theme-text);
-}
-.el-progress-bar__outer {
- background-color: var(--farback);
-}
-.el-button--text:focus,
-.el-button--text:hover {
- color: var(--theme-text);
-}
-
-path[stroke='#20a0ff'] {
- stroke: var(--theme-text) !important;
-}
-path[stroke='#e5e9f2'] {
- stroke: var(--farback) !important;
-}
+ :root {
+ --ThemeName: "Dark Vanilla";
+ --ThemeVers: "2.0";
+ --ThemeAuth: "MintLily";
+
+ --dv_bright: #EECCE0;
+ --dv_muted: #906D92;
+ --dv_bright-rgb: 238, 204, 224;
+ --dv_muted-rgb: 144, 109, 146;
+ --dv_bg-top: #1e2427;
+ --dv_bg-mid: #191F22;
+ --dv_bg-bot: #131719;
+ --dv_lg-rounded: 1.0rem;
+ --dv_md-rounded: 0.6rem;
+ --dv_sm-rounded: 0.45rem;
+ --dv_background-modifier-selected: rgba(var(--dv_bright-rgb), 0.2);
+ --dv_background-modifier-hover: rgba(var(--dv_bright-rgb), 0.3);
+ --font-primary: "Encode Sans", "Tofu", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ --shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
+ }
+
+ /* MAIN */
+ html,
+ body,
+ .x-menu-container {
+ background-color: var(--dv_bg-bot);
+ }
+
+ /* vietnamese */
+ @font-face {
+ font-family: 'Encode Sans';
+ font-style: normal;
+ font-weight: 100 900;
+ font-stretch: 100%;
+ src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLR8A6WQw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+ }
+
+ /* latin-ext */
+ @font-face {
+ font-family: 'Encode Sans';
+ font-style: normal;
+ font-weight: 100 900;
+ font-stretch: 100%;
+ src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLRsA6WQw.woff2) format('woff2');
+ unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+ }
+
+ /* latin */
+ @font-face {
+ font-family: 'Encode Sans';
+ font-style: normal;
+ font-weight: 100 900;
+ font-stretch: 100%;
+ src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLSMA6.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+ }
+
+ body,
+ input,
+ textarea,
+ select,
+ button {
+ font-family: var(--font-primary);
+ }
+
+ a {
+ color: var(--dv_bright);
+ }
+
+ /* Side Bar */
+ .x-menu-container {
+ border-top-right-radius: var(--dv_lg-rounded);
+ border-bottom-right-radius: var(--dv_lg-rounded);
+ }
+
+ .el-menu-item.is-active {
+ color: var(--dv_bright);
+ }
+
+ .el-menu-item.is-active::before {
+ display: none;
+ }
+
+ .el-menu-item:focus,
+ .el-menu-item:hover {
+ background-color: var(--dv_background-modifier-hover);
+ }
+
+ li[class="el-menu-item is-active"] {
+ background-color: var(--dv_background-modifier-selected);
+ }
+
+ .el-menu-item:hover i {
+ color: #eee;
+ transition: 0.3s !important;
+ }
+
+ .el-tooltip__popper.is-dark,
+ .el-tooltip__popper[x-placement^=right] .popper__arrow::after {
+ background-color: var(--dv_bg-top);
+ border-radius: var(--dv_md-rounded);
+ box-shadow: var(--shadow);
+ }
+
+ .el-tooltip__popper[x-placement^=right] .popper__arrow::after {
+ background-color: var(--dv_bg-top);
+ }
+
+ /* Main Window Content */
+ /* Feed */
+ .x-app {
+ background-color: var(--dv_bg-top);
+ }
+
+ .x-container {
+ background-color: var(--dv_bg-top);
+ }
+
+ .x-container {
+ border-top-left-radius: var(--dv_lg-rounded);
+ border-bottom-left-radius: var(--dv_lg-rounded);
+ }
+
+ .el-select:hover .el-input__inner {
+ border: none;
+ }
+
+ .el-select>.el-input input,
+ .el-select .el-input input {
+ background-color: var(--dv_bg-bot);
+ border-radius: var(--dv_lg-rounded);
+ }
+
+ .el-select-dropdown {
+ background-color: var(--dv_bg-top);
+ border: none;
+ border-radius: var(--dv_lg-rounded);
+ box-shadow: var(--shadow);
+ }
+
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ background-color: var(--dv_background-modifier-hover);
+ transition: 0.2s;
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-select-dropdown__item.selected {
+ color: var(--dv_bright);
+ }
+
+ .el-popper[x-placement^=bottom] .popper__arrow,
+ .el-popper[x-placement^=bottom] .popper__arrow::after {
+ border-bottom-color: var(--dv_bg-top);
+ }
+
+ .el-select-dropdown__item {
+ color: #eee;
+ }
+
+ .el-input__inner {
+ background-color: var(--dv_bg-bot);
+ border-radius: var(--dv_lg-rounded);
+ }
+
+ .el-table thead {
+ color: #eee;
+ }
+
+ .el-table .descending .sort-caret.descending,
+ .el-table .ascending .sort-caret.ascending {
+ border-top-color: var(--dv_bright);
+ }
+
+ .el-table td.el-table__cell,
+ .el-table th.el-table__cell.is-leaf {
+ border-bottom-color: #5f5f5f;
+ }
+
+ .el-table tr,
+ .el-table td.el-table__cell,
+ .el-table th.el-table__cell {
+ background-color: var(--dv_bg-top);
+ border: none;
+ }
+
+ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+ background-color: var(--dv_bg-top);
+ border: none;
+ }
+
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td,
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td {
+ background-color: var(--dv_background-modifier-hover);
+ transition: 0.1s;
+ }
+
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_1_column_1"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_1_column_1"] {
+ border-top-left-radius: var(--dv_md-rounded);
+ border-bottom-left-radius: var(--dv_md-rounded);
+ }
+
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_1_column_5"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_1_column_5"] {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ tr[class="el-table__row"]:hover .el-table__expand-icon,
+ tr[class="el-table__row el-table__row--striped"]:hover .el-table__expand-icon {
+ color: #eee;
+ }
+
+ .el-table__expanded-cell:hover {
+ background-color: var(--dv_background-modifier-hover) !important;
+ transition: 0.1s;
+ border-bottom-left-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+ background-color: var(--dv_background-modifier-selected);
+ transition: 0.1s;
+ }
+
+ .el-pagination {
+ padding: 8px;
+
+ >button.btn-prev {
+ border-top-left-radius: var(--dv_sm-rounded);
+ border-bottom-left-radius: var(--dv_sm-rounded);
+ background-color: var(--dv_bg-bot);
+ }
+
+ >button.btn-next {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_sm-rounded);
+ background-color: var(--dv_bg-bot);
+ }
+
+ >ul>li,
+ button:disabled {
+ background-color: var(--dv_bg-bot);
+ color: #C0C4CC;
+ }
+
+ >button:hover {
+ color: var(--dv_bright);
+ }
+ }
+
+ .el-pagination .el-select .el-input .el-input__inner {
+ border-radius: var(--dv_sm-rounded);
+ }
+
+ .el-pager li.active,
+ .el-pager li:hover,
+ .el-button--text:hover {
+ color: var(--dv_bright);
+ }
+
+ /* Game Log */
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_2_column_6"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_2_column_6"] {
+ border-top-left-radius: var(--dv_md-rounded);
+ border-bottom-left-radius: var(--dv_md-rounded);
+ }
+
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_2_column_11"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_2_column_11"] {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ /* Search */
+ .el-tabs--card>.el-tabs__header .el-tabs__nav:first-child,
+ .el-tabs--card>.el-tabs__header .el-tabs__nav:first-child:hover {
+ border-top-left-radius: var(--dv_lg-rounded);
+ }
+
+ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+ border-bottom: 2px solid var(--dv_bright);
+ }
+
+ .el-tabs__item:hover {
+ border-bottom: 2px solid var(--dv_muted);
+ }
+
+ .el-tabs--card>.el-tabs__header .el-tabs__nav:last-child,
+ .el-tabs--card>.el-tabs__header .el-tabs__nav:last-child:hover {
+ border-top-right-radius: var(--dv_lg-rounded);
+ }
+
+ .el-tabs__item.is-active,
+ .el-tabs__item:hover {
+ color: var(--dv_bright);
+ }
+
+ .el-button.is-disabled,
+ .el-button.is-disabled:focus,
+ .el-button.is-disabled:hover,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ background-color: var(--dv_background-modifier-hover);
+ }
+
+ .el-button-group>.el-button:first-child {
+ border-top-left-radius: var(--dv_md-rounded);
+ border-bottom-left-radius: var(--dv_md-rounded);
+ }
+
+ .el-button-group>.el-button:last-child {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ .el-button-group>.el-button,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ border-color: transparent;
+ }
+
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ background-color: var(--dv_bg-bot);
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+ .el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ color: #eee;
+ }
+
+ .x-friend-item:hover,
+ .x-change-image-item:hover {
+ background-color: var(--dv_background-modifier-hover);
+ border-radius: var(--dv_lg-rounded);
+ }
+
+ /* Favorites */
+ .el-switch.is-checked .el-switch__core,
+ span[class="el-switch__core"][style*="border-color"] {
+ background-color: var(--dv_muted) !important;
+ border-color: var(--dv_muted) !important;
+ }
+
+ .el-switch__label.is-active {
+ color: var(--dv_bright);
+ }
+
+ .el-collapse-item__wrap {
+ background-color: var(--dv_bg-top);
+ border-bottom-color: transparent;
+ }
+
+ /* Friend Log */
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_4_column_21"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_4_column_21"] {
+ border-top-left-radius: var(--dv_md-rounded);
+ border-bottom-left-radius: var(--dv_md-rounded);
+ }
+
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_4_column_24"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_4_column_24"] {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ /* Moderation */
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_4_column_25"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_4_column_25"] {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ /* Notification */
+ table.el-table__body[style^="width:"] tr[class="el-table__row"]:hover td[class^="el-table_4_column_26"],
+ table.el-table__body[style^="width:"] tr[class="el-table__row el-table__row--striped"]:hover td[class^="el-table_4_column_26"] {
+ border-top-right-radius: var(--dv_md-rounded);
+ border-bottom-right-radius: var(--dv_md-rounded);
+ }
+
+ /* Profile */
+ .el-tree {
+ background-color: var(--dv_bg-bot);
+ }
+
+ div[role="treeitem"][class*="is-focusable"] {
+ background-color: var(--dv_bg-mid);
+ }
+
+
+ .el-switch__core {
+ background-color: var(--dv_bg-bot);
+ }
+
+ .el-radio-group label,
+ .el-radio-button__inner {
+ background-color: var(--dv_bg-bot);
+ border: none;
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+ background-color: var(--dv_muted);
+ border-color: var(--dv_muted);
+ box-shadow: none;
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-radio-button__inner:hover {
+ color: #eee;
+ background-color: var(--dv_background-modifier-hover);
+ border-radius: var(--dv_md-rounded);
+ }
+
+ div.options-container[style="margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;"]:after {
+ content: var(--ThemeName) ' v' var(--ThemeVers) ' by ' var(--ThemeAuth);
+ color: var(--dv_bright);
+ float: right;
+ padding-bottom: 10px;
+ padding-right: 10px;
+ font-size: 18pt;
+ }
+
+
+ .el-slider__bar {
+ background-color: var(--dv_muted);
+ }
+
+ .el-slider__button {
+ border-color: var(--dv_muted);
+ }
+
+ .el-dropdown-menu {
+ background-color: var(--dv_bg-top);
+ border: none;
+ border-radius: var(--dv_lg-rounded);
+ box-shadow: var(--shadow);
+ }
+
+ .el-dropdown-menu__item:focus,
+ .el-dropdown-menu__item:not(.is-disabled):hover {
+ color: #eee;
+ background-color: var(--dv_background-modifier-hover);
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-input-number__decrease:hover,
+ .el-input-number__increase:hover {
+ color: var(--dv_bright);
+ }
+
+
+ .el-dialog,
+ .el-pager li:not(li.number, li[class*="btn-quicknext"], li[class*="btn-quickprev"]) {
+ background-color: var(--dv_bg-top);
+ border: none;
+ border-radius: var(--dv_lg-rounded);
+ box-shadow: var(--shadow);
+ }
+
+ .el-button--primary {
+ background-color: var(--dv_muted);
+ border-color: var(--dv_muted);
+ }
+
+ .el-button--primary:focus,
+ .el-button--primary:hover {
+ background-color: rgba(var(--dv_muted-rgb), 0.6);
+ border-color: var(--dv_muted);
+
+ }
+
+ .el-textarea__inner {
+ background-color: var(--dv_bg-bot);
+ }
+
+ .el-textarea__inner:hover {
+ background-color: var(--dv_bg-mid);
+ }
+
+ .el-textarea .el-input__count {
+ background-color: transparent;
+ }
+
+ .el-popover {
+ background-color: var(--dv_bg-top);
+ border: none;
+ border-radius: var(--dv_lg-rounded);
+ box-shadow: var(--shadow);
+ color: #ddd;
+ }
+
+ .el-popper[x-placement^=top] .popper__arrow,
+ .el-popper[x-placement^=left] .popper__arrow,
+ .el-popper[x-placement^=right] .popper__arrow,
+ .el-popper[x-placement^=bottom] .popper__arrow {
+ display: none;
+ }
+
+ img.x-link,
+ img.friends-list-avatar {
+ border-radius: var(--dv_lg-rounded) !important;
+ }
+
+ .el-tag--mini {
+ height: 30px;
+ padding: 5px 15px;
+ font-size: 10pt;
+ border-radius: var(--dv_md-rounded);
+ }
+
+ .el-tag.el-tag--info,
+ .el-tag--plain.el-tag--success {
+ background-color: var(--dv_bg-bot);
+ }
+
+ .el-tag--plain.el-tag--warning,
+ .el-tag--plain.el-tag--danger,
+ .el-tag--plain {
+ background-color: var(--dv_bg-mid);
+ }
+
+ .el-tag--plain.el-tag--info {
+ color: #eee;
+ }
+
+ .el-tabs__active-bar {
+ background-color: var(--dv_muted);
+ }
+
+ .el-input--mini .el-textarea__inner:hover {
+ background-color: transparent !important;
+ }
+
+ i[class="el-icon-delete"],
+ i[class="el-icon-switch-button"],
+ .el-dropdown-menu--small .el-dropdown-menu__item.el-dropdown-menu__item--divided:has(i[class="el-icon-switch-button"]) {
+ color: #f56c6c;
+ }
+
+ i[class="el-icon-star-off"]:not(.el-menu-item div.el-tooltip i) {
+ color: #ffd000;
+ }
+
+ .el-dropdown-menu__item--divided {
+ border-color: rgba(255, 255, 255, 0.5);
+ }
+
+ .el-dropdown-menu__item--divided::before {
+ background-color: var(--dv_bg-top);
+ }
+
+ .el-tab-pane .el-radio-group[style^="margin-left: "] label {
+ background-color: transparent !important;
+ }
+
+ .el-radio__input.is-checked+.el-radio__label {
+ color: var(--dv_bright);
+ }
+
+ .el-radio__input.is-checked .el-radio__inner {
+ border-color: var(--dv_bright);
+ background-color: var(--dv_bright);
+ }
+
+ .el-input-group__append,
+ .el-input-group__prepend {
+ background-color: var(--dv_bg-mid);
+ border-color: transparent;
+ }
+
+ .el-input-group__append:hover {
+ background-color: transparent;
+ }
+
+ .el-dialog__headerbtn:focus .el-dialog__close,
+ .el-dialog__headerbtn:hover .el-dialog__close {
+ color: var(--dv_bright);
+ }
+
+
+ .x-aside-container {
+ background-color: var(--dv_bg-bot);
+ background: linear-gradient(180deg, var(--dv_bg-top) 0%, var(--dv_bg-bot) 25%, var(--dv_bg-bot) 100%);
+ border-top-left-radius: 2rem;
+ border-bottom-left-radius: var(--dv_lg-rounded);
+ }
+
+ .el-dialog__wrapper[style^="z-index: "] {
+ backdrop-filter: blur(8px);
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+
+ .v-modal {
+ background: none;
+ }
+
+
+ .noty_theme__mint.noty_type__error,
+ .noty_theme__mint.noty_type__success,
+ .noty_theme__mint.noty_type__alert,
+ .noty_theme__mint.noty_type__notification,
+ .noty_theme__mint.noty_type__warning,
+ .noty_theme__mint.noty_type__info,
+ .noty_theme__mint.noty_type__information {
+ border-radius: var(--dv_lg-rounded);
+ box-shadow: var(--shadow);
+ }
+
+ .noty_theme__mint.noty_type__success {
+ color: #fff;
+ background-color: var(--dv_muted);
+ border-bottom: 1px solid var(--dv_bright);
+ }
+
+
+ ::-webkit-scrollbar-track {
+ background: var(--dv_bg-mid)
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: var(--dv_bg-bot)
+ }
\ No newline at end of file
diff --git a/html/webpack.config.js b/html/webpack.config.js
index 0d56db57..95aea334 100644
--- a/html/webpack.config.js
+++ b/html/webpack.config.js
@@ -18,6 +18,7 @@ module.exports = {
dependOn: 'vendor'
},
'theme.dark': './src/theme.dark.scss',
+ 'theme.darkvanillaold': './src/theme.darkvanilla.1.7.scss',
'theme.darkvanilla': './src/theme.darkvanilla.scss',
'theme.pink': './src/theme.pink.scss',
'theme.material3': './src/theme.material3.scss',