fix: text color issue (#83)

添加 `--halo-comment-widget-base-color` CSS 变量，修复部分设备浏览器文字颜色问题。 /kind bug ![photo_2024-03-04_22-16-43](https://github.com/halo-dev/plugin-comment-widget/assets/21301288/bc751ca3-1786-4d19-b427-269d9ee86747) ```release-note None ```
halo-dev · Mar 5, 2024 · 6265da5 · 6265da5
1 parent 5bc1867
commit 6265da5
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 
 | 变量名 | 描述 |
 |-------------------------------------------------------------------------|------------------------|
+| `--halo-comment-widget-base-color` | 基础文字颜色 |
 | `--halo-comment-widget-base-border-radius` | 基础元素的圆角 |
 | `--halo-comment-widget-base-font-size` | 基础字体大小 |
 | `--halo-comment-widget-base-line-height` | 基础行高 |
@@ -85,6 +86,8 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 
 ```css
 :root {
+
+ --halo-comment-widget-base-color: ;
  --halo-comment-widget-base-border-radius: ;
  --halo-comment-widget-base-font-size: ;
  --halo-comment-widget-base-line-height: ;
@@ -132,6 +135,8 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
  .color-scheme-auto,
  [data-color-scheme='auto'] {
  color-scheme: dark;
+
+ --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-component-form-input-bg-color: #475569;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;
@@ -166,6 +171,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 [data-color-scheme='dark'] {
  color-scheme: dark;
 
+ --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-component-form-input-bg-color: #475569;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;

diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts
@@ -82,7 +82,7 @@ export class BaseCommentItem extends LitElement {
  }
 
  .item__author {
- color: initial;
+ color: var(--base-color);
  font-weight: 500;
  font-size: 0.875em;
  }
@@ -98,7 +98,7 @@ export class BaseCommentItem extends LitElement {
  }
 
  .item__content pre {
- color: initial;
+ color: var(--base-color);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;

diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
@@ -244,7 +244,7 @@ export class BaseForm extends LitElement {
  }
 
  .form__anonymous-inputs a:hover {
- color: inherit;
+ color: var(--base-color);
  }
 
  input,
@@ -274,11 +274,11 @@ export class BaseForm extends LitElement {
  }
 
  .form__account-info {
+ color: var(--base-color);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
- color: initial;
  }
 
  .form__account-info img {

diff --git a/packages/comment-widget/src/comment-pagination.ts b/packages/comment-widget/src/comment-pagination.ts
@@ -158,8 +158,8 @@ export class CommentPagination extends LitElement {
  .pagination__button button,
  .pagination__number button {
  border-radius: var(--base-border-radius);
+ color: var(--base-color);
  font-size: 0.875em;
- color: initial;
  display: inline-flex;
  align-items: center;
  font-weight: 600;

diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts
@@ -207,10 +207,10 @@ export class CommentWidget extends LitElement {
  }
 
  .comment-widget__stats {
+ color: var(--base-color);
  font-size: 0.875em;
  margin: 0.875em 0;
  font-weight: 500;
- color: initial;
  }
  `,
  ];

diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts
@@ -119,7 +119,7 @@ export class EmojiButton extends LitElement {
  }
 
  .emoji-button:hover {
- color: initial;
+ color: var(--base-color);
  }
 
  .form__emoji-panel {

diff --git a/packages/comment-widget/src/styles/var.ts b/packages/comment-widget/src/styles/var.ts
@@ -3,6 +3,7 @@ import { css } from 'lit';
 const varStyles = css`
  :host {
  /* Base */
+ --base-color: var(--halo-comment-widget-base-color, #333);
  --base-border-radius: var(--halo-comment-widget-base-border-radius, 0.4em);
  --base-font-size: var(--halo-comment-widget-base-font-size, 1rem);
  --base-line-height: var(--halo-comment-widget-base-line-height, 1.25em);

diff --git a/packages/comment-widget/var.css b/packages/comment-widget/var.css
@@ -2,6 +2,8 @@
  .color-scheme-auto,
  [data-color-scheme='auto'] comment-widget {
  color-scheme: dark;
+
+ --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-component-form-input-bg-color: #475569;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;
@@ -36,6 +38,7 @@
 [data-color-scheme='dark'] comment-widget {
  color-scheme: dark;
 
+ --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-component-form-input-bg-color: #475569;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;