MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-14 04:13:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add darkblue theme, refactor dark theme

Browse Source
This commit is contained in:
pa
2025-08-03 21:59:40 +09:00
committed by Natsumi
parent 4e64177722
commit 2fea5f25b9
14 changed files with 890 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

511
src/assets/scss/themes/_theme.dark_styles.scss Normal file
View File

@@ -0,0 +1,511 @@
@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>.
//
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.15);
}
:root {
color-scheme: dark;
}
html,
body {
background-color: $--theme-bg-1;
}
body,
input,
textarea,
select,
button {
color: $--theme-text-1;
}
.el-dialog,
.el-message-box {
border-radius: 28px !important;
}
.el-dropdown-menu,
.el-select-dropdown,
.el-popover,
.el-picker-panel {
border: 1px solid hsl($--theme-hue, $--theme-saturation, 14%) !important;
box-shadow: 0 2px 12px hsla($--theme-hue, $--theme-saturation, 0%, 0.3) !important;
}
.el-message-box {
border: 0px !important;
box-shadow: none !important;
}
.el-loading-mask {
background-color: hsla(
$--theme-hue,
$--theme-saturation,
0%,
0.6
) !important;
}
.el-textarea .el-input__count,
.el-input .el-input__count .el-input__count-inner {
background-color: $--theme-bg-5;
}
.x-friend-item .el-textarea .el-input__count {
background-color: $--theme-bg-5;
}
// User dialog memo: input count background color
.x-friend-item:hover .el-input__count {
background: hsl($--theme-hue, $--theme-saturation, 24%);
}
.el-input-group__append,
.el-input-group__prepend {
color: $--theme-text-1;
background-color: $--theme-border-1;
border-color: $--theme-border-1;
}
.el-input-number__decrease,
.el-input-number__increase {
background: unset;
color: $--theme-text-1;
}
.el-input-number__decrease {
border-right: 1px solid hsla($--theme-hue, 20%, 87%, 0.2);
}
.el-input-number__increase {
border-left: 1px solid hsla($--theme-hue, 20%, 87%, 0.2);
}
.el-table tr,
.el-table td.el-table__cell,
.el-table th.el-table__cell {
background-color: hsl($--theme-hue, $--theme-saturation, 15%);
border-bottom: 1px solid $--theme-border-2;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: $--theme-border-2;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background-color: $--theme-bg-3;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: hsl($--theme-hue, $--theme-saturation, 18%);
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
color: $--theme-text-2;
background-color: $--theme-bg-4;
}
.el-pagination button:disabled {
color: hsl($--theme-hue, $--theme-saturation, 40%);
background-color: $--theme-bg-4;
}
.el-dialog {
background-color: $--theme-bg-4;
}
div.x-friend-list
> div:nth-child(1)
> div
> div.el-textarea.el-input--mini
> span.el-input__count {
background-color: $--theme-bg-4;
}
.el-pager li {
background-color: $--theme-bg-5;
color: $--theme-text-2;
}
.el-table {
color: $--theme-text-1;
}
.el-pagination__total {
color: hsl($--theme-hue, $--theme-saturation, 73%);
margin: 0 10px;
}
.el-tag--plain.el-tag--info {
background-color: $--theme-bg-5;
}
.el-collapse-item .el-tag--mini {
background-color: $--theme-bg-5;
border: transparent;
}
.el-button {
color: $--theme-text-2;
}
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
background-color: $--theme-bg-5;
border-color: $--theme-border-2;
}
.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: $--theme-text-1 !important;
background-color: $--theme-border-2;
border-color: $--theme-border-3;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
color: hsl($--theme-hue, $--theme-saturation, 53%);
background-color: hsl($--theme-hue, $--theme-saturation, 15%);
border-color: $--theme-bg-5;
}
.el-tabs--card > .el-tabs__header {
border-bottom-color: $--theme-border-2;
}
.el-dropdown-menu {
background-color: $--theme-bg-4;
border-color: $--theme-border-2;
}
.el-dropdown-menu__item--divided::before {
background-color: $--theme-border-2;
}
.el-dropdown-menu__item {
color: hsl($--theme-hue, $--theme-saturation, 83%);
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
color: $--theme-primary;
background-color: hsl($--theme-hue, $--theme-saturation, 27%);
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: $--theme-bg-5;
}
.el-popper[x-placement^='bottom'] .popper__arrow {
border-bottom-color: $--theme-border-2;
}
.el-form-item {
margin-bottom: 4px;
}
.el-message-box {
background-color: $--theme-bg-4;
}
.el-tree {
background: hsl($--theme-hue, $--theme-saturation, 12%);
}
.el-menu-item i {
color: $--theme-info;
}
.el-menu-item.notify::after {
background: hsl($--theme-hue, 0%, 92%);
}
.el-menu-item.is-active::before {
background: hsl($--theme-hue, 0%, 87%);
}
.el-menu-item:focus,
.el-menu-item:hover {
background-color: $--theme-border-3;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-left-color: $--theme-border-2;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: hsl($--theme-hue, $--theme-saturation, 40%);
border-left-color: $--theme-border-2;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border-color: $--theme-border-2;
}
.el-collapse-item__header {
background-color: inherit;
}
.el-collapse-item__wrap {
background-color: hsl($--theme-hue, $--theme-saturation, 16%);
}
.el-message-box__title {
color: $--theme-text-2;
}
.el-dialog__title {
color: $--theme-text-2;
}
.el-message-box__content {
color: $--theme-text-2;
}
.el-switch__core {
background-color: hsl($--theme-hue, $--theme-saturation, 13%);
border-color: hsl($--theme-hue, $--theme-saturation, 37%);
}
.el-popover {
color: $--theme-text-2;
background-color: $--theme-bg-4;
border-color: hsl($--theme-hue, $--theme-saturation, 37%);
}
.el-popper[x-placement^='right'] .popper__arrow::after {
border-right-color: hsl($--theme-hue, $--theme-saturation, 37%);
}
.el-popper[x-placement^='right'] .popper__arrow {
border-right-color: hsl($--theme-hue, $--theme-saturation, 37%);
}
.el-switch__label {
color: hsl($--theme-hue, $--theme-saturation, 63%);
}
.el-table,
.el-table__expanded-cell {
background-color: inherit;
}
.el-tree-node:focus > .el-tree-node__content {
background-color: hsl($--theme-hue, $--theme-saturation, 16%);
}
.el-select-dropdown__item {
color: $--theme-text-2;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: $--theme-border-2;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
background-color: $--theme-border-2;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: hsl($--theme-hue, $--theme-saturation, 24%);
}
.el-tag.el-tag--info {
background-color: $--theme-border-2;
border-color: hsl($--theme-hue, $--theme-saturation, 14%);
}
.el-table__expanded-cell:hover {
background-color: hsl($--theme-hue, $--theme-saturation, 19%) !important;
}
.el-dialog__body {
color: $--theme-text-1;
}
.el-radio {
color: $--theme-text-1;
}
.el-radio-button__inner {
color: $--theme-text-1;
background: hsl($--theme-hue, $--theme-saturation, 34%);
border: 1px solid hsl($--theme-hue, $--theme-saturation, 40%);
}
.el-radio-button:first-child .el-radio-button__inner {
border-left: 1px solid rgba(0, 0, 0, 0);
}
.el-radio-button.is-disabled .el-radio-button__inner {
background-color: unset;
border-color: unset;
border: 1px solid hsl($--theme-hue, $--theme-saturation, 40%);
}
.el-button {
color: $--theme-text-1;
}
.el-form-item__label {
color: $--theme-text-2;
}
.el-checkbox {
color: $--theme-text-2;
}
.el-input.is-disabled .el-input__inner {
background-color: hsl($--theme-hue, $--theme-saturation, 23%);
}
.x-app {
background-color: $--theme-bg-1;
}
.x-container {
background: $--theme-bg-3;
}
.x-app > .x-container {
overflow: hidden auto !important;
}
.x-login-container {
background-color: $--theme-bg-1;
}
.x-aside-container {
background-color: $--theme-bg-2;
}
.x-friend-list {
overflow: hidden auto !important;
}
.x-friend-list > .x-friend-group {
color: $--theme-text-1;
}
.x-friend-item:hover,
.x-change-image-item:hover {
background: hsl($--theme-hue, $--theme-saturation, 24%);
}
.x-friend-item > .detail > .name {
color: $--theme-text-1;
}
.x-friend-item > .detail > .extra,
.extra {
color: hsl($--theme-hue, 4%, 78%);
}
.x-login-container p {
color: hsl($--theme-hue, 5%, 87%);
}
.x-menu-container {
background: $--theme-bg-2;
overflow: hidden auto !important;
}
.x-grey {
color: $--theme-text-3;
}
.el-color-picker__panel {
background-color: $--theme-bg-3;
}
.x-text-removed {
text-decoration: line-through;
color: hsl(0, 100%, 64%);
background-color: hsla(0, 100%, 50%, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.x-text-added {
color: rgb(76, 255, 80);
background-color: rgba(76, 255, 80, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.el-divider {
background-color: $--theme-text-4;
}
.el-divider__text {
background: $--theme-bg-3;
color: $--theme-text-1;
}
.el-tabs__content {
overflow-y: auto !important;
}
.el-date-picker {
background-color: $--theme-bg-3;
}
.el-date-table td.disabled div {
background-color: hsl($--theme-hue, $--theme-saturation, 16%);
color: $--theme-text-4;
}
.el-date-table td.next-month,
.el-date-table td.prev-month {
color: $--theme-text-4;
}
.el-date-table th {
border-bottom: 1px solid hsl($--theme-hue, $--theme-saturation, 33%);
}
.el-picker-panel {
border: 1px solid $--theme-border-2;
background-color: $--theme-bg-4;
}
.el-year-table td.disabled .cell {
background-color: hsla($--theme-hue, $--theme-saturation, 0%, 0.2);
}
.el-month-table td.disabled .cell {
background-color: hsla($--theme-hue, $--theme-saturation, 0%, 0.2);
}
.el-color-picker__trigger {
border: none;
}

545
src/assets/scss/themes/theme.dark.scss
View File

@@ -8,479 +8,126 @@
// For a copy, see <https://opensource.org/licenses/MIT>.
//
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
}
$--theme-hue: 0;
$--theme-saturation: 0%;
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); // #101010
$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 9%); // #171717
$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 13%); // #222222
$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 17%); // #2b2b2b
$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 20%); // #333333
$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 23%); // #3a3a3a
$--theme-border-2: hsl($--theme-hue, $--theme-saturation, 25%); // #404040
$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 31%); // #505050
$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 100%); // #ffffff
$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 78%); // #c8c8c8
$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 70%); // #b3b3b3
$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); // #606266
$--theme-primary: #66b1ff;
$--theme-success: #67c23a;
$--theme-warning: #e6a23c;
$--theme-danger: #f56c6c;
$--theme-info: #909399;
:root {
color-scheme: dark;
}
// Mapping
html,
body {
background-color: #101010;
}
$--color-primary: $--theme-primary;
$--color-success: $--theme-success;
$--color-warning: $--theme-warning;
$--color-danger: $--theme-danger;
$--color-info: $--theme-info;
body,
input,
textarea,
select,
button {
color: #fff;
}
$--color-white: $--theme-text-1;
$--color-black: $--theme-bg-1;
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.6);
}
$--color-text-primary: $--theme-text-1;
$--color-text-regular: $--theme-text-2;
$--color-text-secondary: $--theme-info;
$--color-text-placeholder: $--theme-text-4;
.el-input__inner,
.el-textarea__inner,
.el-textarea .el-input__count,
.el-input .el-input__count .el-input__count-inner {
color: #fff;
background-color: #444;
border: #333;
}
$--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%);
.x-friend-item .el-textarea .el-input__count {
background-color: #333;
}
$--background-color-base: hsl($--theme-hue, $--theme-saturation, 16%);
// User dialog memo: input count background color
.x-friend-item:hover .el-input__count {
background: #3e3e3e;
}
$--button-default-background-color: $--theme-bg-5;
$--button-default-border-color: $--theme-border-2;
$--button-default-font-color: $--theme-text-2;
.el-input-group__append,
.el-input-group__prepend {
color: #fff;
background-color: #666;
border: #555;
}
$--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%);
.el-input-number__decrease,
.el-input-number__increase {
background: unset;
color: #fff;
}
$--select-input-focus-border-color: hsl($--theme-hue, $--theme-saturation, 33%);
.el-input-number__decrease {
border-right: 1px solid #dcdfe633;
}
$--dialog-background-color: $--theme-bg-4;
$--popover-background-color: $--theme-bg-4;
.el-input-number__increase {
border-left: 1px solid #dcdfe633;
}
$--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%
);
.el-table tr,
.el-table td.el-table__cell,
.el-table th.el-table__cell {
background-color: #292929;
border-bottom: 1px solid #5f5f5f;
}
$--pagination-font-color: $--theme-text-2;
$--pagination-background-color: $--theme-bg-4;
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: #5f5f5f;
}
$--tooltip-fill: $--theme-bg-4;
$--tooltip-color: $--theme-text-1;
$--tooltip-border-color: $--theme-bg-4;
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background-color: #202020;
}
$--backtop-background-color: $--theme-bg-5;
$--backtop-font-color: $--theme-text-2;
$--backtop-hover-background-color: $--theme-border-2;
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: #323232;
}
$--datepicker-font-color: $--theme-text-1;
$--datepicker-header-font-color: $--theme-text-1;
$--datepicker-icon-color: $--theme-text-1;
.el-pagination .btn-next,
.el-pagination .btn-prev {
color: #bbb;
background-color: #333;
}
$--skeleton-color: $--theme-bg-5;
$--skeleton-to-color: hsl($--theme-hue, $--theme-saturation, 33%);
.el-pagination button:disabled {
color: #101010;
background-color: #333;
}
$--select-dropdown-background: $--theme-bg-4;
$--select-dropdown-border: 1px solid $--theme-border-1;
.el-dialog,
.el-pager li {
background-color: #333;
}
$--dropdown-menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
.el-pager li {
color: #bbb;
}
$--tree-font-color: $--theme-text-2;
$--tree-node-hover-background-color: hsl(
$--theme-hue,
$--theme-saturation,
16%
);
.el-table {
color: #fff;
}
$--menu-item-font-color: $--theme-text-2;
$--menu-background-color: $--theme-bg-2;
.el-pagination__total {
color: #bbb;
}
$--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%);
.el-tag--plain.el-tag--info {
background-color: #333;
}
$--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;
.el-collapse-item .el-tag--mini {
background-color: #333;
border: transparent;
}
$--pagination-hover-color: $--theme-text-4;
.el-button {
color: #c5cad6;
}
$--font-path: '~element-ui/lib/theme-chalk/fonts';
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
background-color: #353535;
border-color: #404040;
}
@import '~element-ui/packages/theme-chalk/src/index';
.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: #000;
background-color: #737373;
border-color: #656565;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
color: #c0c4cc;
background-color: #292929;
border-color: #3d3d3d;
}
.el-tabs__item {
color: #c2c4ca;
}
.el-tabs--card > .el-tabs__header {
border-bottom-color: #5f5f5f;
}
.el-dropdown-menu {
background-color: #353535;
border-color: #404040;
}
.el-dropdown-menu__item--divided::before {
background-color: #404040;
}
.el-dropdown-menu__item {
color: #d4d4d4;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
color: #66b1ff;
background-color: #444;
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: #333;
}
.el-popper[x-placement^='bottom'] .popper__arrow {
border-bottom-color: #404040;
}
.el-message-box {
background-color: #333;
border-color: #5f5f5f;
}
.el-tree {
color: #bbb;
background: #202020;
}
.el-menu-item i {
color: #909399;
}
.el-menu-item.notify::after {
background: #ebeef5;
}
.el-menu-item.is-active::before {
background: #dcdfe6;
}
.el-menu-item:focus,
.el-menu-item:hover {
background-color: #505050;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-left-color: #5f5f5f;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #9c9c9c;
border-left-color: #5f5f5f;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border-color: #5f5f5f;
}
.el-collapse-item__header {
color: #d0d0d0;
background-color: inherit;
border-bottom-color: #5f5f5f;
}
.el-collapse-item__wrap {
background-color: #333;
border-bottom-color: #5f5f5f;
}
.el-message-box__title {
color: #c8c8c8;
}
.el-dialog__title {
color: #c8c8c8;
}
.el-message-box__content {
color: #c8c8c8;
}
.el-collapse-item__content {
color: #848484;
}
.el-switch__core {
background-color: #212121;
border-color: #5f5f5f;
}
.el-popover {
color: #c8c8c8;
background-color: #333;
border-color: #5f5f5f;
}
.el-popper[x-placement^='right'] .popper__arrow::after {
border-right-color: #5f5f5f;
}
.el-popper[x-placement^='right'] .popper__arrow {
border-right-color: #5f5f5f;
}
.el-switch__label {
color: #a0a0a0;
}
.el-table,
.el-table__expanded-cell {
background-color: inherit;
}
.el-tree-node__content:hover {
background-color: #272727;
}
.el-tree-node:focus > .el-tree-node__content {
background-color: #333;
}
.el-select-dropdown {
background-color: #353535;
}
.el-select-dropdown__item {
color: #c8c8c8;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #404040;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
background-color: #404040;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #3e3e3e;
}
.el-tag.el-tag--info {
background-color: #404040;
border-color: #252525;
}
.el-table__expanded-cell:hover {
background-color: #323232 !important;
}
.el-dialog__body {
color: #fff;
}
.el-radio {
color: #fff;
}
.el-radio-button__inner {
color: #fff;
background: #565656;
border: 1px solid #666666;
}
.el-radio-button:first-child .el-radio-button__inner {
border-left: 1px solid rgba(0, 0, 0, 0);
}
.el-radio-button.is-disabled .el-radio-button__inner {
background-color: unset;
border-color: unset;
border: 1px solid #666666;
}
.el-button {
color: #fff;
}
.el-form-item__label {
color: #c8c8c8;
}
.el-checkbox {
color: #c8c8c8;
}
.el-input.is-disabled .el-input__inner {
background-color: #3b3b3b;
}
.x-app {
background-color: #101010;
}
.x-container {
background: #222;
}
.x-login-container {
background-color: #101010;
}
.x-aside-container {
background-color: #171717;
}
.x-friend-list > .x-friend-group {
color: #fff;
}
.x-friend-item:hover,
.x-change-image-item:hover {
background: #3e3e3e;
}
.x-friend-item > .detail > .name {
color: #fff;
}
.x-friend-item > .detail > .extra,
.extra {
color: #c7c7c7;
}
.x-login-container p {
color: #ddd;
}
.x-menu-container {
background: #303133;
}
.x-grey {
color: #b3b3b3;
}
.el-color-picker__panel {
background-color: #222;
}
.x-text-removed {
text-decoration: line-through;
color: #ff4444;
background-color: rgba(255, 0, 0, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.x-text-added {
color: rgb(76, 255, 80);
background-color: rgba(76, 255, 80, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.el-divider {
background-color: #606266;
}
.el-divider__text {
background: #222;
color: #ffffff;
}
.el-backtop {
background-color: #333;
}
// Date picker
.el-date-picker {
background-color: #222;
color: #fff;
}
.el-date-table td.disabled div {
background-color: #333;
color: #606266;
}
.el-date-table td.next-month,
.el-date-table td.prev-month {
color: #606266;
}
.el-picker-panel__icon-btn {
color: #fff;
}
.el-date-table th {
border-bottom: 1px solid #555;
color: #fff;
}
.el-date-picker__header-label {
color: #fff;
}
.el-picker-panel {
border: 1px solid #333;
}
.el-year-table td.disabled .cell {
background-color: rgba(0, 0, 0, 0.2);
}
.el-month-table td.disabled .cell {
background-color: rgba(0, 0, 0, 0.2);
}
// Date picker end
// el-skeleton
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(90deg, #333 25%, #555 37%, #333 63%);
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
}
// el-sekeleton end
@import '_theme.dark_styles';

133
src/assets/scss/themes/theme.darkblue.scss Normal file
View File

@@ -0,0 +1,133 @@
@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: 210;
$--theme-saturation: 15%;
$--theme-bg-1: hsl($--theme-hue, $--theme-saturation, 6%); // #101010
$--theme-bg-2: hsl($--theme-hue, $--theme-saturation, 9%); // #171717
$--theme-bg-3: hsl($--theme-hue, $--theme-saturation, 13%); // #222222
$--theme-bg-4: hsl($--theme-hue, $--theme-saturation, 17%); // #2b2b2b
$--theme-bg-5: hsl($--theme-hue, $--theme-saturation, 20%); // #333333
$--theme-border-1: hsl($--theme-hue, $--theme-saturation, 23%); // #3a3a3a
$--theme-border-2: hsl($--theme-hue, $--theme-saturation, 25%); // #404040
$--theme-border-3: hsl($--theme-hue, $--theme-saturation, 31%); // #505050
$--theme-text-1: hsl($--theme-hue, $--theme-saturation, 100%); // #ffffff
$--theme-text-2: hsl($--theme-hue, $--theme-saturation, 78%); // #c8c8c8
$--theme-text-3: hsl($--theme-hue, $--theme-saturation, 70%); // #b3b3b3
$--theme-text-4: hsl($--theme-hue, $--theme-saturation, 38%); // #606266
$--theme-primary: #66b1ff;
$--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';

9
src/assets/scss/themes/theme.darkvanilla.scss
View File

@@ -179,6 +179,7 @@ li[class='el-menu-item is-active'] {
.el-input__inner {
background-color: var(--dv_bg-bot);
border-radius: var(--dv_lg-rounded);
transition: none !important;
}
.el-table thead {
@@ -748,3 +749,11 @@ i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) {
color: var(--dv_muted);
}
// Date picker end
div.x-friend-list
> div:nth-child(1)
> div
> div.el-textarea.el-input--mini
> span.el-input__count {
background-color: var(--mid) !important;
}

20
src/assets/scss/themes/theme.darkvanillaold.scss
View File

@@ -2,7 +2,7 @@
* VRCX Dark-Vanilla theme by MintLily
* https://github.com/MintLily/Dark-Vanilla
*/
@use 'theme.dark';
:root {
--ThemeName: 'Dark Vanilla';
--ThemeVersion: 'v1.7';
@@ -329,7 +329,7 @@ path[stroke='#e5e9f2'] {
color: #efefef;
}
.el-backtop {
color: var(--theme-text-muted)
color: var(--theme-text-muted);
}
// Date picker
@@ -344,17 +344,27 @@ path[stroke='#e5e9f2'] {
color: #fff;
}
.el-date-table td.available:hover {
color: #fff
color: #fff;
}
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
color: var(--theme-text-muted);
}
.el-month-table td.current:not(.disabled) .cell {
color: var(--theme-text-muted);
}
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
color: var(--theme-text-muted);
}
.el-picker-panel__icon-btn:hover {
color: var(--theme-text-muted);
}
div.x-friend-list
> div:nth-child(1)
> div
> div.el-textarea.el-input--mini
> span.el-input__count {
background-color: var(--mid) !important;
}

98
src/assets/scss/themes/theme.material3.scss
View File

@@ -2,7 +2,7 @@
* VRCX Material-You-like theme by Kamiya
* https://github.com/kamiya10/VRCX-theme
*/
@use 'theme.dark';
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@@ -30,74 +30,86 @@ body {
--md-sys-color-inverse-surface: 236, 223, 224;
--md-sys-color-inverse-on-surface: 54, 47, 48;
--md-sys-color-inverse-primary: 154, 64, 88;
--md-sys-color-surface-1: linear-gradient(
--md-sys-color-surface-1:
linear-gradient(
0deg,
rgba(var(--md-sys-color-primary), 0.05),
rgba(var(--md-sys-color-primary), 0.05)
),
rgb(var(--md-sys-color-surface));
--md-sys-color-surface-2: linear-gradient(
--md-sys-color-surface-2:
linear-gradient(
0deg,
rgba(var(--md-sys-color-primary), 0.08),
rgba(var(--md-sys-color-primary), 0.08)
),
rgb(var(--md-sys-color-surface));
--md-sys-color-surface-3: linear-gradient(
--md-sys-color-surface-3:
linear-gradient(
0deg,
rgba(var(--md-sys-color-primary), 0.11),
rgba(var(--md-sys-color-primary), 0.11)
),
rgb(var(--md-sys-color-surface));
--md-sys-color-surface-4: linear-gradient(
--md-sys-color-surface-4:
linear-gradient(
0deg,
rgba(var(--md-sys-color-primary), 0.14),
rgba(var(--md-sys-color-primary), 0.14)
),
rgb(var(--md-sys-color-surface));
--md-sys-typescale-headline-medium-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-headline-medium-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-headline-medium-line-height: 36px;
--md-sys-typescale-headline-medium-size: 28px;
--md-sys-typescale-headline-medium-weight: 500;
--md-sys-typescale-headline-medium-tracking: 0;
--md-sys-typescale-headline-small-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-headline-small-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-small-weight: 500;
--md-sys-typescale-headline-small-tracking: 0;
--md-sys-typescale-title-medium-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-title-medium-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-title-medium-line-height: 24px;
--md-sys-typescale-title-medium-size: 16px;
--md-sys-typescale-title-medium-weight: 600;
--md-sys-typescale-title-medium-tracking: 0.15px;
--md-sys-typescale-label-large-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-label-large-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-label-large-line-height: 20px;
--md-sys-typescale-label-large-size: 14px;
--md-sys-typescale-label-large-weight: 600;
--md-sys-typescale-label-large-tracking: 0.1px;
--md-sys-typescale-label-medium-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-label-medium-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-label-medium-line-height: 16px;
--md-sys-typescale-label-medium-size: 12px;
--md-sys-typescale-label-medium-weight: 600;
--md-sys-typescale-label-medium-tracking: 0.5px;
--md-sys-typescale-body-large-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-large-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-large-tracking: 0.5px;
--md-sys-typescale-body-medium-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-medium-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-medium-tracking: 0.25px;
--md-sys-typescale-body-small-font: 'Google Sans', 'Noto Sans',
'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-small-font:
'Google Sans', 'Noto Sans', 'Noto Sans TC', 'Noto Sans JP',
'Noto Sans SC', 'Roboto', sans-serif;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-small-weight: 400;
@@ -1085,8 +1097,8 @@ input[type='number'],
border-radius: 8px;
height: 28px;
padding: 0 12px;
// margin-top: 8px !important;
// margin-right: 8px !important;
// margin-top: 8px !important;
// margin-right: 8px !important;
color: rgb(var(--md-sys-color-on-surface-variant));
font-family: var(--md-sys-typescale-label-large-font);
line-height: 28px;
@@ -2036,36 +2048,37 @@ i.x-user-status {
color: #fff;
}
.el-date-table td.available:hover {
color: #fff
color: #fff;
}
.el-date-table td.disabled div {
background-color: rgb(48, 46, 53)
background-color: rgb(48, 46, 53);
}
.el-date-table td.current:not(.disabled) span
{
.el-date-table td.current:not(.disabled) span {
background: var(--md-sys-color-surface-2);
color: #fff;
}
.el-date-table td.today span {
color: rgb(var(--md-sys-color-primary-container));
}
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
color: rgb(48, 46, 53);
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
color: rgb(48, 46, 53);
}
.el-month-table td.current:not(.disabled) .cell {
color: rgb(48, 46, 53);
color: rgb(48, 46, 53);
}
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
color: rgb(48, 46, 53);
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
color: rgb(48, 46, 53);
}
.el-picker-panel__icon-btn:hover {
color: rgb(48, 46, 53);
color: rgb(48, 46, 53);
}
.el-month-table td .cell:hover {
color: rgb(48, 46, 53);
color: rgb(48, 46, 53);
}
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(90deg, #302E34 25%, #423F46 37%, #302E34 63%);
background: linear-gradient(90deg, #302e34 25%, #423f46 37%, #302e34 63%);
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
}
@@ -2079,7 +2092,18 @@ i.x-user-status {
display: flex;
align-items: center;
}
.el-dialog[aria-label='Launch'] .el-form > .el-form-item:nth-child(2) .el-form-item__label {
.el-dialog[aria-label='Launch']
.el-form
> .el-form-item:nth-child(2)
.el-form-item__label {
display: flex;
align-items: center;
}
}
div.x-friend-list
> div:nth-child(1)
> div
> div.el-textarea.el-input--mini
> span.el-input__count {
background-color: var(--md-sys-color-surface-3) !important;
}

19
src/assets/scss/themes/theme.pink.scss
View File

@@ -2,7 +2,7 @@
* VRCX Pink theme by Kamiya
* https://github.com/kamiya10/VRCX-theme
*/
@use 'theme.dark';
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
:root {
--theme: #dfa2a2;
@@ -13,7 +13,8 @@
--lighter-lighter-lighter-bg: #756060;
--lighter-lighter-lighter-lighter-bg: #857070;
--lighter-border: #aa6065;
--font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
--font:
'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
'Noto Sans SC', sans-serif;
}
body,
@@ -375,7 +376,7 @@ input[type='checkbox']:checked + .el-switch__core {
}
.el-backtop {
background: var(--lighter-bg);
color: var(--theme)
color: var(--theme);
}
// Date picker
@@ -393,15 +394,17 @@ input[type='checkbox']:checked + .el-switch__core {
color: #fff;
}
.el-date-table td.available:hover {
color: #fff
color: #fff;
}
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
color: var(--theme);
}
.el-month-table td.current:not(.disabled) .cell {
color: var(--theme);
}
.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
color: var(--theme);
}
.el-picker-panel__icon-btn:hover {
@@ -411,11 +414,11 @@ input[type='checkbox']:checked + .el-switch__core {
color: var(--theme);
}
.el-date-table td.disabled div {
background-color: #3a2b2b
background-color: #3a2b2b;
}
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(90deg, #4a3d3d 25%, #665252 37%, #4a3d3d 63%);
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
}
}

40
src/bootstrap.js vendored
View File

@@ -25,10 +25,33 @@ configRepository.init();
AppApi.SetUserAgent();
try {
// @ts-ignore
i18n.locale = await configRepository.getString('VRCX_appLanguage', 'en');
// prevent flicker on login page
function setLoginContainerStyle(isDarkMode) {
const loginContainerStyle = document.createElement('style');
loginContainerStyle.id = 'login-container-style';
loginContainerStyle.type = 'text/css';
const backgroundColor = isDarkMode ? '#101010' : '#ffffff';
const inputBackgroundColor = isDarkMode ? '#333333' : '#ffffff';
const inputBorder = isDarkMode ? '1px solid #3b3b3b' : '1px solid #DCDFE6';
loginContainerStyle.innerHTML = `
.x-login-container {
background-color: ${backgroundColor} !important;
transition: background-color 0.3s ease;
}
.x-login-container .el-input__inner {
background-color: ${inputBackgroundColor} !important;
border: ${inputBorder} !important;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
`;
document.head.insertBefore(loginContainerStyle, document.head.firstChild);
}
async function getThemeMode() {
const initThemeMode = await configRepository.getString(
'VRCX_ThemeMode',
'system'
@@ -43,6 +66,17 @@ try {
} else {
isDarkMode = true;
}
return { initThemeMode, isDarkMode };
}
try {
// @ts-ignore
i18n.locale = await configRepository.getString('VRCX_appLanguage', 'en');
const { initThemeMode, isDarkMode } = await getThemeMode();
setLoginContainerStyle(isDarkMode);
changeAppDarkStyle(isDarkMode);
changeAppThemeStyle(initThemeMode);
} catch (error) {

2
src/localization/en/en.json
View File

@@ -379,6 +379,8 @@
"theme_mode_system": "System",
"theme_mode_light": "Light",
"theme_mode_dark": "Dark",
"theme_mode_blue": "Blue",
"theme_mode_darkblue": "Dark Blue",
"theme_mode_darkvanillaold": "Dark Vanilla (old)",
"theme_mode_darkvanilla": "Dark Vanilla",
"theme_mode_pink": "Pink",

1
src/localization/ja/en.json
View File

@@ -374,6 +374,7 @@
"theme_mode_system": "システム",
"theme_mode_light": "ライト",
"theme_mode_dark": "ダーク",
"theme_mode_darkblue": "ダークブルー",
"theme_mode_darkvanillaold": "ダークバニラ (レガシー)",
"theme_mode_darkvanilla": "ダークバニラ",
"theme_mode_pink": "ピンク",

1
src/localization/zh-CN/en.json
View File

@@ -376,6 +376,7 @@
"theme_mode_system": "跟随系统",
"theme_mode_light": "浅色",
"theme_mode_dark": "深色",
"theme_mode_darkblue": "深蓝色",
"theme_mode_darkvanillaold": "深色香草（旧）",
"theme_mode_darkvanilla": "深色香草",
"theme_mode_pink": "粉色",

6
src/shared/constants/themes.js
View File

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

6
src/stores/auth.js
View File

@@ -449,6 +449,12 @@ export const useAuthStore = defineStore('Auth', () => {
type: 'info',
callback: (action) => {
if (action === 'confirm') {
const existingStyle = document.getElementById(
'login-container-style'
);
if (existingStyle) {
existingStyle.parentNode.removeChild(existingStyle);
}
handleLogoutEvent();
}
}

1
webpack.config.js
View File

@@ -23,6 +23,7 @@ module.exports = (env, argv) => {
dependOn: 'vendor'
},
'theme.dark': `${themeBasePath}theme.dark.scss`,
'theme.darkblue': `${themeBasePath}theme.darkblue.scss`,
'theme.darkvanillaold': `${themeBasePath}theme.darkvanillaold.scss`,
'theme.darkvanilla': `${themeBasePath}theme.darkvanilla.scss`,
'theme.pink': `${themeBasePath}theme.pink.scss`,