[ADDED] button to toggle dark mode (#247)

* [ADDED] button to toggle styles * [REMOVED] media query from base.css
LinuxSuRen · Oct 23, 2023 · d565439 · d565439
1 parent fac641f
commit d565439
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/console/atest-ui/src/App.vue b/console/atest-ui/src/App.vue
@@ -15,8 +15,16 @@ import { DefaultResponseProcess } from './views/net'
 import { useI18n } from 'vue-i18n'
 import ClientMonitor from 'skywalking-client-js';
 
+import setTheme from './theme'
+
 const { t } = useI18n()
 
+
+function switchAppMode()
+{
+  setTheme(appMode.value)
+}
+
 interface Tree {
   id: string
   label: string
@@ -116,6 +124,7 @@ interface Store {
 }
 
 const stores = ref([] as Store[])
+const appMode = ref(false)
 function loadStores() {
   const requestOptions = {
     method: 'POST',
@@ -298,6 +307,10 @@ watch(viewName, (val) => {
       <el-header style="height: 30px;justify-content: flex-end;">
         <el-button type="primary" :icon="Edit" @click="viewName = 'secret'" data-intro="Manage the secrets."/>
         <el-button type="primary" :icon="Share" @click="viewName = 'store'" data-intro="Manage the store backends." />
+        <el-form-item label="Dark Mode" style="margin-left:20px;">
+    <el-switch type="primary" data-intro="Switch light and dark modes" v-model="appMode" @click="switchAppMode"/>
+  </el-form-item>
+
       </el-header>
 
       <el-main>
@@ -460,6 +473,7 @@ nav {
   margin-top: 2rem;
 }
 
+
 nav a.router-link-exact-active {
   color: var(--color-text);
 }

diff --git a/console/atest-ui/src/assets/base.css b/console/atest-ui/src/assets/base.css
@@ -36,20 +36,6 @@
   --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --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);
-  }
-}
-
 *,
 *::before,
 *::after {

diff --git a/console/atest-ui/src/theme.ts b/console/atest-ui/src/theme.ts
@@ -0,0 +1,27 @@
+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 setTheme(darkMode: boolean) {
+  const theme = darkMode ? darkTheme : lightTheme
+  Object.keys(theme).forEach((key) => {
+    document.documentElement.style.setProperty(key, theme[key])
+  })
+}