联系表单
菜单
本页目录

自定义样式

主题层面自定义

主题开发者可以为此插件主动提供样式适配，虽然目前不能直接为表单编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让表单和主题更好地融合。

CSS 变量

目前已提供的 CSS 变量：

变量名描述
--halo-contact-form-font-family定义表单字体系列。
--halo-contact-form-font-size定义表单字体大小。
--halo-contact-form-line-height定义表单行高。
--halo-contact-form-border-radius边框圆角。
--halo-contact-form-width-submit提交按钮宽度。
--halo-contact-form-color-primary主要颜色。
--halo-contact-form-color-label标签颜色。
--halo-contact-form-color-input输入框颜色。
--halo-contact-form-color-input-selection输入框选中时的背景色。
--halo-contact-form-color-border边框颜色。
--halo-contact-form-color-danger危险或错误提示颜色。
--halo-contact-form-color-help帮助文本颜色。
--halo-contact-form-color-button按钮颜色。
--halo-contact-form-color-button-hover按钮悬停颜色。
--halo-contact-form-focus-ring-color焦点环颜色。
--halo-contact-form-error-ring-color错误环颜色。
--halo-contact-form-error-ring-focus-color焦点时的错误环颜色。
--halo-contact-form-bg-input输入框背景色。
--halo-contact-form-bg-decorator装饰器背景色。
--halo-contact-form-auto-color-modal-bg自动模式下的模态框背景色。
点击查看 CSS 代码模板 
:root {
  --halo-contact-form-font-family: ;
  --halo-contact-form-font-size: ;
  --halo-contact-form-line-height: ;
  --halo-contact-form-border-radius: ;
  --halo-contact-form-width-submit: ;
  --halo-contact-form-color-primary: ;
  --halo-contact-form-color-label: ;
  --halo-contact-form-color-input: ;
  --halo-contact-form-color-input-selection: ;
  --halo-contact-form-color-border: ;
  --halo-contact-form-color-danger: ;
  --halo-contact-form-color-help: ;
  --halo-contact-form-color-button: ;
  --halo-contact-form-color-button-hover: ;
  --halo-contact-form-focus-ring-color: ;
  --halo-contact-form-error-ring-color: ;
  --halo-contact-form-error-ring-focus-color: ;
  --halo-contact-form-bg-input: ;
  --halo-contact-form-bg-decorator: ;
  --halo-contact-form-auto-color-modal-bg: ;
}

配色切换方案

根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为评论组件提供动态切换配色的功能。

以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。

@media (prefers-color-scheme: dark) {
  .color-scheme-auto halo-contact-form,
  [data-color-scheme="auto"] halo-contact-form {
    color-scheme: dark;

    --halo-contact-form-color-primary: #006ff9;
    --halo-contact-form-color-label: #f2f2f2;
    --halo-contact-form-color-input: #f2f2f2;
    --halo-contact-form-color-input-selection: rgba(0, 122, 255, 25%);
    --halo-contact-form-color-border: #495056;
    --halo-contact-form-color-danger: #ea0000;
    --halo-contact-form-color-help: rgba(0 0 0 / 60%);
    --halo-contact-form-color-button: #fff;
    --halo-contact-form-color-button-hover: #f2f2f2;
    --halo-contact-form-focus-ring-color: rgb(50 100 203 / 31%);
    --halo-contact-form-error-ring-color: rgb(235 0 0 / 60%);
    --halo-contact-form-error-ring-focus-color: rgb(235 0 0 / 30%);
    --halo-contact-form-bg-input: transparent;
    --halo-contact-form-bg-decorator: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.07),
      transparent
    );

    --halo-contact-form-auto-color-modal-bg: #1e293b;
  }
}

.color-scheme-dark halo-contact-form,
.dark halo-contact-form,
[data-color-scheme="dark"] halo-contact-form {
  color-scheme: dark;

  --halo-contact-form-color-primary: #006ff9;
  --halo-contact-form-color-label: #f2f2f2;
  --halo-contact-form-color-input: #f2f2f2;
  --halo-contact-form-color-input-selection: rgba(0, 122, 255, 25%);
  --halo-contact-form-color-border: #495056;
  --halo-contact-form-color-danger: #ea0000;
  --halo-contact-form-color-help: rgba(0 0 0 / 60%);
  --halo-contact-form-color-button: #fff;
  --halo-contact-form-color-button-hover: #f2f2f2;
  --halo-contact-form-focus-ring-color: rgb(50 100 203 / 31%);
  --halo-contact-form-error-ring-color: rgb(235 0 0 / 60%);
  --halo-contact-form-error-ring-focus-color: rgb(235 0 0 / 30%);
  --halo-contact-form-bg-input: transparent;
  --halo-contact-form-bg-decorator: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.07),
    transparent
  );

  --halo-contact-form-auto-color-modal-bg: #1e293b;
}

此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：

  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：强制明亮模式。

使用者自定义

可以结合上面的 CSS 变量和 Halo 的代码注入功能自行修改表单的部分样式。

  1. 进入 Console 的设置 -> 代码注入 -> 全局 head 标签。

  2. 添加以下代码：

    <style>
:root {
   // 将提交按钮的宽度设置为 100%
   --halo-contact-form-width-submit: 100%;
}
</style>

    这只是个示例，你可以自行决定添加哪些 CSS 变量。

上一篇 开发