.obsidian/themes/Obsidian Nord/theme.css14.9 KB
1
2
:root3
{4
--dark0_x: 46,52,64; /* #2e3440 */5
--dark0: rgb(var(--dark0_x));6
--dark1_x: 59,66,82; /* #3b4252 */7
--dark1: rgb(var(--dark1_x));8
--dark2_x: 67,76,94; /* #434c5e */9
--dark2: rgb(var(--dark2_x));10
--dark3_x: 76,86,106; /* #4c566a */11
--dark3: rgb(var(--dark3_x));12
13
--light0_x: 216,222,233; /* #d8dee9 */14
--light0: rgb(var(--light0_x));15
--light1_x: 229,233,240; /* #e5e9f0 */16
--light1: rgb(var(--light1_x));17
--light2_x: 236,239,244; /* #eceff4 */18
--light2: rgb(var(--light2_x));19
--light3_x: 255,255,255; /* #ffffff */20
--light3: rgb(var(--light3_x));21
22
--frost0_x: 143,188,187; /* #8fbcbb */23
--frost0: rgb(var(--frost0_x));24
--frost1_x: 136,192,208; /* #88c0d0 */25
--frost1: rgb(var(--frost1_x));26
--frost2_x: 129,161,193; /* #81a1c1 */27
--frost2: rgb(var(--frost2_x));28
--frost3_x: 94,129,172; /* #5e81ac */29
--frost3: rgb(var(--frost3_x));30
31
--red_x: 191,97,106; /* #bf616a */32
--red: rgb(var(--red_x));33
--orange_x: 208,135,112; /* #d08770 */34
--orange: rgb(var(--orange_x));35
--yellow_x: 235,203,139; /* #ebcb8b */36
--yellow: rgb(var(--yellow_x));37
--green_x: 163,190,140; /* #a3be8c */38
--green: rgb(var(--green_x));39
--purple_x: 180,142,173; /* #b48ead */40
--purple: rgb(var(--purple_x));41
}42
43
body44
{45
--accent-h: 354; /* --red #bf616a */46
--accent-s: 42%;47
--accent-l: 56%;48
49
--link-decoration: none;50
--link-decoration-hover: none;51
--link-external-decoration: none;52
--link-external-decoration-hover: none;53
54
--tag-decoration: none;55
--tag-decoration-hover: underline;56
--tag-padding-x: .5em;57
--tag-padding-y: .2em;58
--tag-radius: .5em;59
60
--tab-font-weight: 600;61
--bold-weight: 600;62
63
--checkbox-radius: 0;64
65
/* --list-indent: 2em; */66
67
--embed-border-left: 6px double var(--interactive-accent);68
}69
70
.theme-dark71
{72
--color-red-rgb: var(--red_x);73
--color-red: var(--red);74
--color-purple-rgb: var(--purple_x);75
--color-purple: var(--purple);76
--color-green-rgb: var(--green_x);77
--color-green: var(--green);78
--color-cyan-rgb: var(--frost1_x);79
--color-cyan: var(--frost1);80
--color-blue-rgb: var(--frost3_x);81
--color-blue: var(--frost3);82
--color-yellow-rgb: var(--yellow_x);83
--color-yellow: var(--yellow);84
--color-orange-rgb: var(--orange_x);85
--color-orange: var(--orange);86
/* --color-pink: var(--purple); */87
88
--background-primary: var(--dark0);89
--background-primary-alt: var(--dark0);90
--background-secondary: var(--dark1);91
--background-secondary-alt: var(--dark2);92
--background-modifier-border: var(--dark2);93
94
--cursor-line-background: rgba(var(--red_x), 0.2);95
96
--text-normal: var(--light2);97
--text-faint: var(--light0);98
--text-muted: var(--light1);99
100
--link-url: var(--purple);101
102
--h1-color: var(--red);103
--h2-color: var(--yellow);104
--h3-color: var(--green);105
--h4-color: var(--purple);106
--h5-color: var(--frost0);107
--h6-color: var(--frost2);108
109
--text-highlight-bg: var(--frost1);110
--text-highlight-fg: var(--dark0);111
112
--text-accent: var(--orange);113
--text-accent-hover: var(--frost2);114
115
--tag-color: var(--frost0);116
--tag-background: var(--dark2);117
--tag-background-hover: var(--dark1);118
119
--titlebar-text-color-focused: var(--red);120
121
--inline-title-color: var(--yellow);122
123
--bold-color: var(--yellow);124
--italic-color: var(--yellow);125
126
--checkbox-color: var(--frost0);127
--checkbox-color-hover: var(--frost0);128
--checkbox-border-color: var(--frost0);129
--checkbox-border-color-hover: var(--frost0);130
--checklist-done-color: rgba(var(--light2_x), 0.5);131
132
--table-header-background: hsl(220, 16%, 16%);133
--table-header-background-hover: var(--dark3);134
--table-row-even-background: hsl(220, 16%, 20%);135
--table-row-odd-background: hsl(220, 16%, 24%);136
--table-row-background-hover: var(--dark3);137
138
--text-selection: rgba(var(--red_x), 0.6);139
--flashing-background: rgba(var(--red_x), 0.3);140
141
--code-normal: var(--frost1);142
--code-background: var(--dark1);143
144
--mermaid-note: var(--frost3);145
--mermaid-loopline: var(--frost1);146
--mermaid-exclude: var(--dark3);147
--mermaid-seqnum: var(--dark0);148
149
--icon-color-hover: var(--red);150
--icon-color-focused: var(--frost2);151
152
--nav-item-color-hover: var(--red);153
--nav-item-color-active: var(--frost2);154
--nav-file-tag: rgba(var(--yellow_x), 0.9);155
156
--graph-line: var(--dark3);157
--graph-node: var(--light3);158
--graph-node-tag: var(--red);159
--graph-node-attachment: var(--green);160
161
--calendar-hover: var(--red);162
--calendar-background-hover: var(--dark3);163
--calendar-week: var(--yellow);164
--calendar-today: var(--yellow);165
166
--dataview-key: var(--text-faint);167
--dataview-key-background: rgba(var(--frost2_x), 0.3);168
--dataview-value: var(--text-faint);169
--dataview-value-background: rgba(var(--red_x), 0.3);170
171
--tab-text-color-focused-active: var(--frost2);172
--tab-text-color-focused-active-current: var(--red);173
}174
175
.theme-light176
{177
--color-red-rgb: var(--red_x);178
--color-red: var(--red);179
--color-purple-rgb: var(--purple_x);180
--color-purple: var(--purple);181
--color-green-rgb: var(--green_x);182
--color-green: var(--green);183
--color-cyan-rgb: var(--frost1_x);184
--color-cyan: var(--frost1);185
--color-blue-rgb: var(--frost3_x);186
--color-blue: var(--frost3);187
--color-yellow-rgb: var(--yellow_x);188
--color-yellow: var(--yellow);189
--color-orange-rgb: var(--orange_x);190
--color-orange: var(--orange);191
/* --color-pink: var(--purple); */192
193
--background-primary: var(--light3);194
--background-primary-alt: var(--light3);195
--background-secondary: var(--light2);196
--background-secondary-alt: var(--light1);197
--background-modifier-border: var(--light1);198
199
--cursor-line-background: rgba(var(--red_x), 0.1);200
201
--text-normal: var(--dark2);202
--text-faint: var(--dark0);203
--text-muted: var(--dark1);204
205
--link-url: var(--purple);206
207
--h1-color: var(--red);208
--h2-color: var(--yellow);209
--h3-color: var(--green);210
--h4-color: var(--purple);211
--h5-color: var(--frost0);212
--h6-color: var(--frost2);213
214
--text-highlight-bg: var(--yellow);215
--text-highlight-fg: var(--dark0);216
217
--text-accent: var(--orange);218
--text-accent-hover: var(--frost2);219
220
--tag-color: var(--dark3);221
--tag-background: var(--light1);222
--tag-background-hover: var(--light0);223
224
--titlebar-text-color-focused: var(--red);225
226
--inline-title-color: var(--yellow);227
228
--bold-color: var(--green);229
--italic-color: var(--green);230
231
--checkbox-color: var(--frost2);232
--checkbox-color-hover: var(--frost2);233
--checkbox-border-color: var(--frost2);234
--checkbox-border-color-hover: var(--frost2);235
--checklist-done-color: rgba(var(--dark2_x), 0.4);236
237
--table-header-background: rgba(var(--light2_x), 0.2);238
--table-header-background-hover: var(--frost2);239
--table-row-even-background: rgba(var(--light2_x), 0.4);240
--table-row-odd-background: rgba(var(--light2_x), 0.8);241
--table-row-background-hover: var(--frost2);242
243
--text-selection: rgba(var(--red_x), 0.6);244
--flashing-background: rgba(var(--red_x), 0.3);245
246
--code-normal: var(--frost1);247
--code-background: var(--light2);248
249
--mermaid-note: var(--frost0);250
--mermaid-loopline: var(--frost1);251
--mermaid-exclude: var(--light0);252
--mermaid-seqnum: var(--light0);253
254
--icon-color-hover: var(--red);255
--icon-color-focused: var(--frost3);256
257
--nav-item-color-hover: var(--red);258
--nav-item-color-active: var(--frost2);259
--nav-file-tag: rgba(var(--orange_x), 0.9);260
261
--graph-line: var(--light0);262
--graph-node: var(--dark3);263
--graph-node-tag: var(--red);264
--graph-node-attachment: var(--green);265
266
--calendar-hover: var(--red);267
--calendar-background-hover: var(--light0);268
--calendar-week: var(--orange);269
--calendar-today: var(--orange);270
271
--dataview-key: var(--text-faint);272
--dataview-key-background: rgba(var(--frost2_x), 0.3);273
--dataview-value: var(--text-faint);274
--dataview-value-background: rgba(var(--red_x), 0.3);275
276
--tab-text-color-focused-active: var(--frost2);277
--tab-text-color-focused-active-current: var(--red);278
}279
280
table281
{282
border: 1px solid var(--background-secondary) !important;283
border-collapse: collapse;284
}285
286
thead287
{288
border-bottom: 2px solid var(--background-modifier-border) !important;289
}290
291
th292
{293
font-weight: 600 !important;294
border: 1px solid var(--background-secondary) !important;295
}296
297
td298
{299
border-left: 1px solid var(--background-secondary) !important;300
border-right: 1px solid var(--background-secondary) !important;301
border-bottom: 1px solid var(--background-secondary) !important;302
}303
304
.markdown-rendered tbody tr:nth-child(even)305
{306
background-color: var(--table-row-even-background) !important;307
}308
309
.markdown-rendered tbody tr:nth-child(odd)310
{311
background-color: var(--table-row-odd-background) !important;312
}313
314
.markdown-rendered tbody tr:nth-child(even):hover,315
.markdown-rendered tbody tr:nth-child(odd):hover316
{317
background-color: var(--table-row-background-hover) !important;318
}319
320
.markdown-rendered mark321
{322
background-color: var(--text-highlight-bg);323
color: var(--text-highlight-fg);324
}325
326
.markdown-rendered mark a327
{328
color: var(--red) !important;329
font-weight: 600;330
}331
332
.search-result-file-matched-text333
{334
color: var(--text-highlight-fg) !important;335
}336
337
.cm-hashtag-begin:hover, .cm-hashtag-end:hover338
{339
color: var(--text-accent);340
/* background-color: var(--tag-background-hover); */341
text-decoration: underline;342
}343
344
input[type=checkbox]345
{346
border: 1px solid var(--checkbox-color);347
}348
349
input[type=checkbox]:checked350
{351
background-color: var(--checkbox-color);352
box-shadow: inset 0 0 0 2px var(--background-primary);353
}354
355
input[type=checkbox]:checked:after356
{357
display: none;358
}359
360
code[class*="language-"],361
pre[class*="language-"]362
{363
line-height: var(--line-height-tight) !important;364
}365
366
.cm-url367
{368
color: var(--link-url) !important;369
}370
371
.cm-url:hover372
{373
color: var(--text-accent-hover) !important;374
}375
376
/* Keep highlight/marks the same between viewer and editor. */377
.cm-highlight378
{379
color: var(--text-highlight-fg) !important;380
}381
382
/* Keep inline code the same between viewer and editor. */383
.cm-inline-code384
{385
border-radius: var(--radius-s);386
font-size: var(--code-size);387
padding: 0.1em 0.25em;388
}389
390
.cm-formatting-code + .cm-inline-code391
{392
border-radius: 0;393
padding: 0.1em 0;394
}395
396
.cm-formatting-code397
{398
border-radius: var(--radius-s) 0 0 var(--radius-s);399
padding: 0.1em 0 0.1em 0.25em;400
}401
402
.cm-inline-code + .cm-formatting-code403
{404
border-radius: 0 var(--radius-s) var(--radius-s) 0;405
padding: 0.1em 0.25em 0.1em 0;406
}407
408
.cm-line .cm-strong409
{410
color: var(--bold-color) !important;411
}412
413
/*414
* Keep list bullet padding the same between viewer and editor.415
* This is annoying with the cursor in the editor as there is a gap.416
*/417
/*418
.cm-formatting-list419
{420
padding-right: 4px !important;421
}422
*/423
424
/*425
* Keep sub-list indenting the same between viewer and editor.426
* This assumes --list-indent is default at 2em.427
*/428
/*429
.cm-indent 430
{431
text-indent: 1em !important;432
}433
*/434
435
.mermaid .note436
{437
fill: var(--mermaid-note) !important;438
}439
440
.mermaid .loopLine441
{442
stroke: var(--mermaid-loopline) !important;443
}444
445
.mermaid .loopText>tspan,446
.mermaid .entityLabel447
{448
fill: var(--red) !important;449
}450
451
.mermaid .exclude-range452
{453
fill: var(--mermaid-exclude) !important;454
}455
456
.mermaid .sequenceNumber457
{458
fill: var(--mermaid-seqnum) !important;459
}460
461
.calendar .week-num462
{463
color: var(--calendar-week) !important;464
}465
466
.calendar .today467
{468
color: var(--calendar-today) !important;469
}470
471
.calendar .week-num:hover,472
.calendar .day:hover473
{474
color: var(--calendar-hover) !important;475
background-color: var(--calendar-background-hover) !important;476
}477
478
.markdown-embed-title479
{480
color: var(--yellow);481
font-weight: 600 !important;482
}483
484
.cm-active485
{486
background-color: var(--cursor-line-background) !important;487
}488
489
.nav-file-tag490
{491
color: var(--nav-file-tag) !important;492
}493
494
.is-flashing495
{496
background-color: var(--flashing-background) !important;497
}498
499
.dataview.inline-field-key500
{501
border-top-left-radius: var(--radius-s);502
border-bottom-left-radius: var(--radius-s);503
padding-left: 4px;504
font-family: var(--font-monospace);505
font-size: var(--font-smaller);506
color: var(--dataview-key) !important;507
background-color: var(--dataview-key-background) !important;508
}509
510
.dataview.inline-field-value511
{512
border-top-right-radius: var(--radius-s);513
border-bottom-right-radius: var(--radius-s);514
padding-right: 4px;515
font-family: var(--font-monospace);516
font-size: var(--font-smaller);517
color: var(--dataview-value) !important;518
background-color: var(--dataview-value-background) !important;519
}520
521
.suggestion-highlight522
{523
color: var(--red);524
}525
526