【问题】：waline暗黑模式下评论内容看不清楚

BeaCox commented 2 years ago

检查清单

[ ] 已经搜索过，没有发现类似 issue。
[X] 已经搜索过主题文档，没有发现相关内容。
[X] 已经尝试使用过最新版，问题依旧存在。

主题版本

5.0.1

复现地址

https://bowenyoung.cn/2022/05/18/githubBeautify/

问题描述

在配置文件中waline的dark设置为auto，网页打开暗黑模式后waline评论区内容字迹颜色和背景颜色相近，导致看不清楚。查找issues发现有类似问题#633 ，但是由于版本更新，所提供的需要修改的文件内容与当前版本的文件（source/css/_defines/func.styl）有较大差异，不知道如何解决，特来请教！

配置文件

站点配置文件

```yml 无 ```

主题配置文件

```yml waline: ... dark: auto ... ```

环境信息

node.js & npm

``` v16.14.2 8.5.0 ```

package.json

``` ├── bindings@1.5.0 extraneous ├── bulma-stylus@0.8.0 ├── file-uri-to-path@1.0.0 extraneous ├── hexo-abbrlink@2.2.1 ├── hexo-admin@2.3.0 ├── hexo-component-inferno@1.1.0 ├── hexo-deployer-git@3.0.0 ├── hexo-filter-github-emojis@3.0.5 ├── hexo-generator-archive@1.0.0 ├── hexo-generator-baidu-sitemap@0.1.9 ├── hexo-generator-category@1.0.0 ├── hexo-generator-feed@3.0.0 ├── hexo-generator-index@2.0.0 ├── hexo-generator-json-content@4.2.3 ├── hexo-generator-searchdb@1.4.0 ├── hexo-generator-sitemap@3.0.1 ├── hexo-generator-tag@1.0.0 ├── hexo-pagination@2.0.0 ├── hexo-related-popular-posts@5.0.1 ├── hexo-renderer-ejs@2.0.0 ├── hexo-renderer-inferno@0.1.3 ├── hexo-renderer-marked@5.0.0 ├── hexo-renderer-stylus@2.0.1 ├── hexo-server@3.0.0 ├── hexo-theme-icarus@5.0.0-rc.1 ├── hexo-theme-landscape@0.0.3 ├── hexo-theme-volantis@5.1.0 ├── hexo-wordcount@6.0.1 ├── hexo@6.1.0 └── nan@2.15.0 extraneous ```

MHuiG commented 2 years ago

也许不应该设置成 auto ？

BeaCox commented 2 years ago

也许不应该设置成 auto ？

你好，尝试过了false参数，仍旧不行。默认值亦是false

MHuiG commented 2 years ago

梳理一下

操作系统亮色主题暗黑模式

操作系统亮色主题亮色模式

操作系统暗色主题暗黑模式

操作系统暗色主题亮色模式

BeaCox commented 2 years ago

梳理一下

操作系统亮色主题暗黑模式

操作系统亮色主题亮色模式

操作系统暗色主题暗黑模式

操作系统暗色主题亮色模式

我也尝试了一下，的确如您所说。但请问能否使这个暗黑模式的显示与操作系统的深浅色无关呢？因为访问其他网站时“操作系统亮色主题暗黑模式”是没有问题的，也不太可能为浏览网站特意设置操作系统的暗色。dark参数设置false效果相同

MHuiG commented 2 years ago

我试了一下dark参数设置false是正常的 dark参数设置auto不正常（同上）

操作系统亮色主题暗黑模式

操作系统亮色主题亮色模式

操作系统暗色主题暗黑模式

操作系统暗色主题亮色模式

MHuiG commented 2 years ago

dark参数设置false，然后设置一个和文字对比度高的卡片背景

BeaCox commented 2 years ago

感谢！完美解决了！总结一下 waline的dark参数设为auto 找到暗黑模式的卡片背景色设置：

  # ------------
  # 暗色主题
  dark:
    # 网站背景色
    site_bg: '#222'
    # 网站背景上的文字
    site_inner: '#eee'
    # 网站页脚文字
    site_footer: '#aaa'
    # 卡片背景色
    card: '#111'
    # 卡片上的普通文字
    text: '#eee'

刚开始card设置的是'#444'，就和文字颜色太接近了导致看不清。改成'#111'或者更深的颜色，卡片背景和文本的对比度就变高了，现在可以正常显示！感谢！

volantis-x / hexo-theme-volantis