希望修改思源笔记默认的自定义字色和背景色,并能让用户轻松地修改

本贴最后更新于 322 天前,其中的信息可能已经时移俗易

我的修改建议:

当前默认的色板的颜色排列和选取都有些体验问题,建议修改思源笔记当前给行内样式和块样式所用的 13 个--b3-font-color 和 13 个--b3-font-background,以优化默认色板,让更多用户能愿意使用字色和背景色标注。并让用户可以在样式面板中右键颜色(.color__square)来自定义修改这些属性值,以解决用户对于先前颜色标记的依赖问题,以及部分用户对于默认的标注色不满意的问题。

调查:

关于思源的字色和背景色标注…

单选 不公开 永不结束 52 票
使用字色和背景色标注,没觉得默认的颜色有什么问题
5% 3 票
觉得默认的颜色不好看,但没自己 DIY 或使用第三方主题
28% 15 票
因为默认色板颜色不满意而自己 DIY 了或使用了第三方主题
61% 32 票
不使用字色和背景色标注
3% 2 票

基本信息:

思源笔记可以给一段文字设置字色和底色,这是行内样式;还能给整个块设置字色和底色,这是块样式。

image.png

image.png

行内样式包括:13 种字色和 13 种背景色;镂空和投影样式。
块样式包括:四种定义好了性质的块样式:错误样式、警告样式、信息样式、成功样式;镂空和投影样式;13 种字色和 13 种背景色。

我的观点和分析:

1.默认的 13 种字色和 13 种背景色的排布没有规律,这让用户在挑选的时候有更多的心智负担,需要修改

拿语雀和 word 的色板来举例,其颜色排列是有规律的

image.png

Word 中的默认色板也有规律

image.png

而思源的色板给人的感觉就是“混乱”,没有规律,这会让用户觉得难受。

image.png

在颜色数量比较少的情况下也能有规律

image.png

2.每个用户对于不同深浅、不同色调的颜色都有自己的理解,应该让原版就支持对它们的自定义修改,这样也能解决用户对之前字色、背景色形成的“依赖”问题

字色源自思源默认主题中的自定义属性:--b3-font-color,一共 13 个。
而背景色来自主题中的自定义属性:--b3-font-background,也是 13 个。

而思源有两个外观,即日间和夜间的,对应的主题分别是 daylight 和 midnight,如下图中,它们分别声明了 13 种字色和 13 种背景色。即一共 26+26=52 个颜色

image.png

从 CSS 代码可以看出,1~6 号字色使用了其他的定义过的自定义属性,1-4 号背景色使用了和四种定义过性质的块样式(错误、警告、信息和成功)相同的属性。

实际上这些自定义属性就不需要用上先前的自定义属性,可以单独设置另外的颜色以形成更好的色板

具体实现:

修改 daylight.css 和 midnight.css 中默认的--b3-font-color 和--b3-font-background

image.png


当切换到暗色主题的时候,背景色变成暗色,这些自定义颜色也得做一些变化以适应变化了的背景色,但色彩倾向和对比度不应有大变化,应该让用户依旧能很好的识别出来。

image.png


块背景色对比效果:

image.png

‍颜色代码

daylight 代码:

    --b3-font-color1: #575757;
    --b3-font-color2: #979797;
    --b3-font-color3: #eeeeee;
    --b3-font-color4: #bc1313;
    --b3-font-color5: #e73f3f;
    --b3-font-color6: #eb9100;
    --b3-font-color7: #b09600;
    --b3-font-color8: #48930f;
    --b3-font-color9: #21a88e;
    --b3-font-color10: #1f8ccf;
    --b3-font-color11: #1f49e0;
    --b3-font-color12: #6c22e9;
    --b3-font-color13: #c031e2;
    --b3-font-background1: #aeaeae;
    --b3-font-background2: #d7d7d7;
    --b3-font-background3: #eaeaea;
    --b3-font-background4: #f3b7c2;
    --b3-font-background5: #ffcaca;
    --b3-font-background6: #ffddb6;
    --b3-font-background7: #f8f3c3;
    --b3-font-background8: #e1edba;
    --b3-font-background9: #cff2eb;
    --b3-font-background10: #c3eaf4;
    --b3-font-background11: #c8dfff;
    --b3-font-background12: #e0d9ff;
    --b3-font-background13: #ecd0f1;

midnight 代码:

    --b3-font-color1: #aaaaaa;
    --b3-font-color2: #888888;
    --b3-font-color3: #484848;
    --b3-font-color4: #9f1212;
    --b3-font-color5: #e73f3f;
    --b3-font-color6: #ea9000;
    --b3-font-color7: #dcbe11;
    --b3-font-color8: #8fbb13;
    --b3-font-color9: #21a48b;
    --b3-font-color10: #289be1;
    --b3-font-color11: #577cfe;
    --b3-font-color12: #9f69fb;
    --b3-font-color13: #bb63d0;
    --b3-font-background1: #ababab;
    --b3-font-background2: #878787;
    --b3-font-background3: #474747;
    --b3-font-background4: #823d49;
    --b3-font-background5: #9c3d3d;
    --b3-font-background6: #8f5a1f;
    --b3-font-background7: #70670f;
    --b3-font-background8: #51660d;
    --b3-font-background9: #1c615f;
    --b3-font-background10: #08596e;
    --b3-font-background11: #264a7d;
    --b3-font-background12: #48388c;
    --b3-font-background13: #643b6b;

还需要给予用户方便地自定义这些颜色的功能,我的想法就是在 button.color__square 上加上右键打开选色面板的功能,就和开发者工具里的类似。右键颜色方块后打开如下面各图中的选色面板。而且在 设置 - 外观 中也应该增加一个区域,让用户能使用几套色板预设、恢复默认颜色、调节全部颜色。

如果用户不满意默认的配色方案的话,可以自己改出一套自己用的色板。也能避免已经使用老色板记了很多笔记的用户的笔记中颜色标记全乱且难以恢复成自己想要的样子的情况。

image.png

实际上,很多想使用字色、底色标记的用户必然对思源笔记默认的色板不满,就算是优化过、修改过可能依旧如此。所以在优化默认色板的时候也需要让用户能轻松地无需接触代码地自定义这些颜色,一劳永逸地解决该问题。

现在 custom.css 功能砍掉了,也不知道该如何存放这些用户自定义的颜色代码。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    18144 引用 • 66954 回帖
1 操作
StarDustSheep 在 2023-05-11 21:40:12 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 思源有你更精彩

  • 其他回帖
  • PiChou 1

    插个楼,同样是提升色板使用体验的功能提议:【阅读标注增强】字体效果能否逐一设置快捷键?,希望大伙看下,如果也有同样需求的可以来帖子里顶一顶。

    另外:就本帖内容提供一个我自定义的 26 种字体效果。

    图片.png

    • 字体颜色:最粗体
    • 背景颜色:中等加粗体,2px 圆角半透明背景。
        --b3-font-color1: #eb5042;
        --b3-font-color2: #ffaf0f;
        --b3-font-color3: #7ac4ff;
        --b3-font-color4: #40a02b;
        --b3-font-color5: #cad3f5;
        --b3-font-color6: #ee99a0;
        --b3-font-color7: #f5a97f;
        --b3-font-color8: #eed49f;
        --b3-font-color9: #a6da95;
        --b3-font-color10:#8bd5ca;
        --b3-font-color11: #943DFF;
        --b3-font-color12: #00A27B;
        --b3-font-color13: #8aadf4;
        --b3-font-background1: rgba(235, 80, 66,0.3);
        --b3-font-background2: rgba(255, 175, 15,0.3);
        --b3-font-background3: rgba(122, 196, 255,0.3);
        --b3-font-background4: rgba(64, 160, 43,0.3);
        --b3-font-background5: rgba(202, 211, 245,0.3);
        --b3-font-background6: rgba(238, 153, 160,0.3);
        --b3-font-background7: rgba(245, 169, 127,0.3);
        --b3-font-background8: rgba(238, 212, 159,0.3);
        --b3-font-background9: rgba(166, 218, 149,0.3);
        --b3-font-background10: rgba(139, 213, 202,0.3);
        --b3-font-background11: rgba(148, 61, 255,0.3);
        --b3-font-background12: rgba(0, 162, 123,0.3);
        --b3-font-background13: rgba(138, 173, 244,0.3);
    
    1 回复
  • msynmsyn

    现在想自定义外观实在太难、太不方便了。

  • mimishy2000

    支持自定义颜色

  • 查看全部回帖