登录 注册

[css] 分享：修改「字体颜色」和「背景颜色」

1.前言

论坛里找到的修改字体颜色和字体的背景颜色的代码不甚满意，借鉴大家分享的代码（原文链接：思源笔记 自定义 可在多个主题间适用的 行内字色及底色 - 链滴 (ld246.com)），加上使用 DeepSeek 改代码，终于调到了令自己满意的颜色。

使用插件“配色方案”更方便修改颜色，但是修改之后，我 iOS 设备上的颜色依然是思源默认的颜色，没有修改过来，而通过 CSS 代码可以实现在 Android、iOS 设备中同步修改颜色。另外，通过 CSS 代码，在导出笔记为 PDF 时，颜色依然是自己修改之后的（看到论坛里有位朋友导出 PDF 有问题）。

本篇分享的 CSS 代码，适配默认主题的明亮模式和暗黑模式，第三方主题请自测。暗黑模式下，将思源默认的白色字体改成黑色字体，以防止加了背景颜色的文字看不清楚。

2.语雀内置的颜色

为了更好的调节到自己喜欢的颜色，先来看看语雀的内置颜色。

语雀内置的颜色.png

我将上图中红色方框框出来的部分的颜色代码抠出来了，表格的颜色代码和上图中颜色的位置一一对应，颜色代码如下表格：

语雀预置字色 红 橘橙 金盏黄 柠檬黄 绿 青 浅蓝 蓝 紫 玫红
标准色 #DF2A3F #ED740C #ECAA04 #FBDE28 #74B602 #1DC0C9 #117CEE #2F4BDA #601BDE #D22D8D
极浅 #FBE4E7 #FDE6D3 #F9EFCD #FBF5CB #E8F7CF #CEF5F7 #D9EAFC #D9DFFC #E6DCF9 #FBDFEF
较浅 #F1A2AB #F8B881 #F5D480 #FCE75A #C1E77E #81DFE4 #81BBF8 #96A7FD #BA9BF2 #F297CC
浅于标准色 #E4495B #F38F39 #F3BB2F #EDCE02 #8CCF17 #01B2BC #2F8EF4 #4861E0 #7E45E8 #E746A4
深于标准色 #AD1A2B #C75C00 #C99103 #A58F04 #5C8D07 #07787E #0C68CA #213BC0 #4C16B1 #AE146E

3.挑选自己喜欢的「字体颜色」和字体的「背景颜色」

思源默认的颜色有些还不错，被我保留下来了。下面是我挑出的「字体颜色」和「背景颜色」，基本按照红-橙-黄-绿-青-靛-紫排列。没有蓝色，蓝色被用于超链接和标记的背景色。

「背景颜色」都比较淡，其中 color1 到 color6 适合标题或者关键词等文字，颜色较深；color7 到 color13 颜色较浅，适合大段的正文内容。

image.png

挑选颜色可以在这个网站：颜色选择器 — HTML 颜色代码 (htmlcolorcodes.com)

4.CSS 片段代码

/* 请使用在线工具获取颜色HEX色值 */
:root[data-theme-mode="light"] {
    /* 白天主题13种字色 */
    --diy-color1: #DF2A3F;
    --diy-color2: #C75C00;
    --diy-color3: #A58F04;
    --diy-color4: #008606;
    --diy-color5: #07787E;
    --diy-color6: #601BDE;
    --diy-color7: #F5539E;
    --diy-color8: #D22D8D;
    --diy-color9: #FF9200;
    --diy-color10: #C99103;
    --diy-color11: #00B853;
    --diy-color12: #1DC0C9;
    --diy-color13: #7E45E8;

    /* 白天主题13种背景色 */
    --diy-bg-color1: #FF6262;
    --diy-bg-color2: #FFAA38;
    --diy-bg-color3: #EDCE02;
    --diy-bg-color4: #64E564;
    --diy-bg-color5: #69FFFF;
    --diy-bg-color6: #A16FFF;
    --diy-bg-color7: #FFCFEA;
    --diy-bg-color8: #FFC7CD;
    --diy-bg-color9: #FFE1AB;
    --diy-bg-color10: #FFFF8F;
    --diy-bg-color11: #CFFFCF;
    --diy-bg-color12: #CFFFFF;
    --diy-bg-color13: #D1B9FF;
}

:root[data-theme-mode="dark"] {
    /* 夜间主题13种字色 */
    --diy-color1: #DF2A3F;
    --diy-color2: #C75C00;
    --diy-color3: #A58F04;
    --diy-color4: #008606;
    --diy-color5: #07787E;
    --diy-color6: #601BDE;
    --diy-color7: #F5539E;
    --diy-color8: #D22D8D;
    --diy-color9: #FF9200;
    --diy-color10: #C99103;
    --diy-color11: #00B853;
    --diy-color12: #1DC0C9;
    --diy-color13: #7E45E8;

    /* 夜间主题13种背景色 */
    --diy-bg-color1: #FF6262;
    --diy-bg-color2: #FFAA38;
    --diy-bg-color3: #EDCE02;
    --diy-bg-color4: #64E564;
    --diy-bg-color5: #69FFFF;
    --diy-bg-color6: #A16FFF;
    --diy-bg-color7: #FFCFEA;
    --diy-bg-color8: #FFC7CD;
    --diy-bg-color9: #FFE1AB;
    --diy-bg-color10: #FFFF8F;
    --diy-bg-color11: #CFFFCF;
    --diy-bg-color12: #CFFFFF;
    --diy-bg-color13: #D1B9FF;
}


/* 此段代码为所有在思源中设置了字色的文字设置共同的属性 */
[style*="color: var(--b3-font-color"] {
    font-weight: 500;
    /* 略微调高字重 */
    font-size: 1em;
    /* 如果你想让标注了的文字的字号有变化的话，可以修改数值 */
    opacity: 100% !important;
    /* 不透明度 */
    vertical-align: inherit;
    text-shadow: none !important;
    /* 无文字阴影！ */
}


[style*="var(--b3-font-color1);"] {
    color: var(--diy-color1) !important;
}

[style*="var(--b3-font-color2);"] {
    color: var(--diy-color2) !important;
}

[style*="var(--b3-font-color3);"] {
    color: var(--diy-color3) !important;
}

[style*="var(--b3-font-color4);"] {
    color: var(--diy-color4) !important;
}

[style*="var(--b3-font-color5);"] {
    color: var(--diy-color5) !important;
}

[style*="var(--b3-font-color6);"] {
    color: var(--diy-color6) !important;
}

[style*="var(--b3-font-color7);"] {
    color: var(--diy-color7) !important;
}

[style*="var(--b3-font-color8);"] {
    color: var(--diy-color8) !important;
}

[style*="var(--b3-font-color9);"] {
    color: var(--diy-color9) !important;
}

[style*="var(--b3-font-color10);"] {
    color: var(--diy-color10) !important;
}

[style*="var(--b3-font-color11);"] {
    color: var(--diy-color11) !important;
}

[style*="var(--b3-font-color12);"] {
    color: var(--diy-color12) !important;
}

[style*="var(--b3-font-color13);"] {
    color: var(--diy-color13) !important;
}


/* 修改字色菜单中的图标颜色 */
/* 不显示那个A字 */
.color__square[style*="color:var(--b3-font-color"] {
    color: transparent !important;
}

.color__square[style*="color:var(--b3-font-color1)"] {
    background-color: var(--diy-color1) !important;
}

.color__square[style*="color:var(--b3-font-color2)"] {
    background-color: var(--diy-color2) !important;
}

.color__square[style*="color:var(--b3-font-color3)"] {
    background-color: var(--diy-color3) !important;
}

.color__square[style*="color:var(--b3-font-color4)"] {
    background-color: var(--diy-color4) !important;
}

.color__square[style*="color:var(--b3-font-color5)"] {
    background-color: var(--diy-color5) !important;
}

.color__square[style*="color:var(--b3-font-color6)"] {
    background-color: var(--diy-color6) !important;
}

.color__square[style*="color:var(--b3-font-color7)"] {
    background-color: var(--diy-color7) !important;
}

.color__square[style*="color:var(--b3-font-color8)"] {
    background-color: var(--diy-color8) !important;
}

.color__square[style*="color:var(--b3-font-color9)"] {
    background-color: var(--diy-color9) !important;
}

.color__square[style*="color:var(--b3-font-color10)"] {
    background-color: var(--diy-color10) !important;
}

.color__square[style*="color:var(--b3-font-color11)"] {
    background-color: var(--diy-color11) !important;
}

.color__square[style*="color:var(--b3-font-color12)"] {
    background-color: var(--diy-color12) !important;
}

.color__square[style*="color:var(--b3-font-color13)"] {
    background-color: var(--diy-color13) !important;
}



/* 针对不同底色，修改其底色 */
[style*="background-color: var(--b3-font-background1);"] {
    background-color: var(--diy-bg-color1) !important;
}

[style*="background-color: var(--b3-font-background2);"] {
    background-color: var(--diy-bg-color2) !important;
}

[style*="background-color: var(--b3-font-background3);"] {
    background-color: var(--diy-bg-color3) !important;
}

[style*="background-color: var(--b3-font-background4);"] {
    background-color: var(--diy-bg-color4) !important;
}

[style*="background-color: var(--b3-font-background5);"] {
    background-color: var(--diy-bg-color5) !important;
}

[style*="background-color: var(--b3-font-background6);"] {
    background-color: var(--diy-bg-color6) !important;
}

[style*="background-color: var(--b3-font-background7);"] {
    background-color: var(--diy-bg-color7) !important;
}

[style*="background-color: var(--b3-font-background8);"] {
    background-color: var(--diy-bg-color8) !important;
}

[style*="background-color: var(--b3-font-background9);"] {
    background-color: var(--diy-bg-color9) !important;
}

[style*="background-color: var(--b3-font-background10);"] {
    background-color: var(--diy-bg-color10) !important;
}

[style*="background-color: var(--b3-font-background11);"] {
    background-color: var(--diy-bg-color11) !important;
}

[style*="background-color: var(--b3-font-background12);"] {
    background-color: var(--diy-bg-color12) !important;
}

[style*="background-color: var(--b3-font-background13);"] {
    background-color: var(--diy-bg-color13) !important;

}


.color__square[style*="background-color:var(--b3-font-background1)"] {
    background-color: var(--diy-bg-color1) !important;
}

.color__square[style*="background-color:var(--b3-font-background2)"] {
    background-color: var(--diy-bg-color2) !important;
}

.color__square[style*="background-color:var(--b3-font-background3)"] {
    background-color: var(--diy-bg-color3) !important;
}

.color__square[style*="background-color:var(--b3-font-background4)"] {
    background-color: var(--diy-bg-color4) !important;
}

.color__square[style*="background-color:var(--b3-font-background5)"] {
    background-color: var(--diy-bg-color5) !important;
}

.color__square[style*="background-color:var(--b3-font-background6)"] {
    background-color: var(--diy-bg-color6) !important;
}

.color__square[style*="background-color:var(--b3-font-background7)"] {
    background-color: var(--diy-bg-color7) !important;
}

.color__square[style*="background-color:var(--b3-font-background8)"] {
    background-color: var(--diy-bg-color8) !important;
}

.color__square[style*="background-color:var(--b3-font-background9)"] {
    background-color: var(--diy-bg-color9) !important;
}

.color__square[style*="background-color:var(--b3-font-background10)"] {
    background-color: var(--diy-bg-color10) !important;
}

.color__square[style*="background-color:var(--b3-font-background11)"] {
    background-color: var(--diy-bg-color11) !important;
}

.color__square[style*="background-color:var(--b3-font-background12)"] {
    background-color: var(--diy-bg-color12) !important;
}
.color__square[style*="background-color:var(--b3-font-background13)"] {
    background-color: var(--diy-bg-color13) !important;
}

/* 暗黑模式下，带有背景颜色的字体显示为黑色，而没有背景颜色的字体依旧使用系统默认的字体颜色 */
:root[data-theme-mode="dark"] [style*="background-color: var(--b3-font-background"] {
    color: #000000 !important;
}  
​

5.最终效果

（1）字体颜色：

image.png

image.png

（2）背景颜色

image.png

image.png

xdm，喜欢的话点赞评论呀！

  • 思源笔记

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

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

    25059 引用 • 103276 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    140 引用 • 937 回帖
3 操作
JiaShuBJ 在 2025-04-07 17:35:34 更新了该帖
JiaShuBJ 在 2025-04-07 16:38:03 更新了该帖
JiaShuBJ 在 2025-04-07 16:35:58 更新了该帖
杭州 位置
7 感谢
1 关注
9 收藏
3 操作
13 回帖
5
4
281 161 9 1 110

相关帖子

13 回帖
[css] 分享：修改「字体颜色」和「背景颜色」

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Matttttt •
    订阅者 付费者

    感谢大佬

    1 回复
  • windbyside •

    非常感谢，确实不错。提一点建议：字体颜色样式还是字母加颜色为好，以区分背景颜色。现在在历史图表中不能区分哪一种颜色。

    1 回复
  • JiaShuBJ •
    付费者 作者

    客气了，我也是小白 😄

  • JiaShuBJ •
    付费者 作者

    嗯嗯，这是我 copy 另一位大佬的代码，需要字母加颜色可以将 CSS 相应代码删掉就好了

  • jh •
    付费者

    为什么背景颜色对应的是乱的？

    image.png

    image.png

    颜色顺序对应不上

    2 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    我这里是对的

    image.png

    1 回复
  • JiaShuBJ •
    付费者 作者

    你这咋回事，有点奇怪啊，你仔细瞅瞅你的背景色 color3 是 #FFEF66，但是我上面的代码是 #EDCE02 。你再复制一遍试试

    2 回复
  • jh •
    付费者

    我这里是想把 color3 的颜色改一下，改成#FFEF66 的，是深黄色，但是看我的第一幅图里面，color3 还是绿色，color13 变成了#FFEF66 对应的颜色 😭

  • jh •
    付费者

    我直接复制 CSS，颜色是乱的

    image.png

  • siyuan100861186 • • 1
    订阅者

    好

    1 回复
  • jh • • 1 评论
    付费者

    我知道了，是写味主题开启后就这样了，把主题关了就好了，但是写味主题怎么解决这种问题呢

    1 回复
    直接问主题作者
    JeffreyChen •
  • JiaShuBJ •
    付费者 作者

    我也是在别人原代码的基础上改的，所以帮不了你了，你有空可以研究一下

  • JiaShuBJ •
    付费者 作者

    😄

请输入回帖内容 ...
JiaShuBJ
杭州
回帖
15
 帖子
2
 积分
701