feat: extract all css colors into css variables

[ruibaby]

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

/kind feature Fixes #19

TODO:

• [x] 完善文档

example:

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

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

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

[ruibaby]

Hi @AirboZH @liuzhihang @chengzhongxue @Roozenlz,

如果有兴趣可以帮忙看看这样是否方便主题为搜索组件定义配色，有其他建议也欢迎提出。

[Roozenlz]

我已经实现了在主题端调用搜索组件提供的api，为主题定制搜索组件样式的功能https://sunny.kunkunyu.com/

[Roozenlz]

登录界面也定制成功，现在正在尝试为评论组件定制主题样式

[ruibaby]

我已经实现了在主题端调用搜索组件提供的api，为主题定制搜索组件样式的功能sunny.kunkunyu.com

自行实现的话，和这个应该就没啥关系了，这个改动主要考虑到通用。

[Roozenlz]

我已经实现了在主题端调用搜索组件提供的api，为主题定制搜索组件样式的功能sunny.kunkunyu.com

自行实现的话，和这个应该就没啥关系了，这个改动主要考虑到通用。

嗯，这种方式方便主题提供与主题相适应的配色方案，高度自定义还是主题开发者用api实现

[chengzhongxue]

现在有提供怎么改评论样式的？

[ruibaby]

现在有提供怎么改评论样式的？

等这个改完，如果这种方式符合需求，下一步就改评论组件。

[chengzhongxue]

说错了，搜索样式需要提供可以修改

[chengzhongxue]

自己自定义样式

[ruibaby]

自己自定义样式

如果要完全自行编写 css 修改 shadow dom 中的样式似乎不太好实现。还是建议通过 css 变量，如果当前 PR 的变量不够用，以后甚至可以将其他样式类型也设置为 css 变量（比如圆角、宽度等）。

[chengzhongxue]

自己自定义样式

如果要完全自行编写 css 修改 shadow dom 中的样式似乎不太好实现。还是建议通过 css 变量，如果当前 PR 的变量不够用，以后甚至可以将其他样式类型也设置为 css 变量（比如圆角、宽度等）。

这样也可以

[ruibaby]

现在有一个问题：是否要在内部就提供一套暗黑模式的变量，做到开箱即用，但主题如何适配是一个问题。

[JohnNiang]

如果单独搞一个搜索页面是不是就解决了呢？

[ruibaby]

如果单独搞一个搜索页面是不是就解决了呢？

https://github.com/halo-dev/plugin-search-widget/pull/20#issuecomment-1780487027

如上，主要考虑通用，主题开发者不需要进行过多的开发。目前此插件的改动也是为了探索这类需求的解决方案，包括以后评论组件需要进行这样的改动。

[ruibaby]

现在有一个问题：是否要在内部就提供一套暗黑模式的变量，做到开箱即用，但主题如何适配是一个问题。

已添加，请看：https://github.com/halo-dev/plugin-search-widget/pull/20#issue-1962776138

[f2c-ci-robot[bot]]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: JohnNiang

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files: - ~~[OWNERS](https://github.com/halo-dev/plugin-search-widget/blob/main/OWNERS)~~ [JohnNiang] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment