feat: extract all css colors into css variables

README.md

@@ -48,6 +48,8 @@ halo:
 
 ## 主题适配
 
+### 调用搜索弹框
+
 此插件是一个通用的搜索框插件，主题需要做的只是通过 JS API 唤起搜索框即可，以下是代码示例：
 
 ```html
@@ -59,3 +61,96 @@ halo:
 ```
 
 其中，`pluginFinder.available('PluginSearchWidget')` 的作用是判断使用者是否安装和启用了此插件，如果没有安装或者没有启用，那么就不会显示搜索入口。
+
+### 适配配色
+
+目前，此插件为了让主题更好的适配颜色，对外暴露了以下 CSS 变量：
+
+```css
+--halo-search-widget-color-modal-layer: ;             /* 搜索弹框遮罩层颜色 */
+--halo-search-widget-color-modal-content-bg: ;        /* 搜索弹框内容区域背景色 */
+--halo-search-widget-color-form-input: ;              /* 搜索框输入框字体颜色 */
+--halo-search-widget-color-form-input-placeholder: ;  /* 搜索框输入框占位符颜色 */
+--halo-search-widget-color-form-input-bg: ;           /* 搜索框输入框背景色 */
+--halo-search-widget-color-form-divider: ;            /* 搜索框分割线颜色 */
+--halo-search-widget-color-result-item-bg: ;          /* 搜索结果项背景色 */
+--halo-search-widget-color-result-item-hover-bg: ;    /* 搜索结果项鼠标悬浮背景色 */
+--halo-search-widget-color-result-item-title: ;       /* 搜索结果项标题颜色 */
+--halo-search-widget-color-result-item-content: ;     /* 搜索结果项内容颜色 */
+--halo-search-widget-color-command-kbd-item: ;        /* 搜索结果项快捷键提示字体颜色 */
+--halo-search-widget-color-command-kbd-border: ;      /* 搜索结果项快捷键提示边框颜色 */
+--halo-search-widget-color-result-empty: ;            /* 搜索结果为空时的颜色 */
+```
+
+主题可以利用这些 CSS 变量来适配主题的配色，或者用于适配暗黑模式。
+
+适配主题配色示例：
+
+```css
+:root {
+  --halo-search-widget-color-modal-layer: rgb(107 114 128 / 0.75);
+  --halo-search-widget-color-modal-content-bg: #fff;
+  --halo-search-widget-color-form-input: #000;
+  --halo-search-widget-color-form-input-placeholder: #999;
+  --halo-search-widget-color-form-input-bg: #fff;
+  --halo-search-widget-color-form-divider: #eaeaea;
+  --halo-search-widget-color-result-item-bg: #fff;
+  --halo-search-widget-color-result-item-hover-bg: #f5f5f5;
+  --halo-search-widget-color-result-item-title: #000;
+  --halo-search-widget-color-result-item-content: #999;
+  --halo-search-widget-color-command-kbd-item: #fff;
+  --halo-search-widget-color-command-kbd-border: #fff;
+  --halo-search-widget-color-result-empty: #999;
+}
+```
+
+适配暗黑模式切换示例：
+
+```css
+@media (prefers-color-scheme: dark) {
+  .color-scheme-auto {
+    color-scheme: dark;
+    --halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
+    --halo-search-widget-color-modal-content-bg: rgb(15 23 42);
+    --halo-search-widget-color-form-input: rgb(255, 255, 255);
+    --halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
+    --halo-search-widget-color-form-input-bg: rgb(15 23 42);
+    --halo-search-widget-color-form-divider: rgb(30 41 59);
+    --halo-search-widget-color-result-item-bg: rgb(30 41 59);
+    --halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
+    --halo-search-widget-color-result-item-title: rgb(255 255 255);
+    --halo-search-widget-color-result-item-content: rgb(148 163 184);
+    --halo-search-widget-color-command-kbd-item: rgb(148 163 184);
+    --halo-search-widget-color-command-kbd-border: rgb(30 41 59);
+    --halo-search-widget-color-result-empty: rgb(148 163 184);
+  }
+}
+
+.color-scheme-dark {
+  color-scheme: dark;
+  --halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
+  --halo-search-widget-color-modal-content-bg: rgb(15 23 42);
+  --halo-search-widget-color-form-input: rgb(255, 255, 255);
+  --halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
+  --halo-search-widget-color-form-input-bg: rgb(15 23 42);
+  --halo-search-widget-color-form-divider: rgb(30 41 59);
+  --halo-search-widget-color-result-item-bg: rgb(30 41 59);
+  --halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
+  --halo-search-widget-color-result-item-title: rgb(255 255 255);
+  --halo-search-widget-color-result-item-content: rgb(148 163 184);
+  --halo-search-widget-color-command-kbd-item: rgb(148 163 184);
+  --halo-search-widget-color-command-kbd-border: rgb(30 41 59);
+  --halo-search-widget-color-result-empty: rgb(148 163 184);
+}
+```
+
+此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：
+
+1. 在 html 或者 body 标签添加 class：
+   1. `color-scheme-auto`：自动模式，根据系统的暗黑模式自动切换。
+   2. `color-scheme-dark` / `dark`：强制暗黑模式。
+   3. `color-scheme-light` / `light`：强制明亮模式。
+2. 在 html 或者 body 标签添加 `data-color-scheme` 属性：
+   1. `auto`：自动模式，根据系统的暗黑模式自动切换。
+   2. `dark`：强制暗黑模式。
+   3. `light`：强制明亮模式。

packages/example/index.html

@@ -1,16 +1,20 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-scheme="auto">
+  <!--
+  color-scheme-dark / dark
+  color-scheme-light / light
+  color-scheme-auto
+
+  data-color-scheme="dark"
+  data-color-scheme="light"
+  data-color-scheme="auto"
+  -->
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Lit + TS</title>
     <script type="module" src="/src/main.ts"></script>
-    <style>
-      :root {
-        --halo-bg: #000;
-      }
-    </style>
   </head>
   <body>
     <search-modal baseUrl="https://ryanc.cc"></search-modal>

packages/search-widget/package.json

@@ -6,13 +6,15 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./var.css": "./var.css"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "var.css"
   ],
   "scripts": {
     "dev": "tsc -w",

packages/search-widget/src/search-form.ts

@@ -154,6 +154,50 @@ export class SearchForm extends LitElement {
   static override styles = [
     resetStyles,
     css`
+      :host {
+        --color-form-input-bg: var(
+          --halo-search-widget-color-form-input-bg,
+          #fff
+        );
+        --color-form-input: var(--halo-search-widget-color-form-input, #333);
+        --color-form-input-placeholder: var(
+          --halo-search-widget-color-form-input-placeholder,
+          rgb(107 114 128)
+        );
+        --color-form-divider: var(
+          --halo-search-widget-color-form-divider,
+          rgb(243 244 246)
+        );
+        --color-result-empty: var(
+          --halo-search-widget-color-result-empty,
+          rgb(107 114 128)
+        );
+        --color-result-item-bg: var(
+          --halo-search-widget-color-result-item-bg,
+          rgb(249 250 251)
+        );
+        --color-result-item-hover-bg: var(
+          --halo-search-widget-color-result-item-hover-bg,
+          rgb(243 244 246)
+        );
+        --color-result-item-title: var(
+          --halo-search-widget-color-result-item-title,
+          #333
+        );
+        --color-result-item-content: var(
+          --halo-search-widget-color-result-item-content,
+          rgb(75, 85, 99)
+        );
+        --color-command-kbd-item: var(
+          --halo-search-widget-color-command-kbd-item,
+          #333
+        );
+        --color-command-kbd-border: var(
+          --halo-search-widget-color-command-kbd-border,
+          #e5e7eb
+        );
+      }
+
       :host * {
         box-sizing: border-box;
         border-width: 0;
@@ -169,11 +213,11 @@ export class SearchForm extends LitElement {
 
       .search-form__input {
         border-bottom-width: 1px;
-        border-color: rgb(243 244 246);
+        border-color: var(--color-form-divider);
         padding: 0.625rem 1rem;
         position: sticky;
         top: 0;
-        background-color: #fff;
+        background-color: var(--color-form-input-bg);
       }
 
       .search-form__input input {
@@ -184,6 +228,12 @@ export class SearchForm extends LitElement {
         border: none;
         font-size: 1rem;
         line-height: 1.5rem;
+        background-color: var(--color-form-input-bg);
+        color: var(--color-form-input);
+      }
+
+      .search-form__input input::placeholder {
+        color: var(--color-form-input-placeholder);
       }
 
       .search-form__result {
@@ -197,7 +247,7 @@ export class SearchForm extends LitElement {
         justify-content: center;
         font-size: 0.875rem;
         line-height: 1.25rem;
-        color: rgb(107 114 128);
+        color: var(--color-result-empty);
       }
 
       .search-form__result-wrapper {
@@ -221,13 +271,13 @@ export class SearchForm extends LitElement {
         flex-direction: column;
         gap: 0.25rem;
         border-radius: 0.375rem;
-        background-color: rgb(249 250 251);
+        background-color: var(--color-result-item-bg);
         padding: 0.5rem 0.625rem;
       }
 
       .search-form__result-item:hover,
       .search-form__result-item.selected {
-        background-color: rgb(243 244 246);
+        background-color: var(--color-result-item-hover-bg);
       }
 
       .search-form__result-item-title {
@@ -236,19 +286,20 @@ export class SearchForm extends LitElement {
         font-weight: 600;
         padding: 0;
         margin: 0;
+        color: var(--color-result-item-title);
       }
 
       .search-form__result-item-content {
         font-size: 0.75rem;
         line-height: 1rem;
-        color: rgb(75 85 99);
+        color: var(--color-result-item-content);
         padding: 0;
         margin: 0;
       }
 
       .search-form__commands {
         border-top-width: 1px;
-        border-color: rgb(243 244 246);
+        border-color: var(--color-form-divider);
         padding: 0.625rem 1rem;
         display: flex;
         justify-content: flex-end;
@@ -263,16 +314,17 @@ export class SearchForm extends LitElement {
       .search-form__commands-item span {
         font-size: 0.75rem;
         line-height: 1rem;
-        color: rgb(75 85 99);
+        color: var(--color-command-kbd-item);
       }
 
       .search-form__commands-item kbd {
-        color: rgb(75 85 99);
+        color: var(--color-command-kbd-item);
         font-size: 10px;
         text-align: center;
         padding: 0.125rem 0.3rem;
         border-width: 1px;
         border-radius: 0.25rem;
+        border-color: var(--color-command-kbd-border);
         min-width: 1.25rem;
         margin-left: 0.3rem;
         box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);

packages/search-widget/src/search-modal.ts

@@ -51,6 +51,17 @@ export class SearchModal extends LitElement {
   }
 
   static override styles = css`
+    :host {
+      --color-modal-layer: var(
+        --halo-search-widget-color-modal-layer,
+        rgb(107 114 128 / 0.75)
+      );
+      --color-modal-content-bg: var(
+        --halo-search-widget-color-modal-content-bg,
+        #fff
+      );
+    }
+
     .modal__wrapper {
       position: fixed;
       left: 0px;
@@ -73,7 +84,7 @@ export class SearchModal extends LitElement {
       height: 100%;
       width: 100%;
       flex: none;
-      background-color: rgb(107 114 128 / 0.75);
+      background-color: var(--color-modal-layer);
       animation: fadeIn 0.15s both;
     }
 
@@ -83,7 +94,7 @@ export class SearchModal extends LitElement {
       flex-direction: column;
       align-items: stretch;
       border-radius: 5px;
-      background-color: #fff;
+      background-color: var(--color-modal-content-bg);
       width: calc(100vw - 20px);
       max-height: calc(100vh - 5rem);
       max-width: 650px;

packages/search-widget/var.css

@@ -0,0 +1,38 @@
+@media (prefers-color-scheme: dark) {
+  .color-scheme-auto,
+  [data-color-scheme='auto'] {
+    color-scheme: dark;
+    --halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
+    --halo-search-widget-color-modal-content-bg: rgb(15 23 42);
+    --halo-search-widget-color-form-input: rgb(255, 255, 255);
+    --halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
+    --halo-search-widget-color-form-input-bg: rgb(15 23 42);
+    --halo-search-widget-color-form-divider: rgb(30 41 59);
+    --halo-search-widget-color-result-item-bg: rgb(30 41 59);
+    --halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
+    --halo-search-widget-color-result-item-title: rgb(255 255 255);
+    --halo-search-widget-color-result-item-content: rgb(148 163 184);
+    --halo-search-widget-color-command-kbd-item: rgb(148 163 184);
+    --halo-search-widget-color-command-kbd-border: rgb(30 41 59);
+    --halo-search-widget-color-result-empty: rgb(148 163 184);
+  }
+}
+
+.color-scheme-dark,
+.dark,
+[data-color-scheme='dark'] {
+  color-scheme: dark;
+  --halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
+  --halo-search-widget-color-modal-content-bg: rgb(15 23 42);
+  --halo-search-widget-color-form-input: rgb(255, 255, 255);
+  --halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
+  --halo-search-widget-color-form-input-bg: rgb(15 23 42);
+  --halo-search-widget-color-form-divider: rgb(30 41 59);
+  --halo-search-widget-color-result-item-bg: rgb(30 41 59);
+  --halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
+  --halo-search-widget-color-result-item-title: rgb(255 255 255);
+  --halo-search-widget-color-result-item-content: rgb(148 163 184);
+  --halo-search-widget-color-command-kbd-item: rgb(148 163 184);
+  --halo-search-widget-color-command-kbd-border: rgb(30 41 59);
+  --halo-search-widget-color-result-empty: rgb(148 163 184);
+}