Obsidian CSS Snippets
I have not written a full post on how I use Obsidian yet but I talked about it in the first post here. I plan to write more in the future but for the mean time I just wanted to put my main edits online for others who may care enough to find them.
Obsidian uses “snippets” of css to compliment/overwrite the various larger themes that you can apply to the product. Below are the ones I have made/gathered and a brief description of what they do.
To use snippets in Obsidian write a file called <name>.css
to .obsidian/snippets
then go to the “Appearance” section and refresh then select the file that appears with the toggle.
- Folder Colours
- Graph edits
- Hide meta-data header in preview
- Hide URL Icon
- Highlighter
- Require hovering to see scrollbars
- Minimal Checkboxes
- Minimal edits
- Do not colour internal links
- Do not underline internal links
- Nord calendar
- Nord inline code colour
- Red unresolved links
- Tag multi colours
- Tag same colour
- Embed Fixes
- Hide Comments in Live Preview
Folder Colours
This is an intensive but pretty edit. You need to make a section at the bottom for every folder by name.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
.theme-dark {
/*Darker Color for 2*/
--f-f: #3b4252;
--f-r: #bf616a;
--f-o: #d08770;
--f-y: #ebcb8b;
--f-g: #a3be8c;
--f-p: #b48ead;
--f-sg: #8fbcbb;
--f-lb: #88c0d0;
--f-frst: #81a1c1;
--f-b: #5e81ac;
}
.theme-light {
/*Darker Color for 1*/
--f-f: #3b4252;
--f-r: #bf616a;
--f-o: #d08770;
--f-y: #ebcb8b;
--f-g: #a3be8c;
--f-p: #b48ead;
--f-sg: #8fbcbb;
--f-lb: #88c0d0;
--f-frst: #81a1c1;
--f-b: #5e81ac;
}
/*00 Meta*/
.nav-folder-title[data-path="00 Meta"] {
color: var(--f-f);
background: var(--f-r) !important;
border-bottom: 2px solid var(--f-r);
}
.nav-folder-title[data-path*="00 Meta"],
.nav-folder-title[data-path*="00 Meta"] + .nav-folder-children,
.nav-file-title[data-path*="00 Meta"] {
border-left: 3px solid var(--f-r);
margin-left: 8px;
}
.nav-folder-title[data-path*="00 Meta"]:hover,
.nav-folder-title[data-path*="00 Meta"] + .nav-folder-children:hover,
.nav-file-title[data-path*="00 Meta"]:hover {
border-color: var(--f-r);
}
/*10 Life*/
.nav-folder-title[data-path="10 Life"] {
color: var(--f-f);
background: var(--f-o) !important;
border-bottom: 2px solid var(--f-o);
}
.nav-folder-title[data-path*="10 Life"],
.nav-folder-title[data-path*="10 Life"] + .nav-folder-children,
.nav-file-title[data-path*="10 Life"] {
border-left: 3px solid var(--f-o);
margin-left: 8px;
}
.nav-folder-title[data-path*="10 Life"]:hover,
.nav-folder-title[data-path*="10 Life"] + .nav-folder-children:hover,
.nav-file-title[data-path*="10 Life"]:hover {
border-color: var(--f-o);
}
/*20 IT*/
.nav-folder-title[data-path="20 IT"] {
color: var(--f-f);
background: var(--f-y) !important;
border-bottom: 2px solid var(--f-y);
}
.nav-folder-title[data-path*="20 IT"],
.nav-folder-title[data-path*="20 IT"] + .nav-folder-children,
.nav-file-title[data-path*="20 IT"] {
border-left: 3px solid var(--f-y);
margin-left: 8px;
}
.nav-folder-title[data-path*="20 IT"]:hover,
.nav-folder-title[data-path*="20 IT"] + .nav-folder-children:hover,
.nav-file-title[data-path*="20 IT"]:hover {
border-color: var(--f-y);
}
/*30 Hobbies*/
.nav-folder-title[data-path="30 Hobbies"] {
color: var(--f-f);
background: var(--f-g) !important;
border-bottom: 2px solid var(--f-g);
}
.nav-folder-title[data-path*="30 Hobbies"],
.nav-folder-title[data-path*="30 Hobbies"] + .nav-folder-children,
.nav-file-title[data-path*="30 Hobbies"] {
border-left: 3px solid var(--f-g);
margin-left: 8px;
}
.nav-folder-title[data-path*="30 Hobbies"]:hover,
.nav-folder-title[data-path*="30 Hobbies"] + .nav-folder-children:hover,
.nav-file-title[data-path*="30 Hobbies"]:hover {
border-color: var(--f-g);
}
/*40 Objects*/
.nav-folder-title[data-path="40 Objects"] {
color: var(--f-f);
background: var(--f-p) !important;
border-bottom: 2px solid var(--f-p);
}
.nav-folder-title[data-path*="40 Objects"],
.nav-folder-title[data-path*="40 Objects"] + .nav-folder-children,
.nav-file-title[data-path*="40 Objects"] {
border-left: 3px solid var(--f-p);
margin-left: 8px;
}
.nav-folder-title[data-path*="40 Objects"]:hover,
.nav-folder-title[data-path*="40 Objects"] + .nav-folder-children:hover,
.nav-file-title[data-path*="40 Objects"]:hover {
border-color: var(--f-p);
}
/*50 Company*/
.nav-folder-title[data-path="50 Company"] {
color: var(--f-f);
background: var(--f-lb) !important;
border-bottom: 2px solid var(--f-lb);
}
.nav-folder-title[data-path*="50 Company"],
.nav-folder-title[data-path*="50 Company"] + .nav-folder-children,
.nav-file-title[data-path*="50 Company"] {
border-left: 3px solid var(--f-lb);
margin-left: 8px;
}
.nav-folder-title[data-path*="50 Company"]:hover,
.nav-folder-title[data-path*="50 Company"] + .nav-folder-children:hover,
.nav-file-title[data-path*="50 Company"]:hover {
border-color: var(--f-lb);
}
/*Github Pages*/
.nav-folder-title[data-path="GithubPages"] {
color: var(--f-f);
background: var(--f-frst) !important;
border-bottom: 2px solid var(--f-frst);
}
.nav-folder-title[data-path*="GithubPages"],
.nav-folder-title[data-path*="GithubPages"] + .nav-folder-children,
.nav-file-title[data-path*="GithubPages"] {
border-left: 3px solid var(--f-frst);
margin-left: 8px;
}
.nav-folder-title[data-path*="GithubPages"]:hover,
.nav-folder-title[data-path*="GithubPages"] + .nav-folder-children:hover,
.nav-file-title[data-path*="GithubPages"]:hover {
border-color: var(--f-frst);
}
Graph edits
This is a method to change the colour of “attachments” in the graph view. You can investigate and find other node names to change as well.
1
2
3
4
/* https://forum.obsidian.md/t/is-there-a-way-to-change-the-color-of-the-nodes-in-graph-view/8271 */
.theme-dark .graph-view.color-fill-attachment {
color: #d8dee9;
}
Hide meta-data header in preview
This hides the “Meta Data” header caused by FrontMatter when in the Reading view
1
2
3
.frontmatter-container {
display: none;
}
Hide URL Icon
When using external links in Obsidian they have an arrow denoting such, this hides it.
1
2
3
4
body .external-link {
background-image: none;
padding-right: 0px;
}
Highlighter
I expanded this existing snippet to add additional colours.
To use the highlighter functions see below:
1
2
3
4
5
==Yellow==
<mark class='pink'>pink</mark>
<mark class='green'>green</mark>
<mark class='blue'>blue</mark>
<mark class='red'>red</mark>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
body{
--fluro-yellow-rgb: 255, 255, 0;
--fluro-pink-rgb: 255, 0, 255;
--fluro-blue-rgb: 0, 255, 255;
--fluro-green-rgb: 0, 255, 0;
--fluro-red-rgb: 255, 0, 0;
--text-highlight-rgb: var(--fluro-yellow-rgb);
}
mark.yellow{ --text-highlight-rgb: var(--fluro-yellow-rgb); }
mark.pink{ --text-highlight-rgb: var(--fluro-pink-rgb); }
mark.blue{ --text-highlight-rgb: var(--fluro-blue-rgb); }
mark.green{ --text-highlight-rgb: var(--fluro-green-rgb); }
mark.red{ --text-highlight-rgb: var(--fluro-red-rgb); }
.markdown-preview-view mark {
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(105deg,
transparent 0,
transparent 0.3em,
rgba(var(--text-highlight-rgb), 0.7) 0.5em,
rgba(var(--text-highlight-rgb), 0.4) 1.6em,
rgba(var(--text-highlight-rgb), 0.4) calc(100% - 1.4em),
rgba(var(--text-highlight-rgb), 0.7) calc(100% - 0.5em),
transparent calc(100% - 0.3em),
transparent 100%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: 0 0 0.75em var(--background-primary-alt);
}
.cm-s-obsidian span.cm-highlight {
padding:0.1em 0;
background: rgba(var(--text-highlight-rgb), 0.4);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: 0 0 0.75em var(--background-primary-alt);
}
.cm-s-obsidian span.cm-formatting-highlight{
margin: 0 0 0 -0.4em;
padding: 0.1em 0 0.1em 0.4em;
border-radius: 0.8em 0 0 0.4em;
background: none;
background-image: linear-gradient(105deg,
transparent 0,
transparent 0.3em,
rgba(var(--text-highlight-rgb), 0.7) 0.5em,
rgba(var(--text-highlight-rgb), 0.4) 1.6em);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.cm-s-obsidian .cm-highlight+span.cm-formatting-highlight {
margin: 0 -0.4em 0 0;
padding: 0.1em 0.4em 0.1em 0;
border-radius: 0 0.4em 0.8em 0;
background: none;
background-image: linear-gradient(105deg,
rgba(var(--text-highlight-rgb), 0.4) calc(100% - 1.4em),
rgba(var(--text-highlight-rgb), 0.7) calc(100% - 0.5em),
transparent calc(100% - 0.3em),
transparent 100%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Require hovering to see scrollbars
I did not want to fully hide scrollbars with a plugin like Hider but I also didnt want to see them all the time. I found this snippet somewhere that makes them hide until you hover over them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
::-webkit-scrollbar {
visibility: hidden;
background-color: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb {
visibility: hidden;
}
::-webkit-scrollbar:hover {
visibility: initial;
}
::-webkit-scrollbar-thumb:hover {
visibility: initial;
}
Minimal Checkboxes
I wanted to have more than just checkmarks possible in my checkboxes and after much struggling I arrived at this nice solution that works for Live Preview and Read view in Minimal theme (only).
Sadly with Minimal 5.1.8 Kepano added his own checkmarks that make these render incorrectly. These are now for historical reference and inspiration of other tweakers.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/* nord colors from another snippet
.theme-dark {
--f-f: #3b4252;
--f-r: #bf616a;
--f-o: #d08770;
--f-y: #ebcb8b;
--f-g: #a3be8c;
--f-p: #b48ead;
--f-sg: #8fbcbb;
--f-lb: #88c0d0;
--f-frst: #81a1c1;
--f-b: #5e81ac;
}
*/
/* Checkbox things */
/* bring back strikethrough for completed tasks */
body:not(.minimal-strike-lists) .markdown-preview-view ul > li[data-task="x"].task-list-item.is-checked {
text-decoration: line-through;
}
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] span {
text-decoration: line-through;
}
/*
? mark boxes
*/
/* this only controls the text */
.markdown-preview-view li[data-task='?'] > .task-list-item-checkbox:checked::before,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] span {
text-decoration: none;
}
/* this controls the checkbox image */
input[data-task='?'].task-list-item-checkbox:checked,
.markdown-preview-view li[data-task='?'] > .task-list-item-checkbox:checked::before {
border: var(--f-y);
background-color: var(--f-y) !important;
background-image: url('https://api.iconify.design/el/question.svg?color=white') !important;
}
/* preview */
.markdown-preview-view li[data-task='?'] > input[type=checkbox]:checked {
border: var(--f-y);
background-color: var(--f-y) !important;
background-image: url('https://api.iconify.design/el/question.svg?color=white') !important;
}
/*
> mark boxes
*/
/* this only controls the text */
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] span {
text-decoration: none;
}
/* this controls the checkbox image */
/* https://icon-sets.iconify.design/mdi/arrow-right-thick/ */
input[data-task='>'].task-list-item-checkbox:checked,
.makdown-preview-view li[data-task='>'] > .task-list-item-checkbox:checked::before {
border: var(--f-o);
background-color: var(--f-o) !important;
background-image: url('https://api.iconify.design/mdi/arrow-right-thick.svg?color=white') !important;
}
/* preview */
.markdown-preview-view li[data-task='>'] > input[type=checkbox]:checked {
border: var(--f-o);
background-color: var(--f-o) !important;
background-image: url('https://api.iconify.design/mdi/arrow-right-thick.svg?color=white') !important;
}
/*
- mark boxes
*/
/* this only controls the text */
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] span {
text-decoration: none;
}
/* this controls the checkbox image */
/* https://icon-sets.iconify.design/mdi/close-thick/ */
input[data-task='-'].task-list-item-checkbox:checked,
.markdown-preview-view li[data-task='-'] > .task-list-item-checkbox:checked::before {
border: var(--f-r);
background-color: var(--f-r) !important;
background-image: url('https://api.iconify.design/mdi/close-thick.svg?color=white') !important;
}
/* preview */
.markdown-preview-view li[data-task='-'] > input[type=checkbox]:checked {
border: var(--f-r);
background-color: var(--f-r) !important;
background-image: url('https://api.iconify.design/mdi/close-thick.svg?color=white') !important;
}
/*
! mark boxes
*/
/* this only controls the text */
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] span {
text-decoration: none;
}
/* this controls the checkbox image */
/* https://icon-sets.iconify.design/mdi/exclamation-thick/ */
input[data-task='!'].task-list-item-checkbox:checked,
.markdown-preview-view li[data-task='!'] > .task-list-item-checkbox:checked::before {
border: var(--f-lb);
background-color: var(--f-lb) !important;
background-image: url('https://api.iconify.design/mdi/exclamation-thick.svg?color=red') !important;
}
/* preview */
.markdown-preview-view li[data-task='!'] > input[type=checkbox]:checked {
border: var(--f-lb);
background-color: var(--f-lb) !important;
background-image: url('https://api.iconify.design/mdi/exclamation-thick.svg?color=red') !important;
}
Minimal edits
Kepano really wants you to use the Minimal Settings and Style Settings plugins for managing minimal, but I started out and continue to use CSS to get my changes made. This handles Headers, base color (makes it Nord) and minor edits to the Title of pages.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
:root {
/*----------------------------------------------------------------
Colors
Most colors in this theme are driven from the following values,
meaning that the backgrounds, borders, and various shades are
automatically generated for you.
- Base color is used for the backgrounds, text and borders.
- Accent color is used for links and some interactive elements.
The colors use HSL (hue, saturation, lightness)
- Hue (0-360 degrees):0 is red, 120 is green, and 240 is blue
- Saturation (0-100%):0% is desaturated, 100% is full saturation
- Lightness (0-100%):0% is black, 100% is white
*/
--base-h:220; /* Base hue */
--base-s:16%; /* Base saturation */
--base-d:22%; /* Base lightness Dark Mode - 0 is black */
/* As of 4.4.8 you also need to define --base-l in .theme-dark below otherwise a 15% overwrites it */
--base-l:22%; /* Base lightness Light Mode - 100 is white */
--accent-h:210; /* Accent hue */
--accent-s:34%; /* Accent saturation */
--accent-d:63%; /* Accent lightness Dark Mode */
--accent-l:63%; /* Accent lightness Light Mode */
--h1:2.00em;
--h2:1.75em;
--h3:1.50em;
--h4:1.25em;
--h5:1.00em;
--h6:1.00em;
--h1-weight:600;
--h2-weight:600;
--h3-weight:500;
--h4-weight:500;
--h5-weight:500;
--h6-weight:400;
--h1-variant:normal;
--h2-variant:normal;
--h3-variant:normal;
--h4-variant:normal;
--h5-variant:small-caps;
--h6-variant:small-caps;
--h1-color:var(--text-normal);
--h2-color:var(--text-normal);
--h3-color:var(--text-normal);
--h4-color:var(--text-normal);
--h5-color:var(--text-normal);
--h6-color:var(--text-muted);
--font-normal:12px;
--font-small:10px;
--font-smaller:9px;
--font-smallest:8px;
--font-title:1em;
--font-monospace:"Hack Nerd Font";
}
.theme-dark {
--base-l:22%;
}
/* Title fix */
.view-header-title {
color: var(--text-faint) !important;
font-weight: var(--weight-normal);
}
.view-header-title-container {
padding-left: 1em;
margin: 0;
}
Do not colour internal links
I made this for someone else and kept it around for reference. It removes the colour from (sets it to white) internal links. It also strips formatting from H1 where they were using internal links.
1
2
3
4
5
6
7
8
9
10
11
.cm-hmd-internal-link .cm-underline {
color: white;
opacity: 100;
}
.markdown-preview-view .internal-link {
color: white;
opacity: 100;
}
:root {
h1:text-decoration: none;
}
Do not underline internal links
I like this, it removes underlining from internal links and leaves just the colour intact.
1
2
3
4
5
6
.cm-hmd-internal-link .cm-underline {
text-decoration: none !important;
}
.markdown-preview-view .internal-link {
text-decoration: none !important;
}
Nord calendar
These are some minor colour edits to the Calendar plugin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* obsidian-calendar-plugin */
/* https://github.com/liamcain/obsidian-calendar-plugin */
#calendar-container {
--color-background-heading: transparent;
--color-background-day: transparent;
--color-background-weeknum: transparent;
--color-background-weekend: transparent;
--color-dot: #81a1c1;
--color-arrow: var(--text-muted);
--color-button: var(--text-muted);
--color-text-title: var(--text-normal);
--color-text-heading: var(--text-normal);
--color-text-day: var(--text-normal);
--color-text-today: var(--interactive-accent);
--color-text-weeknum: #ebcb8b;
}
Nord inline code colour
This is a method to change the colour on inline code. This kind of code
1
2
3
4
5
6
7
8
9
10
11
12
/* This makes code blocks a better color, red is default */
.cm-s-obsidian .HyperMD-codeblock {
color: #8fbcbb;
}
.cm-s-obsidian span.cm-inline-code {
color: #8fbcbb;
}
.markdown-preview-view code {
color: #8fbcbb;
}
Red unresolved links
I want every link I make to exist, so I make any that don’t exist bright red.
1
2
3
4
5
6
7
8
.is-unresolved .cm-hmd-internal-link .cm-underline {
color: FireBrick;
opacity: 100;
}
.markdown-preview-view .internal-link.is-unresolved {
color: FireBrick;
opacity: 100;
}
Tag multi colours
I copied this for someone to make some minor edits and keep it for reference. It is a method to colour named tags to accomplish various things.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Colour tag pills based on name in LP and Read modes */
/* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13 */
/* There is extra code I removed from this snippet that is in the source */
/* Obsidian */
.tag[href^="#obsidian"] {
background-color: #4d3ca6;
}
.cm-s-obsidian span.cm-hashtag.cm-tag-obsidian {
background-color: #4d3ca6;
}
/* Important */
.tag[href^="#important"] {
background-color: red;
}
.cm-s-obsidian span.cm-hashtag.cm-tag-important {
background-color: red;
}
/* Complete */
.tag[href^="#complete"] {
background-color: green;
}
.cm-s-obsidian span.cm-hashtag.cm-tag-complete {
background-color: green;
}
/* InProgress */
.markdown-preview-view .tag[href^="#inprogress"] {
background-color: orange;
}
.cm-s-obsidian span.cm-hashtag.cm-tag-inprogress {
background-color: orange;
}
Tag same colour
This, like the above, is for reference. It changes the colour of all pill tags.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.cm-s-obsidian div:not(.cm-active) > .cm-hashtag {
background-color: #027aff;
color: #ffffff;
font-size: 14px;
text-align: center;
}
.tag:not(.token) {
background-color: #027aff;
border: none;
color: #ffffff;
font-size: 14px;
text-align: center;
display: inline-block;
margin: 0px 3px;
cursor: pointer;
}
.tag:not(.token):hover {
color: #ffffff;
background-color: #5E839A;
}
Embed Fixes
Hides H1 headers in Embeds, something that bugs me when I embed notes.
1
2
3
4
5
6
.markdown-preview-view .markdown-embed h1 {
display: none;
}
.markdown-source-view.mod-cm6 .markdown-embed h1 {
display: none;
}
Hide Comments in Live Preview
1
2
3
.is-live-preview .cm-comment {
display: none;
}