一套非常好看的标签配色

Innis 2021-8-5 2726

之前见到一套非常好看的标签配色,非常非常喜欢,今天把它移植到了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

 

快速回复
最新回复 (15)
  • maochengzheng 2021-8-5
    0 2
    有没有黑色系的颜色呢?
  • pilgrim112 2021-8-5
    0 3
    太棒了
  • Innis 2021-8-6
    0 4
    maochengzheng 有没有黑色系的颜色呢?
    不太清楚你说的黑色系的颜色是指的什么,如果你能提供一些样式给我参考下,我可以试下帮你写出相应的css。
  • Innis 2021-8-6
    0 5
    pilgrim112 太棒了
    ( •̀ ω •́ )✧
  • 加佳 2021-8-6
    0 6
    爱了
  • yashino 2021-8-6
    0 7
    能不能设置一个默认的标签,只要出现#就有配色的样式?
  • maochengzheng 2021-8-6
    0 8
    我指的是在夜晚背景下的配色,有些颜色在白天背景试用,但是夜晚背景就会显得刺眼。比如默认的那些配色,我觉得除了土黄色,其他颜色都挺刺眼的。
  • Innis 2021-8-6
    0 9
    maochengzheng 我指的是在夜晚背景下的配色,有些颜色在白天背景试用,但是夜晚背景就会显得刺眼。比如默认的那些配色,我觉得除了土黄色,其他颜色都挺刺眼的。
    嗷,明白你的意思了,让我想一想如何解决这个问题。
      = ̄ω ̄= 
  • jren 2021-9-10
    0 10
    爱了爱了!
  • Aslan 2021-10-24
    0 11
    前两个都正常,多彩区块按操作,没反应
  • 13046653183 2021-11-22
    0 12
    请问,这个多彩便签只能运用#的标题上吗,普通文字不能做成红底白字的形式吗
  • sheen 2021-11-22
    0 13
    13046653183 请问,这个多彩便签只能运用#的标题上吗,普通文字不能做成红底白字的形式吗
    都可以的
  • 13046653183 2021-11-22
    0 14
    谢谢大佬分享,但我有个小问题,就是这样子修改只有标签碰到CSS里备注好的词才能高亮,我想问可不可以和{R}这个命令一样,对前面加粗的文字修改成红底白字的类型呢
  • Hardy 2022-1-6
    0 15
    坐等 Innis 做成一个插件哈
  • 老马 2022-8-16
    0 16
    汉字标签,怎么没反应啊?
返回