/* 'Covert' Obsidian Theme is built on 'Obsidian Nord' https://github.com/insanum/obsidian_nord by Insanum. I've commented on some of the colors below, and what areas they affect.*/ :root { --dark0_x: 33, 34, 36; /* body background */ --dark0: rgb(var(--dark0_x)); --dark1_x: 33, 34, 36; /* sidebar and header background */ --dark1: rgb(var(--dark1_x)); --dark2_x: 45, 45, 46; /* borders and body tag background */ --dark2: rgb(var(--dark2_x)); --dark3_x: 76,86,106; /* #4c566a */ --dark3: rgb(var(--dark3_x)); --dark4_x: 33, 34, 36; /* body tag background */ --dark4: rgb(var(--dark3_x)); --light0_x: 97, 96, 96; /* tabs and footnotes */ --light0: rgb(var(--light0_x)); --light1_x: 97, 96, 96; /* folder, current tab, footer icons */ --light1: rgb(var(--light1_x)); --light2_x: 97, 96, 96; /* #2d2d2e */ --light2: rgb(var(--light2_x)); --light3_x: 97, 96, 96; /* #ffffff */ --light3: rgb(var(--light3_x)); --frost0_x: 97, 96, 96; /* tag text */ --frost0: rgb(var(--frost0_x)); --frost1_x: 97, 96, 96; /* #88c0d0 */ --frost1: rgb(var(--frost1_x)); --frost2_x: 97, 96, 96; /* selected folder and folder icon color */ --frost2: rgb(var(--frost2_x)); --frost3_x: 94,129,172; /* #5e81ac */ --frost3: rgb(var(--frost3_x)); --red_x: 97, 96, 96; /* tag background hover */ --red: rgb(var(--red_x)); --orange_x: 208,135,112; /* #d08770 */ --orange: rgb(var(--orange_x)); --yellow_x: 235,203,139; /* #ebcb8b */ --yellow: rgb(var(--yellow_x)); --green_x: 163,190,140; /* #a3be8c */ --green: rgb(var(--green_x)); --purple_x: 180,142,173; /* #b48ead */ --purple: rgb(var(--purple_x)); } body { --accent-h: 354; /* --red #bf616a */ --accent-s: 42%; --accent-l: 56%; --link-decoration: none; --link-decoration-hover: none; --link-external-decoration: none; --link-external-decoration-hover: none; --tag-decoration: none; --tag-decoration-hover: underline; --tag-padding-x: .5em; --tag-padding-y: .2em; --tag-radius: .5em; --tab-font-weight: 600; --bold-weight: 600; --checkbox-radius: 0; /* --list-indent: 2em; */ --embed-border-left: 6px double var(--interactive-accent); } .theme-dark { --color-red-rgb: var(--red_x); --color-red: var(--red); --color-purple-rgb: var(--purple_x); --color-purple: var(--purple); --color-green-rgb: var(--green_x); --color-green: var(--green); --color-cyan-rgb: var(--frost1_x); --color-cyan: var(--frost1); --color-blue-rgb: var(--frost3_x); --color-blue: var(--frost3); --color-yellow-rgb: var(--yellow_x); --color-yellow: var(--yellow); --color-orange-rgb: var(--orange_x); --color-orange: var(--orange); /* --color-pink: var(--purple); */ --background-primary: var(--dark0); --background-primary-alt: var(--dark0); --background-secondary: var(--dark1); --background-secondary-alt: var(--dark2); --background-modifier-border: var(--dark2); --cursor-line-background: rgba(var(--dark0), 0.5); --text-normal: var(--light2); --text-faint: var(--light0); --text-muted: var(--light1); --h1-color: var(--red); --h2-color: var(--yellow); --h3-color: var(--green); --h4-color: var(--purple); --h5-color: var(--frost0); --h6-color: var(--frost2); --text-highlight-bg: var(--frost1); --text-highlight-fg: var(--dark0); --text-accent: var(--orange); --text-accent-hover: var(--frost2); --tag-color: var(--dark4); --tag-background: var(--dark1); --tag-background-hover: var(--dark1); --titlebar-text-color-focused: var(--red); --inline-title-color: var(--yellow); --bold-color: var(--yellow); --italic-color: var(--yellow); --checkbox-color: var(--frost0); --checkbox-color-hover: var(--frost0); --checkbox-border-color: var(--frost0); --checkbox-border-color-hover: var(--frost0); --checklist-done-color: rgba(var(--light2_x), 0.5); --table-header-background: hsl(240, 1%, 21%); --table-header-background-hover: hsl(240, 1%, 21%); --table-row-even-background: hsl(30, 2%, 19%); --table-row-odd-background: hsl(180, 3%, 16%); --table-row-background-hover: var(--dark3); --text-selection: rgba(var(--red_x), 0.6); --flashing-background: rgba(var(--red_x), 0.3); --code-normal: var(--frost1); --code-background: var(--dark1); --mermaid-note: var(--frost3); --mermaid-loopline: var(--frost1); --icon-color-hover: var(--red); --icon-color-focused: var(--frost2); --nav-item-color-hover: var(--red); --nav-item-color-active: var(--frost2); --nav-file-tag: rgba(var(--yellow_x), 0.9); --graph-line: var(--dark3); --graph-node: var(--light3); --graph-node-tag: var(--red); --graph-node-attachment: var(--green); --calendar-hover: var(--red); --calendar-background-hover: var(--dark3); --calendar-week: var(--yellow); --calendar-today: var(--yellow); --dataview-key: var(--text-faint); --dataview-key-background: rgba(var(--frost2_x), 0.3); --dataview-value: var(--text-faint); --dataview-value-background: rgba(var(--red_x), 0.3); --tab-text-color-focused-active: var(--frost2); --tab-text-color-focused-active-current: var(--red); } .theme-light { --color-red-rgb: var(--red_x); --color-red: var(--red); --color-purple-rgb: var(--purple_x); --color-purple: var(--purple); --color-green-rgb: var(--green_x); --color-green: var(--green); --color-cyan-rgb: var(--frost1_x); --color-cyan: var(--frost1); --color-blue-rgb: var(--frost3_x); --color-blue: var(--frost3); --color-yellow-rgb: var(--yellow_x); --color-yellow: var(--yellow); --color-orange-rgb: var(--orange_x); --color-orange: var(--orange); /* --color-pink: var(--purple); */ --background-primary: var(--light3); --background-primary-alt: var(--light3); --background-secondary: var(--light2); --background-secondary-alt: var(--light1); --background-modifier-border: var(--light1); --cursor-line-background: rgba(var(--light0_x), 0.2); --text-normal: var(--dark2); --text-faint: var(--dark0); --text-muted: var(--dark1); --h1-color: var(--red); --h2-color: var(--yellow); --h3-color: var(--green); --h4-color: var(--purple); --h5-color: var(--frost0); --h6-color: var(--frost2); --text-highlight-bg: var(--yellow); --text-highlight-fg: var(--dark0); --text-accent: var(--orange); --text-accent-hover: var(--frost2); --tag-color: var(--dark3); --tag-background: var(--light1); --tag-background-hover: var(--light0); --titlebar-text-color-focused: var(--red); --inline-title-color: var(--yellow); --bold-color: var(--green); --italic-color: var(--green); --checkbox-color: var(--frost2); --checkbox-color-hover: var(--frost2); --checkbox-border-color: var(--frost2); --checkbox-border-color-hover: var(--frost2); --checklist-done-color: rgba(var(--dark2_x), 0.4); --table-header-background: rgba(var(--light2_x), 0.2); --table-header-background-hover: var(--frost2); --table-row-even-background: rgba(var(--light2_x), 0.4); --table-row-odd-background: rgba(var(--light2_x), 0.8); --table-row-background-hover: var(--frost2); --text-selection: rgba(var(--red_x), 0.6); --flashing-background: rgba(var(--red_x), 0.3); --code-normal: var(--frost1); --code-background: var(--light2); --mermaid-note: var(--frost0); --mermaid-loopline: var(--frost1); --icon-color-hover: var(--red); --icon-color-focused: var(--frost3); --nav-item-color-hover: var(--red); --nav-item-color-active: var(--frost2); --nav-file-tag: rgba(var(--orange_x), 0.9); --graph-line: var(--light0); --graph-node: var(--dark3); --graph-node-tag: var(--red); --graph-node-attachment: var(--green); --calendar-hover: var(--red); --calendar-background-hover: var(--light0); --calendar-week: var(--orange); --calendar-today: var(--orange); --dataview-key: var(--text-faint); --dataview-key-background: rgba(var(--frost2_x), 0.3); --dataview-value: var(--text-faint); --dataview-value-background: rgba(var(--red_x), 0.3); --tab-text-color-focused-active: var(--frost2); --tab-text-color-focused-active-current: var(--red); } table { border: 1px solid var(--background-secondary) !important; border-collapse: collapse; } thead { border-bottom: 2px solid var(--background-modifier-border) !important; } th { font-weight: 600 !important; border: 1px solid var(--background-secondary) !important; } td { border-left: 1px solid var(--background-secondary) !important; border-right: 1px solid var(--background-secondary) !important; border-bottom: 1px solid var(--background-secondary) !important; } .markdown-rendered tbody tr:nth-child(even) { background-color: var(--table-row-even-background) !important; } .markdown-rendered tbody tr:nth-child(odd) { background-color: var(--table-row-odd-background) !important; } .markdown-rendered tbody tr:nth-child(even):hover, .markdown-rendered tbody tr:nth-child(odd):hover { background-color: var(--table-row-background-hover) !important; } .markdown-rendered mark { background-color: var(--text-highlight-bg) !important; color: var(--text-highlight-fg) !important; } .markdown-rendered mark a { color: var(--red) !important; font-weight: 600; } .search-result-file-matched-text { color: var(--text-highlight-fg) !important; } .cm-hashtag-begin:hover, .cm-hashtag-end:hover { color: var(--text-accent); /* background-color: var(--tag-background-hover); */ text-decoration: underline; } input[type=checkbox] { border: 1px solid var(--checkbox-color); } input[type=checkbox]:checked { background-color: var(--checkbox-color); box-shadow: inset 0 0 0 2px var(--background-primary); } input[type=checkbox]:checked:after { display: none; } code[class*="language-"], pre[class*="language-"] { line-height: var(--line-height-tight) !important; } /* Keep highlight/marks the same between viewer and editor. */ .cm-highlight { color: var(--text-highlight-fg) !important; } /* Keep inline code the same between viewer and editor. */ .cm-inline-code { border-radius: var(--radius-s); font-size: var(--code-size); padding: 0.1em 0.25em; } .cm-formatting-code + .cm-inline-code { border-radius: 0; padding: 0.1em 0; } .cm-formatting-code { border-radius: var(--radius-s) 0 0 var(--radius-s); padding: 0.1em 0 0.1em 0.25em; } .cm-inline-code + .cm-formatting-code { border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 0.1em 0.25em 0.1em 0; } /* Keep list bullet padding the same between viewer and editor. */ .cm-formatting-list { padding-right: 4px !important; } /* * Keep sub-list indenting the same between viewer and editor. * This assumes --list-indent is default at 2em. */ /* .cm-indent { text-indent: 1em !important; } */ .mermaid .note { fill: var(--mermaid-note) !important; } .calendar .week-num { color: var(--calendar-week) !important; } .mermaid .loopLine { stroke: var(--mermaid-loopline) !important; } .calendar .today { color: var(--calendar-today) !important; } .calendar .week-num:hover, .calendar .day:hover { color: var(--calendar-hover) !important; background-color: var(--calendar-background-hover) !important; } .markdown-embed-title { color: var(--yellow); font-weight: 600 !important; } .cm-active { background-color: var(--cursor-line-background) !important; } .nav-file-tag { color: var(--nav-file-tag) !important; } .is-flashing { background-color: var(--flashing-background) !important; } .dataview.inline-field-key { border-top-left-radius: var(--radius-s); border-bottom-left-radius: var(--radius-s); padding-left: 4px; font-family: var(--font-monospace); font-size: var(--font-smaller); color: var(--dataview-key) !important; background-color: var(--dataview-key-background) !important; } .dataview.inline-field-value { border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); padding-right: 4px; font-family: var(--font-monospace); font-size: var(--font-smaller); color: var(--dataview-value) !important; background-color: var(--dataview-value-background) !important; } .suggestion-highlight { color: var(--red); } h1, .markdown-rendered h1, .HyperMD-header-1, .HyperMD-list-line .cm-header-1 { color:hsl(60, 1%, 22%); } h2, .markdown-rendered h2, .HyperMD-header-2, .HyperMD-list-line .cm-header-2 { color:hsl(60, 1%, 22%); } h3, .markdown-rendered h3, .HyperMD-header-3, .HyperMD-list-line .cm-header-3 { color:hsl(60, 1%, 22%); } h4, .markdown-rendered h4, .HyperMD-header-4, .HyperMD-list-line .cm-header-4 { color:hsl(60, 1%, 22%); } h5, .markdown-rendered h5, .HyperMD-header-5, .HyperMD-list-line .cm-header-5 { color:hsl(60, 1%, 22%); } h6, .markdown-rendered h6, .HyperMD-header-6, .HyperMD-list-line .cm-header-6 { color:hsl(60, 1%, 22%); } .markdown-source-view.mod-cm6 .is-unresolved { color:hsl(0, 0%, 33%); } i, em, .cm-em { color:hsl(0, 0%, 33%); } b, strong, .cm-strong { font-weight: 600; color:hsl(0, 0%, 33%); } .cm-s-obsidian span.cm-hmd-internal-link { color:hsl(137, 13%, 27%); font-weight: 600; } .cm-s-obsidian span.cm-formatting-link.cm-url, .cm-s-obsidian span.cm-url { color:hsl(137, 13%, 27%); font-weight: 600; } .markdown-preview-view.is-readable-line-width .markdown-preview-sizer { max-width: 90%; margin-left: auto; margin-right: auto; } a{ color:hsl(198, 15%, 26%); font-weight: 600; } .external-link { color:hsl(198, 15%, 26%); font-weight: 600; }