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

1.前言

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

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

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

2.语雀内置的颜色

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

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

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

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

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

挑选颜色可以在这个网站：颜色选择器 — 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）字体颜色：

（2）背景颜色

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