diff --git a/html/src/app.js b/html/src/app.js
index 704f95d9..5c254704 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -15692,6 +15692,11 @@ speechSynthesis.getVoices();
     };
 
     $app.methods.changeThemeMode = async function () {
+        if (
+            document.contains(document.getElementById('app-theme-dark-style'))
+        ) {
+            document.getElementById('app-theme-dark-style').remove();
+        }
         if (document.contains(document.getElementById('app-theme-style'))) {
             document.getElementById('app-theme-style').remove();
         }
@@ -15704,7 +15709,11 @@ speechSynthesis.getVoices();
                 this.isDarkMode = false;
                 break;
             case 'dark':
-                $appThemeStyle.href = 'theme.dark.css';
+                $appThemeStyle.href = '';
+                this.isDarkMode = true;
+                break;
+            case 'darkvanillaold':
+                $appThemeStyle.href = 'theme.darkvanillaold.css';
                 this.isDarkMode = true;
                 break;
             case 'darkvanilla':
@@ -15720,21 +15729,22 @@ speechSynthesis.getVoices();
                 this.isDarkMode = true;
                 break;
             case 'system':
-                if (this.systemIsDarkMode()) {
-                    $appThemeStyle.href = 'theme.dark.css';
-                    this.isDarkMode = true;
-                } else {
-                    $appThemeStyle.href = '';
-                    this.isDarkMode = false;
-                }
+                this.isDarkMode = this.systemIsDarkMode();
                 break;
         }
         if (this.isDarkMode) {
             AppApi.ChangeTheme(1);
+            var $appThemeDarkStyle = document.createElement('link');
+            $appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style');
+            $appThemeDarkStyle.rel = 'stylesheet';
+            $appThemeDarkStyle.href = 'theme.dark.css';
+            document.head.appendChild($appThemeDarkStyle);
         } else {
             AppApi.ChangeTheme(0);
         }
-        document.head.appendChild($appThemeStyle);
+        if ($appThemeStyle.href) {
+            document.head.appendChild($appThemeStyle);
+        }
         this.updateVRConfigVars();
         await this.updatetrustColor();
     };
diff --git a/html/src/index.pug b/html/src/index.pug
index 2f670fa1..4a93fb04 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -971,13 +971,13 @@ html
                             .group-header(style="flex:1")
                                 span(v-if="groupDialog.ref.ownerId === API.currentUser.id" style="margin-right:5px") 👑
                                 span.dialog-title(v-text="groupDialog.ref.name" style="margin-right:5px")
-                                span.group-discriminator(style="color:#909399;font-family:monospace;font-size:12px;margin-right:5px") {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
+                                span.group-discriminator.x-grey(style="font-family:monospace;font-size:12px;margin-right:5px") {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                                 el-tooltip(v-for="item in groupDialog.ref.$languages" :key="item.key" placement="top")
                                     template(#content)
                                         span {{ item.value }} ({{ item.key }})
                                     span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
                                 div(style="margin-top:5px")
-                                    span.x-link(v-text="groupDialog.ownerDisplayName" @click="showUserDialog(groupDialog.ref.ownerId)" style="color:#909399;font-family:monospace")
+                                    span.x-link.x-grey(v-text="groupDialog.ownerDisplayName" @click="showUserDialog(groupDialog.ref.ownerId)" style="font-family:monospace")
                                 .group-tags
                                     el-tag(v-if="groupDialog.ref.isVerified" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.group.tags.verified') }}
 
diff --git a/html/src/theme.darkvanilla.scss b/html/src/theme.darkvanilla.scss
index 65960b15..8f5977d5 100644
--- a/html/src/theme.darkvanilla.scss
+++ b/html/src/theme.darkvanilla.scss
@@ -2,632 +2,676 @@
  * VRCX Dark-Vanilla theme by MintLily
  * https://github.com/MintLily/Dark-Vanilla
  */
- @import 'theme.dark.scss';
 
- :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
+: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: 1rem;
+    --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);
+}
diff --git a/html/src/theme.darkvanilla.1.7.scss b/html/src/theme.darkvanillaold.scss
similarity index 100%
rename from html/src/theme.darkvanilla.1.7.scss
rename to html/src/theme.darkvanillaold.scss
diff --git a/html/webpack.config.js b/html/webpack.config.js
index 95aea334..d82c8437 100644
--- a/html/webpack.config.js
+++ b/html/webpack.config.js
@@ -18,7 +18,7 @@ module.exports = {
             dependOn: 'vendor'
         },
         'theme.dark': './src/theme.dark.scss',
-        'theme.darkvanillaold': './src/theme.darkvanilla.1.7.scss',
+        'theme.darkvanillaold': './src/theme.darkvanillaold.scss',
         'theme.darkvanilla': './src/theme.darkvanilla.scss',
         'theme.pink': './src/theme.pink.scss',
         'theme.material3': './src/theme.material3.scss',