feat: extract all css colors into css variables (#20)

将所有组件内使用的 css 颜色提取为 css 变量，方便在外部（比如主题）自定义配色，也可用于适配 dark mode。

/kind feature
Fixes #19 

TODO:

- [x] 完善文档

example:

<img width="759" alt="图片" src="https://github.com/halo-dev/plugin-search-widget/assets/21301288/16b55768-f4c7-4613-875e-33e6da74aae3">

<img width="695" alt="图片" src="https://github.com/halo-dev/plugin-search-widget/assets/21301288/9c71fb1a-a742-40c2-9f75-f4f568a729fa">

在外部定义 css 的方式如下：

```html
<style>
  @media (prefers-color-scheme: dark) {
    :root {
      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);
    }
  }
</style>
```

此外，此 PR 也附带了一套暗黑模式的 css 变量，使用方式：

1. 在 html 或者 body 添加 class：`color-scheme-dark / dark / color-scheme-auto`
2. 在 html  或者 body 添加 data：`data-theme="dark / auto"`

```release-note
提供 CSS 变量，用于在外部自定义配色。
```

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