🐛 fix #212

detach/src/App.vue

@@ -79,10 +79,11 @@ html, body {
 
 .detach {
   width: 100%;
-  height: 56px;
+  height: 60px;
   display: flex;
   align-items: center;
-  background: #eee;
+  background: var(--color-body-bg);
+  color: var(--color-text-primary);
 }
 
 .detach {
@@ -112,8 +113,8 @@ html, body {
 }
 
 .detach input {
-  background-color: #FFFFFF;
-  color: #333333;
+  background-color: var(--color-body-bg);
+  color: var(--color-text-primary);
   width: 360px;
   height: 36px;
   line-height: 36px;

detach/src/assets/var.less

@@ -0,0 +1,25 @@
+:root {
+  --color-text-primary: rgba(0, 0, 0, 0.85);
+  --color-text-content: #141414;
+  --color-text-desc: rgba(0, 0, 0, 0.45);
+  // 背景色
+  --color-body-bg: #fff;
+  --color-menu-bg: #f3efef;
+  --color-list-hover: #e2e2e2;
+  --color-input-hover: #fff;
+  // 边框
+  --color-border-light: #f0f0f0;
+}
+
+.dark {
+  --color-text-primary: #e8e8f0;
+  --color-text-content: #ccccd8;
+  --color-text-desc: #8f8fa6;
+  // 背景色
+  --color-body-bg: #1c1c28;
+  --color-menu-bg: #1c1c28;
+  --color-list-hover: #33333d;
+  --color-input-hover: #33333d;
+  // 边框
+  --color-border-light: #33333d;
+}

detach/src/main.ts

@@ -1,4 +1,5 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue';
+import App from './App.vue';
+import './assets/var.less';
 
-createApp(App).mount("#app");
+createApp(App).mount('#app');