theme.css
1 :root { 2 /* Rosé Pine Color Palette - Updated from .pinkrose class */ 3 --base: #191724; /* sidebar-bg */ 4 --surface: #1f1d2e; /* bg */ 5 --overlay: #26233a; /* theme-popup-bg */ 6 --muted: #6e6a86; /* theme-popup-border */ 7 --subtle: #908caa; /* sidebar-fg */ 8 --text: #e0def4; /* fg */ 9 --love: #eb6f92; /* sidebar-active */ 10 --gold: #f6c177; /* links */ 11 --rose: #ebbcba; /* inline-code-color */ 12 --pine: #31748f; /* icons */ 13 --foam: #9ccfd8; /* icons-hover (no direct match, using closest) */ 14 --iris: #c4a7e7; /* icons-hover */ 15 --highlight-low: #21202e; /* theme-hover */ 16 --highlight-med: #403d52; /* sidebar-spacer */ 17 --highlight-high: #524f67; /* sidebar-non-existant */ 18 19 /* Rosé Pine Dawn Color Palette */ 20 --light-base: #faf4ed; 21 --light-surface: #fffaf3; 22 --light-overlay: #f2e9e1; 23 --light-muted: #9893a5; 24 --light-subtle: #797593; 25 --light-text: #575279; 26 --light-love: #b4637a; 27 --light-gold: #ea9d34; 28 --light-rose: #d7827e; 29 --light-pine: #286983; 30 --light-foam: #56949f; 31 --light-iris: #907aa9; 32 --light-highlight-low: #f4ede8; 33 --light-highlight-med: #dfdad9; 34 --light-highlight-high: #cecacd; 35 } 36 37 .theme-dark { 38 /* Adapted Theme Colors */ 39 --background-primary: var(--base); 40 --background-secondary: var(--surface); 41 --background-modifier-border: var(--overlay); 42 --text-normal: var(--text); 43 --text-muted: var(--muted); 44 --text-accent: var(--love); 45 --text-accent-hover: var(--foam); 46 --tag-color: var(--iris); 47 --tag-background: var(--overlay); 48 --h1-color: var(--love); 49 --h2-color: var(--gold); 50 --h3-color: var(--pine); 51 --h4-color: var(--foam); 52 --h5-color: var(--iris); 53 --h6-color: var(--rose); 54 --code-normal: var(--subtle); 55 --code-background: var(--highlight-low); 56 --text-selection: rgba(49, 116, 143, 0.6); /* --pine */ 57 --flashing-background: rgba(235, 111, 146, 0.3); /* --love */ 58 --link-url: var(--pine); 59 --link-url-hover: var(--iris); 60 --bold-color: var(--subtle); 61 } 62 63 .theme-light { 64 /* Light Theme Colors */ 65 --background-primary: var(--light-base); 66 --background-secondary: var(--light-surface); 67 --background-modifier-border: var(--light-overlay); 68 --text-normal: var(--light-text); 69 --text-muted: var(--light-muted); 70 --text-accent: var(--light-love); 71 --text-accent-hover: var(--light-foam); 72 --tag-color: var(--light-iris); 73 --tag-background: var(--light-overlay); 74 --h1-color: var(--light-love); 75 --h2-color: var(--light-gold); 76 --h3-color: var(--light-pine); 77 --h4-color: var(--light-foam); 78 --h5-color: var(--light-iris); 79 --h6-color: var(--light-rose); 80 --code-normal: var(--light-subtle); 81 --code-background: var(--light-highlight-low); 82 --text-selection: rgba(40, 105, 131, 0.6); /* --light-pine */ 83 --flashing-background: rgba(180, 99, 122, 0.3); /* --light-love */ 84 --link-url: var(--light-pine); 85 --link-url-hover: var(--light-iris); 86 --bold-color: var(--light-subtle); 87 } 88 89 body.theme-dark { 90 background-color: var(--background-primary); 91 color: var(--text-normal); 92 } 93 94 body.theme-light { 95 background-color: var(--background-primary); 96 color: var(--text-normal); 97 } 98 99 /* Headings */ 100 h1 { color: var(--h1-color); } 101 h2 { color: var(--h2-color); } 102 h3 { color: var(--h3-color); } 103 h4 { color: var(--h4-color); } 104 h5 { color: var(--h5-color); } 105 h6 { color: var(--h6-color); } 106 107 /* Links */ 108 a { 109 color: var(--link-url); 110 text-decoration: var(--link-decoration); 111 } 112 a:hover { 113 color: var(--link-url-hover); 114 text-decoration: var(--link-decoration-hover); 115 } 116 117 /* Tags */ 118 .tag { 119 color: var(--tag-color); 120 background-color: var(--tag-background); 121 padding: var(--tag-padding-y) var(--tag-padding-x); 122 border-radius: var(--tag-radius); 123 } 124 .tag:hover { 125 text-decoration: var(--tag-decoration-hover); 126 } 127 128 /* Tables */ 129 table { 130 border: 1px solid var(--background-secondary); 131 border-collapse: collapse; 132 } 133 thead { 134 border-bottom: 2px solid var(--background-modifier-border); 135 } 136 th { 137 font-weight: var(--bold-weight); 138 border: 1px solid var(--background-secondary); 139 } 140 td { 141 border: 1px solid var(--background-secondary); 142 } 143 .markdown-rendered tbody tr:nth-child(even) { 144 background-color: var(--table-row-even-background); 145 } 146 .markdown-rendered tbody tr:nth-child(odd) { 147 background-color: var(--table-row-odd-background); 148 } 149 .markdown-rendered tbody tr:hover { 150 background-color: var(--table-row-background-hover); 151 } 152 153 /* Highlights */ 154 .markdown-rendered mark { 155 background-color: var(--text-highlight-bg); 156 color: var(--text-highlight-fg); 157 } 158 .markdown-rendered mark a { 159 color: var(--rose); 160 font-weight: var(--bold-weight); 161 } 162 163 /* Checkboxes */ 164 input[type=checkbox] { 165 border: 1px solid var(--checkbox-border-color); 166 } 167 input[type=checkbox]:checked { 168 background-color: var(--checkbox-color); 169 box-shadow: inset 0 0 0 2px var(--background-primary); 170 } 171 input[type=checkbox]:checked:after { 172 display: none; 173 } 174 175 /* Code Blocks */ 176 code[class*="language-"], pre[class*="language-"] { 177 line-height: var(--line-height-tight); 178 background-color: var(--code-background); 179 color: var(--code-normal); 180 } 181 182 .cm-line .cm-strong { 183 color: var(--bold-color) !important; 184 } 185 186 /* ::selection */ 187 /* { */ 188 /* background-color: var(--text-selection) !important; */ 189 /* } */ 190 191 /* .CodeMirror-selected {background:red !important;} */