豪华炫酷光彩夺目的彩色层级大纲

直接上图，是不是很炫目

需求场景

该设计如此夸张地攫取注意力是因为我有十几个长文档标题太多，一个个折叠打开麻烦而且需要老翻大纲，很难看清 A 标题的同级标题和所属父标题。用颜色如此设计可以更轻松找到多个标题的上下级、同级标题以及我是第几层标题。我就用 PS 提个设想，非常感谢群友用代码帮我实现了！

图示是 zhang-light 主题默认的颜色，可以自己调色和加边或者弄圆角和弧线连接让它不那么显眼。

代码及作者

十分感谢 notion 主题作者和 zhang-light 主题作者完成代码！

/* 多彩层级大纲 */
/* 相关代码来自于dark+主题作者zuoqiu-yingyi和starDust主题作者，特别感谢notion主题作者Roy，灵感来源于"思源群友" */
div.sy__outline ul {
    background-color: var(--b3-font-background1);
}

div.sy__outline ul>ul {
    background-color: var(--b3-font-background2);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul {
    background-color: var(--b3-font-background3);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul {
    background-color: var(--b3-font-background4);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background5);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background6);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background7);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background8);
    margin-left: 10px;
}

我习惯的 margin-left 是 15px。直接塞代码进去标题左内边距会很夸张，用下面这个粗浅的代码覆盖一下比较好。 2022-7-1 更：用了会把文档树和反链的缩进也给宰了，等我问问大佬先

/* 覆盖掉夸张的标题左内边距 */别用！！！！！！
.b3-list-item__toggle {
    padding-left: 1px !important;
}

逛街突然发现 zhang-light 作者发帖了【CSS 片段】多彩大纲层级 - 链滴 (ld246.com)，感谢~

结尾丢个何弹：不觉得这很酷吗？作为一名理工男我觉得这太酷了，很符合我对未来生活的想象。科技并带着趣味。