之前见到一套非常好看的标签配色,非常非常喜欢,今天把它移植到了RoamEdit,希望大家也喜欢~
Roamresearch:

RoamEdit:

这个标签配色分为三部分,一部分是给标签用的,一部分是给双方括号里的关键词用的,最后一部分是给标签的下级用的。
第一部分:多彩标签

Css代码:
a[linkto="TwitterPost"] {
background: #81d5ed !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="GardenNotes"] {
color:#9dbc13 !important ;
font-weight: bold;
}
a[linkto="Essay"] {
background: #adcb2a !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Talk"] {
background: #7172fc !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="VideoTutorial"] {
color: #db3b8d; !important ;
font-weight: bold;
}
a[linkto="IdeaBank"] {
color:#fcb815 !important ;
font-weight: bold;
}
a[linkto="Waiting"] {
background: #f9c866 !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Researching"] {
background: #ff9d66 !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Synthesising"] {
background: #fc766f !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Alive"] {
background: #ee5f85 !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Evergreens"] {
background: #0dbac6 !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="Seedling"] {
color:#0dbac6 !important ;
font-weight: bold;
}
a[linkto="RoamEdit"] {
background: #9769ff !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="SecondBrain"] {
background: #7172fc !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
a[linkto="KnowledgeBase"] {
background: #db3b8d !important;
color: white !important;
padding: 0px 7px !important;
font-weight: 500;
display: inline-block;
border-radius: 3px;
}
把上面的css代码粘贴到“自定义css”就可以用了

如何个性化设置
下面这段代码的意思是:如果碰到标签的内容是“GardenNotes”,就把它的样式变为下面设置的样式。
所以你可以根据自己的需要,把此处的“GardenNotes”替换为任何你需要的标签。
a[linkto="GardenNotes"] {
color:#9dbc13 !important ;
font-weight: bold;
}



第二部分:多彩关键词

Css代码:
.linkto [lower="cuts"]{
color: #119bf0 !important;
font-weight: 600;
}
.linkto [lower="atomic"]{
color: #00acc0 !important;
font-weight: 600;
}
.linkto [lower="reference"]{
color: #35b2d4 !important;
font-weight: 700;
}
.linkto [lower="embedding"]{
color: #119bf0 !important;
font-weight: 600;
}
.linkto [lower="documents"]{
color: #5135d4 !important;
font-weight: 700;
}
.linkto [lower="blocks"]{
color: #d4357f !important;
font-weight: 600;
}
.linkto [lower="knowledge"]{
color: #119bf0 !important;
font-weight: 600;
}
.linkto [lower="maintenance"]{
color: #5391f8 !important;
font-weight: 600;
}
.linkto [lower="modification"]{
color: #fcb815 !important;
font-weight: 700;
}
使用方法和个性化方法都和上面的“多彩标签一致”

第三部分:多彩区块


Css代码:
.node[links*="claim"] {
background:#FDF8EE;
border-radius: 6px;
}
.node[links*="questions"] {
background:#ECF5FB;
border-radius: 6px;
}
.node[links*="response"] {
background:#F3F1FD;
border-radius: 6px;
}
.node[links*="evidence"] {
background:#FEEDED;
border-radius: 6px;
}
.node[links*="directQuote"] {
background:#F4F6D8;
border-radius: 6px;
}
使用方法和个性化方法都和上面的“多彩标签一致”。
来源:
https://github.com/theianjones/roam-research-themes/blob/master/leyendecker.css
https://maggieappleton.com/paintingroam