Dark theme base

Lexxn0x3 · Aug 13, 2024 · 65e5ef5 · 65e5ef5
1 parent 7528fb8
commit 65e5ef5
Show file tree

Hide file tree

Showing 5 changed files with 695 additions and 641 deletions.
diff --git 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
@@ -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') }}