feat: 优化颜色主题(#15)

docs/core/index.md

@@ -76,8 +76,3 @@ decodeRule("eso://") // 可以解码 eso 书源, 得到原始 json
 | `\|\|`     |    ❌    |                                  |                                         |
 
 规则可以省略开头的,**@css**、**@xpath**、**@json**, 因为解析器会尝试自动识别。
-
-## 开发和调试
-
-1. 修改 `src\start.ts` 文件, 把 `rule` 变量修改为真实的书源
-2. vscode 打开调试终端, 输入 `npm run start`

docs/index.md

@@ -10,6 +10,8 @@ outline: deep
 
 ## 参与开发
 
+### VSCode
+
 ```sh
 # 克隆项目
 git clone git@github.com:aooiuu/any-reader.git
@@ -20,14 +22,31 @@ cd any-reader
 # 安装依赖
 pnpm i
 
-# 编译 core
-pnpm run build:core
-# 实时编译 web 模板 到 vscode
-pnpm run build:web-w
+# 编译 解析库、工具库、前端模板
+pnpm run build
 ```
 
-如果需要调试 `VSCode` 插件, 用 `VSCode` 打开 `/packages/vscode` 目录, `F5` 即可运行调试插件!
-如果需要调试 `Core` , 参考 [开发和调试](/core/#开发和调试)
+用 `VSCode` 打开 `/packages/vscode` 目录, `F5` 即可运行调试插件!
+
+### Core
+
+
+调试：
+
+1. 修改 `src\start.ts` 文件, 把 `rule` 变量修改为真实的书源
+2. 进入目录 `cd packages\core`
+3. vscode 打开调试终端, 输入 `pnpm run start`
+
+
+### 前端模板
+
+```sh
+# 进入目录
+cd packages\web
+
+# 实时编译到 VSCode 目录
+pnpm run build:w
+```
 
 ### 源码目录结构
 

packages/vscode/package.json

@@ -3,7 +3,7 @@
   "displayName": "any-reader",
   "description": "自定义规则多站点聚合搜索阅读小说、漫画。包含JS规则解析库和VSCode插件。支持本地小说 TXT、EPUB",
   "icon": "resources/icon.png",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "preview": true,
   "publisher": "aooiu",
   "qna": "https://github.com/aooiuu/any-reader/issues",

packages/web/src/assets/main.scss

@@ -0,0 +1,42 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  --textLink-foreground: var(--vscode-textLink-foreground);
+  --sideBar-background: var(--vscode-sideBar-background);
+}
+
+// 让 arco-design 色彩适应 VSCode 主题
+// VSCode Theme Color: https://code.visualstudio.com/api/references/theme-color
+#app {
+  --color-bg-1: var(--vscode-editor-background);
+  --color-bg-2: var(--vscode-editor-background);
+  --color-bg-3: var(--vscode-editor-background);
+
+  --color-text-1: var(--vscode-editor-foreground);
+  --color-text-2: var(--vscode-editor-foreground);
+  --color-text-3: var(--vscode-editor-foreground);
+
+  .arco-table-td {
+    color: var(--color-text-2);
+  }
+
+  .arco-switch {
+    background-color: var(--vscode-disabledForeground);
+  }
+
+  .arco-switch-checked {
+    // background-color: var(--vscode-button-background);
+    background-color: rgb(var(--primary-6));
+  }
+
+  .arco-input-wrapper {
+    border-color: var(--vscode-button-background);
+  }
+}

packages/web/src/main.ts

@@ -5,7 +5,7 @@ import router from './router';
 import '@unocss/reset/sanitize/sanitize.css';
 import '@unocss/reset/sanitize/assets.css';
 import 'uno.css';
-import './assets/main.css';
+import './assets/main.scss';
 
 import ArcoVue from '@arco-design/web-vue';
 import Icon from '@arco-design/web-vue/es/icon';

packages/web/src/pages/discover/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="px-10 py-10 h-full flex overflow-hidden">
-    <div class="flex flex-col h-full w-120 overflow-hidden">
+    <div class="flex flex-col h-full w-120 overflow-hidden bg-[--sideBar-background]">
       <a-select v-model="contentType" class="mb-10">
         <a-option v-for="o in CONTENT_TYPES" :key="o.value" :value="o.value">{{ o.label }}</a-option>
       </a-select>
       <div class="flex-1 overflow-auto">
         <div
           v-for="r in ruleListDisplay"
           :key="r.id"
-          :class="['h-40 lh-40 mb-2 px-12 cursor-pointer hover:op-70', ruleId === r.id ? 'bg-[#ffffff0a]' : '']"
+          :class="['h-40 lh-40 mb-2 px-12 cursor-pointer hover:op-70', ruleId === r.id ? 'color-[--textLink-foreground]' : '']"
           @click="changeRule(r)"
         >
           {{ r.name }}