暗色模式下, 标题跟正文的区分不明显, 所以希望能增加各级标题的颜色.
Dark+的自动标题序号功能真的很好用, 免去了写序号的操作, 希望作者可以加一下, 感激不尽
这个是我复制Dark+的样式的效果图,
:root[theme-mode=light] {
--custom-h1-color: var(--td-text-color-primary);
--custom-h2-color: var(--td-text-color-primary);
--custom-h3-color: var(--td-text-color-primary);
--custom-h4-color: var(--td-text-color-primary);
--custom-h5-color: var(--td-text-color-primary);
--custom-h6-color: var(--td-text-color-primary);
}
:root[theme-mode=dark] {
--custom-h1-color: #c9d1d9;
--custom-h2-color: #a6d5fa;
--custom-h3-color: #ffd599;
--custom-h4-color: #b7dfb9;
--custom-h5-color: #fab3ae;
--custom-h6-color: #b2a1c7;
}
:root {
--custom-h1-indentation: 0.5em;
--custom-h2-indentation: 1em;
--custom-h3-indentation: 1.5em;
--custom-h4-indentation: 2em;
--custom-h5-indentation: 2.5em;
--custom-h6-indentation: 3em;
}
/* 👇标题自动编号👇 */
/* body {
counter-reset: h1-counter 0;
} */
.protyle-wysiwyg,
.b3-typography {
counter-reset: h1-counter 0 h2-counter 0 h3-counter 0 h4-counter 0 h5-counter 0 h6-counter 0;
}
.protyle-wysiwyg>[data-node-id].h1,
.b3-typography>h1 {
counter-increment: h1-counter;
counter-reset: h2-counter 0;
}
.protyle-wysiwyg>[data-node-id].h1::before,
.b3-typography>h1::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h1,
.b3-typography h1 {
color: var(--custom-h1-color);
border-left: 3px inset var(--custom-h1-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h1>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h1-indentation);
}
.protyle-wysiwyg>[data-node-id].h2,
.b3-typography>h2 {
counter-increment: h2-counter;
counter-reset: h3-counter 0;
}
.protyle-wysiwyg>[data-node-id].h2::before,
.b3-typography>h2::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "." counter(h2-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h2,
.b3-typography h2 {
color: var(--custom-h2-color);
border-left: 3px solid var(--custom-h2-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h2>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h2-indentation);
}
.protyle-wysiwyg>[data-node-id].h3,
.b3-typography>h3 {
counter-increment: h3-counter;
counter-reset: h4-counter 0;
}
.protyle-wysiwyg>[data-node-id].h3::before,
.b3-typography>h3::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h3,
.b3-typography h3 {
color: var(--custom-h3-color);
border-left: 3px solid var(--custom-h3-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h3>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h3-indentation);
}
.protyle-wysiwyg>[data-node-id].h4,
.b3-typography>h4 {
counter-increment: h4-counter;
counter-reset: h5-counter 0;
}
.protyle-wysiwyg>[data-node-id].h4::before,
.b3-typography>h4::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h4,
.b3-typography h4 {
color: var(--custom-h4-color);
border-left: 3px solid var(--custom-h4-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h4>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h4-indentation);
}
.protyle-wysiwyg>[data-node-id].h5,
.b3-typography>h5 {
counter-increment: h5-counter;
counter-reset: h6-counter 0;
}
.protyle-wysiwyg>[data-node-id].h5::before,
.b3-typography>h5::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h5,
.b3-typography h5 {
color: var(--custom-h5-color);
border-left: 3px solid var(--custom-h5-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h5>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h5-indentation);
}
.protyle-wysiwyg>[data-node-id].h6,
.b3-typography>h6 {
counter-increment: h6-counter;
counter-reset: h7-counter 0;
}
.protyle-wysiwyg>[data-node-id].h6::before,
.b3-typography>h6::before {
display: block !important;
float: left;
font-size: var(--custom-h-num-font-size);
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) "\00A0";
}
.protyle-wysiwyg [data-node-id].h6,
.b3-typography h6 {
color: var(--custom-h6-color);
border-left: 3px solid var(--custom-h6-color);
padding-left: 9px;
}
.protyle-wysiwyg>[data-node-id].h6>[contenteditable][spellcheck]:empty {
padding-left: var(--custom-h6-indentation);
}