diff --git a/src/assets/scss/themes/_theme.dark_styles.scss b/src/assets/scss/themes/_theme.dark_styles.scss
new file mode 100644
index 00000000..08dcc3d6
--- /dev/null
+++ b/src/assets/scss/themes/_theme.dark_styles.scss
@@ -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;
+}
diff --git a/src/assets/scss/themes/theme.dark.scss b/src/assets/scss/themes/theme.dark.scss
index 88b1e83f..2120e21c 100644
--- a/src/assets/scss/themes/theme.dark.scss
+++ b/src/assets/scss/themes/theme.dark.scss
@@ -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
\ No newline at end of file
+@import '_theme.dark_styles';
diff --git a/src/assets/scss/themes/theme.darkblue.scss b/src/assets/scss/themes/theme.darkblue.scss
new file mode 100644
index 00000000..640347a6
--- /dev/null
+++ b/src/assets/scss/themes/theme.darkblue.scss
@@ -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';
diff --git a/src/assets/scss/themes/theme.darkvanilla.scss b/src/assets/scss/themes/theme.darkvanilla.scss
index 08812575..3861f641 100644
--- a/src/assets/scss/themes/theme.darkvanilla.scss
+++ b/src/assets/scss/themes/theme.darkvanilla.scss
@@ -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;
+}
diff --git a/src/assets/scss/themes/theme.darkvanillaold.scss b/src/assets/scss/themes/theme.darkvanillaold.scss
index 71babb88..fef2d83e 100644
--- a/src/assets/scss/themes/theme.darkvanillaold.scss
+++ b/src/assets/scss/themes/theme.darkvanillaold.scss
@@ -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;
+}
diff --git a/src/assets/scss/themes/theme.material3.scss b/src/assets/scss/themes/theme.material3.scss
index 85b5429b..a0bfa757 100644
--- a/src/assets/scss/themes/theme.material3.scss
+++ b/src/assets/scss/themes/theme.material3.scss
@@ -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;
-}
\ No newline at end of file
+}
+
+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;
+}
diff --git a/src/assets/scss/themes/theme.pink.scss b/src/assets/scss/themes/theme.pink.scss
index f53f098a..d3df4a15 100644
--- a/src/assets/scss/themes/theme.pink.scss
+++ b/src/assets/scss/themes/theme.pink.scss
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/src/bootstrap.js b/src/bootstrap.js
index b9e13007..1638b264 100644
--- a/src/bootstrap.js
+++ b/src/bootstrap.js
@@ -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) {
diff --git a/src/localization/en/en.json b/src/localization/en/en.json
index 14c24f77..2c47055f 100644
--- a/src/localization/en/en.json
+++ b/src/localization/en/en.json
@@ -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",
diff --git a/src/localization/ja/en.json b/src/localization/ja/en.json
index a551bbf3..2edfcc2f 100644
--- a/src/localization/ja/en.json
+++ b/src/localization/ja/en.json
@@ -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": "ピンク",
diff --git a/src/localization/zh-CN/en.json b/src/localization/zh-CN/en.json
index 23df9b1e..7566a98b 100644
--- a/src/localization/zh-CN/en.json
+++ b/src/localization/zh-CN/en.json
@@ -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": "粉色",
diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js
index a221fe1e..495f289a 100644
--- a/src/shared/constants/themes.js
+++ b/src/shared/constants/themes.js
@@ -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,
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 7fc7b8fe..f8233970 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -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();
                 }
             }
diff --git a/webpack.config.js b/webpack.config.js
index 558ea0de..416fee2e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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`,