fix: the dark theme does not work (#714)

LinuxSuRen · web-flow · commit 9e5e463199fe · 2025-06-17T21:52:26.000+08:00
Co-authored-by: rick &lt;LinuxSuRen@users.noreply.github.com&gt;
diff --git a/console/atest-ui/index.html b/console/atest-ui/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
diff --git a/console/atest-ui/package-lock.json b/console/atest-ui/package-lock.json
diff --git a/console/atest-ui/package.json b/console/atest-ui/package.json
@@ -19,14 +19,14 @@
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",
-    "element-plus": "^2.9.6",
+    "element-plus": "^2.10.2",
     "intro.js": "^7.0.1",
     "jsonlint-mod": "^1.7.6",
-    "jsonpath-plus": "^10.0.7",
+    "jsonpath-plus": "^10.3.0",
     "skywalking-client-js": "^0.10.0",
     "vue": "^3.3.4",
     "vue-codemirror": "^5.1.0",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^11.1.2",
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.2.2"
   },
diff --git a/console/atest-ui/src/App.vue b/console/atest-ui/src/App.vue
@@ -147,6 +147,8 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
               </el-dropdown-menu>
             </template>
           </el-dropdown>
+
+          <el-switch type="primary" data-intro="Switch light and dark modes" v-model="asDarkMode"/>
         </el-col>
       </div>
       <TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
diff --git a/console/atest-ui/src/main.ts b/console/atest-ui/src/main.ts
@@ -13,6 +13,7 @@ import en from './locales/en.json'
 import zh from './locales/zh.json'
 import ClientMonitor from 'skywalking-client-js'
 import { name, version } from '../package'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 const app = createApp(App)
 
diff --git a/console/atest-ui/src/theme.ts b/console/atest-ui/src/theme.ts
@@ -1,27 +1,3 @@
-const lightTheme: { [k: string]: string } = {
-  '--color-background': 'var(--vt-c-white)',
-  '--color-background-soft': 'var(--vt-c-white-soft)',
-  '--color-background-mute': 'var(--vt-c-white-mute)',
-  '--color-border': 'var(--vt-c-divider-light-2)',
-  '--color-border-hover': 'var(--vt-c-divider-light-1)',
-  '--color-heading': 'var(--vt-c-text-light-1)',
-  '--color-text': 'var(--vt-c-text-light-1)'
-}
-
-const darkTheme: { [k: string]: string } = {
-  '--color-background': 'var(--vt-c-black)',
-  '--color-background-soft': 'var(--vt-c-black-soft)',
-  '--color-background-mute': 'var(--vt-c-black-mute)',
-  '--color-border': 'var(--vt-c-divider-dark-2)',
-  '--color-border-hover': 'var(--vt-c-divider-dark-1)',
-  '--color-heading': 'var(--vt-c-text-dark-1)',
-  '--color-text': 'var(--vt-c-text-dark-2)'
-}
-
-
 export default function setAsDarkTheme(darkMode: boolean) {
-  const theme = darkMode ? darkTheme : lightTheme
-  Object.keys(theme).forEach((key) => {
-    document.documentElement.style.setProperty(key, theme[key])
-  })
+  document.documentElement.className = darkMode ? 'dark' : 'light'
 }
