Skip to content

theme-integration.md

Latest commit

 

History

History
165 lines (135 loc) · 10.4 KB

theme-integration.md

File metadata and controls

165 lines (135 loc) · 10.4 KB
Raw

主题适配

接入

接入文档可参考 自定义标签。

自定义样式

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

目前已提供的 CSS 变量：

变量名 描述
--halo-cw-primary-1-color 主要的主题色，用于按钮背景，输入框边框等
--halo-cw-primary-2-color 较浅的主题色
--halo-cw-primary-3-color 最浅的主题色
--halo-cw-text-1-color 主要文本颜色，用于标题、正文等
--halo-cw-text-2-color 次要文本颜色
--halo-cw-text-3-color 辅助文本颜色
--halo-cw-muted-1-color 弱化色，用于边框、分割线、背景等辅助元素
--halo-cw-muted-2-color 更浅的弱化色
--halo-cw-muted-3-color 最浅的弱化色
--halo-cw-base-rounded 基础圆角大小
--halo-cw-avatar-rounded 头像圆角大小
--halo-cw-avatar-size 头像尺寸
--halo-cw-base-font-size 基础字体大小
--halo-cw-base-font-family 基础字体族
点击查看 CSS 代码模板 
:root {
  --halo-cw-primary-1-color: ;
  --halo-cw-primary-2-color: ;
  --halo-cw-primary-3-color: ;

  --halo-cw-text-1-color: ;
  --halo-cw-text-2-color: ;
  --halo-cw-text-3-color: ;

  --halo-cw-muted-1-color: ;
  --halo-cw-muted-2-color: ;
  --halo-cw-muted-3-color: ;

  --halo-cw-base-rounded: ;
  --halo-cw-avatar-rounded: ;
  --halo-cw-avatar-size: ;
  --halo-cw-base-font-size: ;
  --halo-cw-base-font-family: ;
}
3.0.0 版本之前已废弃的 CSS 变量
变量名 描述 备注
--halo-comment-widget-base-color 基础文字颜色 已废弃，后续使用 --halo-cw-text-1-color 代替
--halo-comment-widget-base-info-color 非重要突出文字 已废弃，后续使用 --halo-cw-muted-*-color 代替
--halo-comment-widget-base-border-radius 基础元素的圆角 已废弃，后续使用 --halo-cw-base-rounded 代替
--halo-comment-widget-base-font-size 基础字体大小 已废弃，后续使用 --halo-cw-base-font-size 代替
--halo-comment-widget-base-line-height 基础行高 已废弃
--halo-comment-widget-base-font-family 基础字体族 已废弃，后续使用 --halo-cw-base-font-family 代替
--halo-comment-widget-component-avatar-rounded 头像的圆角大小 已废弃，后续使用 --halo-cw-avatar-rounded 代替
--halo-comment-widget-component-avatar-size 头像大小 已废弃，后续使用 --halo-cw-avatar-size 代替
--halo-comment-widget-component-form-input-bg-color 表单输入背景颜色 已废弃
--halo-comment-widget-component-form-input-color 表单输入文字颜色 已废弃
--halo-comment-widget-component-form-input-border-color 表单输入边框颜色 已废弃
--halo-comment-widget-component-form-input-border-color-focus 表单输入焦点时边框颜色 已废弃，后续使用 --halo-cw-primary-1-color 代替
--halo-comment-widget-component-form-input-box-shadow-focus 表单输入焦点时的阴影 已废弃，后续使用 --halo-cw-primary-2-color 代替
--halo-comment-widget-component-form-button-login-bg-color 登录按钮背景颜色 已废弃
--halo-comment-widget-component-form-button-login-bg-color-hover 登录按钮悬停背景颜色 已废弃
--halo-comment-widget-component-form-button-login-border-color 登录按钮边框颜色 已废弃
--halo-comment-widget-component-form-button-submit-bg-color 提交按钮背景颜色 已废弃，后续使用 --halo-cw-primary-1-color 代替
--halo-comment-widget-component-form-button-submit-color 提交按钮文字颜色 已废弃
--halo-comment-widget-component-form-button-submit-border-color 提交按钮边框颜色 已废弃
--halo-comment-widget-component-form-button-submit-border-color-hover 提交按钮悬停边框颜色 已废弃，后续使用 --halo-cw-primary-3-color 代替
--halo-comment-widget-component-form-button-emoji-color 表情按钮颜色 已废弃
--halo-comment-widget-component-comment-item-action-bg-color-hover 评论项操作悬停背景颜色 已废弃
--halo-comment-widget-component-comment-item-action-color-hover 评论项操作悬停颜色 已废弃
--halo-comment-widget-component-pagination-button-bg-color-hover 分页按钮悬停背景颜色 已废弃
--halo-comment-widget-component-pagination-button-bg-color-active 分页按钮活动状态背景颜色 已废弃
--halo-comment-widget-component-pagination-button-border-color-active 分页按钮活动状态边框颜色 已废弃
--halo-comment-widget-component-emoji-picker-rgb-color 表情选择器颜色 已废弃
--halo-comment-widget-component-emoji-picker-rgb-accent 表情选择器强调颜色 已废弃
--halo-comment-widget-component-emoji-picker-rgb-background 表情选择器背景颜色 已废弃
--halo-comment-widget-component-emoji-picker-rgb-input 表情选择器输入颜色 已废弃
--halo-comment-widget-component-emoji-picker-color-border 表情选择器边框颜色 已废弃
--halo-comment-widget-component-emoji-picker-color-border-over 表情选择器悬停边框颜色 已废弃

配色切换方案

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

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

@media (prefers-color-scheme: dark) {
  .color-scheme-auto,
  [data-color-scheme='auto'] {
    color-scheme: dark;

    --halo-cw-primary-1-color: #059669;
    --halo-cw-primary-2-color: #047857;
    --halo-cw-primary-3-color: #065f46;

    --halo-cw-text-1-color: #f9fafb;
    --halo-cw-text-2-color: #e5e7eb;
    --halo-cw-text-3-color: #9ca3af;

    --halo-cw-muted-1-color: #4b5563;
    --halo-cw-muted-2-color: #374151;
    --halo-cw-muted-3-color: #1f2937;

    --halo-cw-emoji-picker-rgb-color: 222, 222, 221;
    --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;
    --halo-cw-emoji-picker-rgb-background: 21, 22, 23;
    --halo-cw-emoji-picker-rgb-input: 0, 0, 0;
    --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
    --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
  }
}

.color-scheme-dark,
.dark,
[data-color-scheme='dark'] {
  color-scheme: dark;

    --halo-cw-primary-1-color: #059669;
    --halo-cw-primary-2-color: #047857;
    --halo-cw-primary-3-color: #065f46;

    --halo-cw-text-1-color: #f9fafb;
    --halo-cw-text-2-color: #e5e7eb;
    --halo-cw-text-3-color: #9ca3af;

    --halo-cw-muted-1-color: #4b5563;
    --halo-cw-muted-2-color: #374151;
    --halo-cw-muted-3-color: #1f2937;

    --halo-cw-emoji-picker-rgb-color: 222, 222, 221;
    --halo-cw-emoji-picker-rgb-accent: 58, 130, 247;
    --halo-cw-emoji-picker-rgb-background: 21, 22, 23;
    --halo-cw-emoji-picker-rgb-input: 0, 0, 0;
    --halo-cw-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
    --halo-cw-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
}

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

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