From fe301f9bcd6070410457384012c22b29144e0299 Mon Sep 17 00:00:00 2001
From: Xwite <1797350009@qq.com>
Date: Wed, 2 Oct 2024 21:37:12 +0800
Subject: [PATCH] feat(modules/web): souceEdito theme respect system darkmode

---
 modules/web/package.json                      |  1 +
 modules/web/src/assets/code.css               | 11 ++++----
 modules/web/src/assets/kbd.css                | 16 ++++++------
 .../src/assets/{main.css => sourceeditor.css} | 25 +++++++++----------
 modules/web/src/main.js                       |  2 +-
 modules/web/src/pages/bookshelf/main.js       | 15 ++++++++++-
 modules/web/src/pages/source/main.js          |  2 +-
 modules/web/src/views/SourceEditor.vue        |  5 +++-
 8 files changed, 48 insertions(+), 29 deletions(-)
 rename modules/web/src/assets/{main.css => sourceeditor.css} (84%)

diff --git a/modules/web/package.json b/modules/web/package.json
index fdc1ad402..694b6597b 100644
--- a/modules/web/package.json
+++ b/modules/web/package.json
@@ -17,6 +17,7 @@
     "@element-plus/icons-svg": "^2.3.1",
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/shared": "^10.11.1",
+    "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",
     "element-plus": "^2.8.4",
     "hotkeys-js": "^3.13.7",
diff --git a/modules/web/src/assets/code.css b/modules/web/src/assets/code.css
index 2592c380d..ee6e1666d 100644
--- a/modules/web/src/assets/code.css
+++ b/modules/web/src/assets/code.css
@@ -1,6 +1,7 @@
-code {
-  background-color: #f2f1f1;
-  padding: .125rem .25rem;
-  border-radius: 0.25rem;
-  font-size: 0.835rem;
+code {
+  border-radius: 4px;
+  padding: .15rem .5rem;
+  background-color: var(--el-fill-color-light);
+  transition: color .25s, background-color .5s;
+  font-size: 14px;
 }
\ No newline at end of file
diff --git a/modules/web/src/assets/kbd.css b/modules/web/src/assets/kbd.css
index c667c07b8..8457c9a86 100644
--- a/modules/web/src/assets/kbd.css
+++ b/modules/web/src/assets/kbd.css
@@ -1,7 +1,9 @@
-kbd {
-  background-color: hsl(0deg, 0%, 99%);
-  border-radius: 3px;
-  border: 1px solid hsl(0deg, 0%, 80%);
-  padding: 4px 5px;
-  font-weight: bold;
-}
+kbd {
+  align-items: center;
+  background: rgba(125, 125, 125, .1);
+  border-radius: 3px;
+  border: 0;
+  padding: 4px 5px;
+  font-weight: bold;
+  box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, .4);
+}
diff --git a/modules/web/src/assets/main.css b/modules/web/src/assets/sourceeditor.css
similarity index 84%
rename from modules/web/src/assets/main.css
rename to modules/web/src/assets/sourceeditor.css
index 26ba33789..1043fffc3 100644
--- a/modules/web/src/assets/main.css
+++ b/modules/web/src/assets/sourceeditor.css
@@ -1,14 +1,13 @@
-@import './kbd.css';
-@import './code.css';
-
-body {
-    padding: 0;
-    margin: 0;
-}
-
-.el-tabs__header {
-    position: sticky;
-    top: 0px;
-    z-index: 2;
-    background-color: white;
+@import './kbd.css';
+@import './code.css';
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+.el-tabs__header {
+    position: sticky;
+    top: 0px;
+    z-index: 2;
 }
\ No newline at end of file
diff --git a/modules/web/src/main.js b/modules/web/src/main.js
index 68b4ccfda..a4b0cd757 100644
--- a/modules/web/src/main.js
+++ b/modules/web/src/main.js
@@ -6,7 +6,7 @@ import "element-plus/theme-chalk/dark/css-vars.css"
 
 createApp(App).use(store).use(router).mount("#app");
 
-// 同步Element PLUS 夜间模式
+// 书架 同步Element PLUS 夜间模式
 watch(
     () => useBookStore().isNight,
     (isNight) => {
diff --git a/modules/web/src/pages/bookshelf/main.js b/modules/web/src/pages/bookshelf/main.js
index ed7e2dfae..535701aa9 100644
--- a/modules/web/src/pages/bookshelf/main.js
+++ b/modules/web/src/pages/bookshelf/main.js
@@ -1,6 +1,19 @@
 import { createApp } from "vue";
 import App from "@/App.vue";
-import bookRouter from "@/router";
+import bookRouter from "@/router/bookRouter";
 import store from "@/store";
+import "element-plus/theme-chalk/dark/css-vars.css";
 
 createApp(App).use(store).use(bookRouter).mount("#app");
+
+// 同步Element PLUS 夜间模式
+watch(
+    () => useBookStore().isNight,
+    (isNight) => {
+        if (isNight) {
+            document.documentElement.classList.add("dark");
+        } else {
+            document.documentElement.classList.remove("dark");
+        }
+    }
+)
\ No newline at end of file
diff --git a/modules/web/src/pages/source/main.js b/modules/web/src/pages/source/main.js
index a13379be0..a45eed70c 100644
--- a/modules/web/src/pages/source/main.js
+++ b/modules/web/src/pages/source/main.js
@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import App from "@/App.vue";
-import sourceRouter from "@/router";
+import sourceRouter from "@/router/sourceRouter";
 import store from "@/store";
 
 createApp(App).use(store).use(sourceRouter).mount("#app");
diff --git a/modules/web/src/views/SourceEditor.vue b/modules/web/src/views/SourceEditor.vue
index 44ce83b2a..0e617fea4 100644
--- a/modules/web/src/views/SourceEditor.vue
+++ b/modules/web/src/views/SourceEditor.vue
@@ -8,7 +8,10 @@
 <script setup>
 import bookSourceConfig from "@/config/bookSourceEditConfig";
 import rssSourceConfig from "@/config/rssSourceEditConfig";
-import "@/assets/main.css";
+import "@/assets/sourceeditor.css"
+import { useDark } from "@vueuse/core";
+
+useDark();
 
 let config;