feat(modules/web): souceEdito theme respect system darkmode

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",

modules/web/src/assets/code.css

@@ -1,6 +1,7 @@
-code {
+code {
-  background-color: #f2f1f1;
+  border-radius: 4px;
-  padding: .125rem .25rem;
+  padding: .15rem .5rem;
-  border-radius: 0.25rem;
+  background-color: var(--el-fill-color-light);
-  font-size: 0.835rem;
+  transition: color .25s, background-color .5s;
+  font-size: 14px;
 }

modules/web/src/assets/kbd.css

@@ -1,7 +1,9 @@
-kbd {
+kbd {
-  background-color: hsl(0deg, 0%, 99%);
+  align-items: center;
-  border-radius: 3px;
+  background: rgba(125, 125, 125, .1);
-  border: 1px solid hsl(0deg, 0%, 80%);
+  border-radius: 3px;
-  padding: 4px 5px;
+  border: 0;
-  font-weight: bold;
+  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);
+}

modules/web/src/assets/sourceeditor.css

@@ -1,14 +1,13 @@
-@import './kbd.css';
+@import './kbd.css';
-@import './code.css';
+@import './code.css';
-
+
-body {
+body {
-    padding: 0;
+    padding: 0;
-    margin: 0;
+    margin: 0;
-}
+}
-
+
-.el-tabs__header {
+.el-tabs__header {
-    position: sticky;
+    position: sticky;
-    top: 0px;
+    top: 0px;
-    z-index: 2;
+    z-index: 2;
-    background-color: white;
 }

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) => {

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");
+        }
+    }
+)

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");

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;