Zuoqiu-Yingyi / siyuan-theme-dark-plus

思源笔记的一款多功能双模式主题 | A multifunctional dual-mode theme of SiYuan Note.
GNU Affero General Public License v3.0
139 stars 14 forks source link

:bug: Dark+ v1.7.0的自定义样式失效 #179

Closed sq98 closed 1 year ago

sq98 commented 1 year ago

该问题是否已经被报告过了? Is there an existing issue for this?

描述问题 Describe the problem

升级到Dark+ v1.7.0后,自定义样式失效了,经测试之前自定义的custom-light.css失效了,(估计custom-dark.css应该也失效了,此未测)。

期待的结果 Expected result

希望在此 或 在项目README.md里,更新适用于Dark+ v1.7.0的自定义样式的方法,谢谢!谢谢开发出这么好用,这么棒的主题👍🏻!(看到 项目的README.md是两个月前的更新,应该还没来得及更新)

截屏或者录屏演示 Screenshot or screen recording presentation

No response

版本环境 Version environment

- SiYuan Version: 2.7.4
- Dark+ Version: 1.7.0
- Operating System: MacOS 12.6.1
- Browser (if used):

更多信息 More information

No response

sq98 commented 1 year ago

谢谢,已看到了你的修复。但是当我按照你修复后的代码,同样的操作之后(也就是删除 theme.js 里那两行关键的代码后),重启再打开思源笔记,依然未加载未显示自定义样式。(不知是不是还没修复完成)。

需要注意的是,项目的 README.md里 自定义配置里的 <工作空间>/conf/appearance/themes/Dark+/style/color/light.css,在1.7.0版本中已经删除,路径变为了 <工作空间>/conf/appearance/themes/Dark+/style/config/light.css。

原本 custom-light.css 覆盖的是 /color/light.css 中的值,现在没有了/color/light.css,只有/config/light.css,不知是否和这有关。

Zuoqiu-Yingyi commented 1 year ago

谢谢,已看到了你的修复。但是当我按照你修复后的代码,同样的操作之后(也就是删除 theme.js 里那两行关键的代码后),重启再打开思源笔记,依然未加载未显示自定义样式。(不知是不是还没修复完成)。

需要注意的是,项目的 README.md里 自定义配置里的 <工作空间>/conf/appearance/themes/Dark+/style/color/light.css,在1.7.0版本中已经删除,路径变为了 <工作空间>/conf/appearance/themes/Dark+/style/config/light.css。

原本 custom-light.css 覆盖的是 /color/light.css 中的值,现在没有了/color/light.css,只有/config/light.css,不知是否和这有关。

其实我并没有成功复现该问题, 只是删除了两句冗余的代码, 要不先试试禁用缓存后刷新界面😂

Geo123abc commented 1 year ago

从思源 v2.7.4(?)前后,我的自定义大纲颜色无法正常显示了,禁用缓存、刷新界面之后也不行,重新安装dark+也不行,不知道什么原因,但是好像和这个话题有关

我工作空间 \data\widgets\custom-light.css 文件内容如下

:root {
    /* 空行聚焦提示 */
    --custom-empty-focus-p: "";
    --custom-empty-focus-c: "´・-・)ノ↹";
    --custom-empty-focus-t: "´・-・)ノ☑";
    --custom-empty-focus-u: "´・-・)ノ◉";
    --custom-empty-focus-o: "´・-・)ノ①";

    /* 空行提示 */
    --custom-empty-p: "";
    --custom-empty-c: "";
    --custom-empty-t: "";
    --custom-empty-u: "";
    --custom-empty-o: "";

    /* 子标题及其对应大纲颜色 ,使用dark+主题中 D:\SiYuan\conf\appearance\themes\Dark+\style\module\config.css  自定义标准颜色(Office 标准颜色) ,由于黄色在主题中显示度太差,因此改为黑色*/
    --custom-h1-color: #FA0000;
    --custom-h2-color: #FFC001;
    --custom-h3-color: #000000;
    --custom-h4-color: #00B050;
    --custom-h5-color: #00B0F0;
    --custom-h6-color: #7030A0;

    /* 自定义字体背景色 */
    --b3-font-background1: rgba(174, 208, 255, 0.9);
    --b3-font-background2: rgba(255, 255, 170, 0.9);
    --b3-font-background3: rgba(255, 255, 0, 0.9);
    --b3-font-background4: rgba(253, 0, 6, 0.9);
    --b3-font-background5: rgba(17, 132, 63, 0.9);
    --b3-font-background6: rgba(48, 255, 4, 0.9);
    --b3-font-background7: rgba(253, 123, 6, 0.9);
    --b3-font-background8: rgba(253, 168, 191, 0.9);
    --b3-font-background9: rgba(30, 187, 255, 0.9);
    --b3-font-background10: rgba(255, 0, 255, 0.9);
    --b3-font-background11: rgba(255, 102, 102, 0.9);
    --b3-font-background12: rgba(193, 152, 224, 0.9);
    --b3-font-background13: rgba(217, 211, 215, 0.5);

    /* 默认背景图片 */
    /* --custom-background-image: url("/appearance/themes/background (07).png");*/

    --custom-background-image: none;
    /* 背景颜色 | Background color */
    --custom-background-color: #C7EDCC;

    config.theme.dock.fold.dock = true;

    /* 固定页签省去文字,待实现 */

}

萌老帮忙看一下?!?

sq98 commented 1 year ago

作者已在项目主页里的README.md里,更新了自定义样式的代码举例,请参考修改。 @Geo123abc 其实也就是:

1.把data/widgets/custom.css里的 :root { 改为如下两行即可

:root[data-theme-mode=light],
:root[data-theme-mode=dark] {

2.把data/widgets/custom-light.css里的 :root { 改为如下一行即可 :root[data-theme-mode=light] {

3.把data/widgets/custom-dark.css里的 :root { 改为如下一行即可 :root[data-theme-mode=dark] {

其它不用改,上面三处改完后,关闭思源笔记后重新打开即可。我刚改过,完美显示自定义样式。

Geo123abc commented 1 year ago

作者已在项目主页里的README.md里,更新了自定义样式的代码举例,请参考修改。 @Geo123abc 其实也就是:

1.把data/widgets/custom.css里的 :root { 改为如下两行即可

:root[data-theme-mode=light],
:root[data-theme-mode=dark] {

2.把data/widgets/custom-light.css里的 :root { 改为如下一行即可 :root[data-theme-mode=light] {

3.把data/widgets/custom-dark.css里的 :root { 改为如下一行即可 :root[data-theme-mode=dark] {

其它不用改,上面三处改完后,关闭思源笔记后重新打开即可。我刚改过,完美显示自定义样式。

谢谢老铁,已搞定