├── README.md ├── solarized-dark.css ├── solarized-light.css ├── solarized.css └── solarized.scss /README.md: -------------------------------------------------------------------------------- 1 | # Trilium Solarized Theme 2 | A [solarized](https://ethanschoonover.com/solarized/) theme for the notetaking app [Trilium](https://github.com/zadam/trilium). 3 | 4 | ![image](https://user-images.githubusercontent.com/49348667/139704397-ce87e550-3011-43ee-9635-6faff85fdfa0.png) 5 | 6 | 7 | ## Installation 8 | - Copy the contents of the `solarized.css` file into a Trilium note. 9 | - Change the type of the note to CSS. 10 | - Add the label `#appTheme=solarized-light` (or `dark`) 11 | - Go to options and select this theme 🥳 12 | 13 | `solarized.css` applies either the dark or light theme based on a media query. 14 | 15 | ## Updating the repo 16 | 17 | Install sass: 18 | 19 | ```bash 20 | sudo npm install -g sass 21 | ``` 22 | 23 | After changes, rebuild `solarized.css`: 24 | 25 | ```bash 26 | sass --no-source-map solarized.scss solarized.css 27 | ``` 28 | -------------------------------------------------------------------------------- /solarized-dark.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: dark) { 2 | body { 3 | color-profile: sRGB; 4 | rendering-intent: auto; 5 | --theme-style: dark; 6 | --main-background-color: #002b36; 7 | --main-text-color: #93a1a1; 8 | --main-border-color: #839496; 9 | --accented-background-color: #073642; 10 | --more-accented-background-color: #586e75; 11 | --button-background-color: transparent; 12 | --button-disabled-background-color: #586e75; 13 | --button-border-color: #839496; 14 | --button-text-color: #93a1a1; 15 | --primary-button-background-color: #268bd2; 16 | --primary-button-text-color: #93a1a1; 17 | --primary-button-border-color: #839496; 18 | --muted-text-color: #839496; 19 | --input-text-color: #93a1a1; 20 | --input-background-color: #002b36; 21 | --hover-item-text-color: #93a1a1; 22 | --hover-item-background-color: #073642; 23 | --active-item-background-color: #586e75; 24 | --active-item-text-color: #93a1a1; 25 | --menu-text-color: #93a1a1; 26 | --menu-background-color: #002b36; 27 | --modal-background-color: #073642; 28 | --modal-text-color: #839496; 29 | --left-pane-background-color: #073642; 30 | --left-pane-text-color: #839496; 31 | --launcher-pane-background-color: #073642; 32 | --launcher-pane-text-color: #839496; 33 | --active-tab-background-color: #073642; 34 | --active-tab-text-color: #93a1a1; 35 | --inactive-tab-background-color: #002b36; 36 | --inactive-tab-text-color: #fdf6e3; 37 | --scrollbar-border-color: transparent; 38 | --tooltip-background-color: #002b36; 39 | --link-color: #268bd2; 40 | --mermaid-theme: dark; 41 | } 42 | body ::-webkit-calendar-picker-indicator { 43 | filter: invert(1); 44 | } 45 | body ::-webkit-scrollbar { 46 | width: 6px; 47 | height: 6px; 48 | } 49 | body ::-webkit-scrollbar-thumb { 50 | border-radius: 2em; 51 | background: rgba(253, 246, 227, 0.075); 52 | } 53 | body .gutter { 54 | background-color: transparent; 55 | } 56 | body h1 { 57 | font-size: 2.5rem; 58 | margin: 1em 0; 59 | } 60 | body h2 { 61 | font-size: 2.2rem; 62 | margin: 1em 0; 63 | } 64 | body h3 { 65 | font-size: 1.8rem; 66 | margin: 1em 0; 67 | } 68 | body .modal-header { 69 | border-bottom-color: #586e75; 70 | } 71 | body .nav-tabs { 72 | border-bottom-color: #586e75; 73 | } 74 | body .nav-tabs .nav-link.active, body .nav-tabs .nav-link:hover, body .nav-tabs .nav-link:focus { 75 | border-top-color: #586e75; 76 | border-right-color: #586e75; 77 | border-bottom-color: #586e75; 78 | border-left-color: #586e75; 79 | } 80 | body .nav-tabs .nav-item.show .nav-link { 81 | border-top-color: #586e75; 82 | border-right-color: #586e75; 83 | border-bottom-color: #586e75; 84 | border-left-color: #586e75; 85 | } 86 | body .ck-content hr { 87 | border: none; 88 | height: 1px; 89 | } 90 | body textarea:focus, body input:focus { 91 | outline: none; 92 | } 93 | body .todo-list__label { 94 | margin-bottom: 0; 95 | } 96 | body .ck-content .todo-list .todo-list__label > input:before { 97 | border: 1px solid var(--link-color); 98 | border-radius: 2em; 99 | } 100 | body .ck-content .todo-list .todo-list__label > input[checked]::before { 101 | background-color: var(--link-color); 102 | } 103 | body .ck-content pre { 104 | border: none; 105 | border-radius: 0; 106 | background-color: #073642; 107 | } 108 | body .calendar-widget .calendar-date, body .calendar-widget .calendar-week span { 109 | font-size: 14px; 110 | font-weight: 400; 111 | } 112 | body blockquote { 113 | color: #839496; 114 | } 115 | body .form-control { 116 | border-color: var(--main-border-color); 117 | } 118 | body .input-group-text { 119 | border-color: var(--main-border-color); 120 | } 121 | body .cm-s-default { 122 | color-profile: sRGB; 123 | rendering-intent: auto; 124 | color: #93a1a1; 125 | background-color: #002b36; 126 | text-shadow: #073642 0 1px; 127 | } 128 | body .cm-s-default .CodeMirror-widget { 129 | text-shadow: none; 130 | } 131 | body .cm-s-default .cm-header { 132 | color: #93a1a1; 133 | } 134 | body .cm-s-default .cm-quote { 135 | color: #586e75; 136 | } 137 | body .cm-s-default .cm-keyword { 138 | color: #cb4b16; 139 | } 140 | body .cm-s-default .cm-atom { 141 | color: #d33682; 142 | } 143 | body .cm-s-default .cm-number { 144 | color: #d33682; 145 | } 146 | body .cm-s-default .cm-def { 147 | color: #2aa198; 148 | } 149 | body .cm-s-default .cm-variable { 150 | color: #657b83; 151 | } 152 | body .cm-s-default .cm-variable-2 { 153 | color: #b58900; 154 | } 155 | body .cm-s-default .cm-variable-3, body .cm-s-default .cm-type { 156 | color: #6c71c4; 157 | } 158 | body .cm-s-default .cm-property { 159 | color: #2aa198; 160 | } 161 | body .cm-s-default .cm-operator { 162 | color: #6c71c4; 163 | } 164 | body .cm-s-default .cm-comment { 165 | color: #93a1a1; 166 | font-style: italic; 167 | } 168 | body .cm-s-default .cm-string { 169 | color: #859900; 170 | } 171 | body .cm-s-default .cm-string-2 { 172 | color: #b58900; 173 | } 174 | body .cm-s-default .cm-meta { 175 | color: #859900; 176 | } 177 | body .cm-s-default .cm-qualifier { 178 | color: #b58900; 179 | } 180 | body .cm-s-default .cm-builtin { 181 | color: #d33682; 182 | } 183 | body .cm-s-default .cm-bracket { 184 | color: #cb4b16; 185 | } 186 | body .cm-s-default .CodeMirror-matchingbracket { 187 | color: #859900; 188 | } 189 | body .cm-s-default .CodeMirror-nonmatchingbracket { 190 | color: #dc322f; 191 | } 192 | body .cm-s-default .cm-tag { 193 | color: #586e75; 194 | } 195 | body .cm-s-default .cm-attribute { 196 | color: #2aa198; 197 | } 198 | body .cm-s-default .cm-hr { 199 | color: transparent; 200 | border-top: 1px solid #93a1a1; 201 | display: block; 202 | } 203 | body .cm-s-default .cm-link { 204 | color: #586e75; 205 | cursor: pointer; 206 | } 207 | body .cm-s-default .cm-special { 208 | color: #6c71c4; 209 | } 210 | body .cm-s-default .cm-em { 211 | color: #657b83; 212 | text-decoration: underline; 213 | text-decoration-style: dotted; 214 | } 215 | body .cm-s-default .cm-error, body .cm-s-default .cm-invalidchar { 216 | color: #93a1a1; 217 | border-bottom: 1px dotted #dc322f; 218 | } 219 | body .cm-s-default div.CodeMirror-selected { 220 | background: #073642; 221 | } 222 | body .cm-s-default .CodeMirror-line::selection, body .cm-s-default .CodeMirror-line::-moz-selection, 223 | body .cm-s-default .CodeMirror-line > span::selection, body .cm-s-default .CodeMirror-line > span::-moz-selection, 224 | body .cm-s-default .CodeMirror-line > span > span::selection, body .cm-s-default .CodeMirror-line > span > span::-moz-selection { 225 | background: #073642; 226 | } 227 | body .cm-s-default .CodeMirror-gutters { 228 | border-right: 0; 229 | } 230 | body .cm-s-default .CodeMirror-gutters { 231 | background-color: #073642; 232 | } 233 | body .cm-s-default .CodeMirror-linenumber { 234 | color: #657b83; 235 | padding: 0 5px; 236 | } 237 | body .cm-s-default .CodeMirror-guttermarker-subtle { 238 | color: #93a1a1; 239 | } 240 | body .cm-s-default .CodeMirror-guttermarker { 241 | color: #cb4b16; 242 | } 243 | body .cm-s-default .CodeMirror-gutter .CodeMirror-gutter-text { 244 | color: #93a1a1; 245 | } 246 | body .cm-s-default .CodeMirror-cursor { 247 | border-left: 1px solid #657b83; 248 | } 249 | body .cm-s-default .CodeMirror-cursor { 250 | background: #586e75; 251 | } 252 | body .cm-s-default .cm-animate-fat-cursor { 253 | background-color: #586e75; 254 | } 255 | body .cm-s-default .CodeMirror-activeline-background { 256 | background: rgba(253, 246, 227, 0.06); 257 | } 258 | } 259 | -------------------------------------------------------------------------------- /solarized-light.css: -------------------------------------------------------------------------------- 1 | body { 2 | color-profile: sRGB; 3 | rendering-intent: auto; 4 | --theme-style: light; 5 | --main-background-color: #fdf6e3; 6 | --main-text-color: #586e75; 7 | --main-border-color: #657b83; 8 | --accented-background-color: #eee8d5; 9 | --more-accented-background-color: #93a1a1; 10 | --button-background-color: transparent; 11 | --button-disabled-background-color: #93a1a1; 12 | --button-border-color: #657b83; 13 | --button-text-color: #586e75; 14 | --primary-button-background-color: #268bd2; 15 | --primary-button-text-color: #586e75; 16 | --primary-button-border-color: #657b83; 17 | --muted-text-color: #657b83; 18 | --input-text-color: #586e75; 19 | --input-background-color: #fdf6e3; 20 | --hover-item-text-color: #586e75; 21 | --hover-item-background-color: #eee8d5; 22 | --active-item-background-color: #93a1a1; 23 | --active-item-text-color: #586e75; 24 | --menu-text-color: #586e75; 25 | --menu-background-color: #fdf6e3; 26 | --modal-background-color: #eee8d5; 27 | --modal-text-color: #657b83; 28 | --left-pane-background-color: #eee8d5; 29 | --left-pane-text-color: #657b83; 30 | --launcher-pane-background-color: #eee8d5; 31 | --launcher-pane-text-color: #657b83; 32 | --active-tab-background-color: #eee8d5; 33 | --active-tab-text-color: #586e75; 34 | --inactive-tab-background-color: #fdf6e3; 35 | --inactive-tab-text-color: #002b36; 36 | --scrollbar-border-color: transparent; 37 | --tooltip-background-color: #fdf6e3; 38 | --link-color: #268bd2; 39 | --mermaid-theme: default; 40 | } 41 | body ::-webkit-calendar-picker-indicator { 42 | filter: invert(1); 43 | } 44 | body ::-webkit-scrollbar { 45 | width: 6px; 46 | height: 6px; 47 | } 48 | body ::-webkit-scrollbar-thumb { 49 | border-radius: 2em; 50 | background: rgba(0, 43, 54, 0.075); 51 | } 52 | body .gutter { 53 | background-color: transparent; 54 | } 55 | body h1 { 56 | font-size: 2.5rem; 57 | margin: 1em 0; 58 | } 59 | body h2 { 60 | font-size: 2.2rem; 61 | margin: 1em 0; 62 | } 63 | body h3 { 64 | font-size: 1.8rem; 65 | margin: 1em 0; 66 | } 67 | body .modal-header { 68 | border-bottom-color: #93a1a1; 69 | } 70 | body .nav-tabs { 71 | border-bottom-color: #93a1a1; 72 | } 73 | body .nav-tabs .nav-link.active, body .nav-tabs .nav-link:hover, body .nav-tabs .nav-link:focus { 74 | border-top-color: #93a1a1; 75 | border-right-color: #93a1a1; 76 | border-bottom-color: #93a1a1; 77 | border-left-color: #93a1a1; 78 | } 79 | body .nav-tabs .nav-item.show .nav-link { 80 | border-top-color: #93a1a1; 81 | border-right-color: #93a1a1; 82 | border-bottom-color: #93a1a1; 83 | border-left-color: #93a1a1; 84 | } 85 | body .ck-content hr { 86 | border: none; 87 | height: 1px; 88 | } 89 | body textarea:focus, body input:focus { 90 | outline: none; 91 | } 92 | body .todo-list__label { 93 | margin-bottom: 0; 94 | } 95 | body .ck-content .todo-list .todo-list__label > input:before { 96 | border: 1px solid var(--link-color); 97 | border-radius: 2em; 98 | } 99 | body .ck-content .todo-list .todo-list__label > input[checked]::before { 100 | background-color: var(--link-color); 101 | } 102 | body .ck-content pre { 103 | border: none; 104 | border-radius: 0; 105 | background-color: #eee8d5; 106 | } 107 | body .calendar-widget .calendar-date, body .calendar-widget .calendar-week span { 108 | font-size: 14px; 109 | font-weight: 400; 110 | } 111 | body blockquote { 112 | color: #657b83; 113 | } 114 | body .form-control { 115 | border-color: var(--main-border-color); 116 | } 117 | body .input-group-text { 118 | border-color: var(--main-border-color); 119 | } 120 | body .cm-s-default { 121 | color-profile: sRGB; 122 | rendering-intent: auto; 123 | color: #586e75; 124 | background-color: #fdf6e3; 125 | text-shadow: #eee8d5 0 1px; 126 | } 127 | body .cm-s-default .CodeMirror-widget { 128 | text-shadow: none; 129 | } 130 | body .cm-s-default .cm-header { 131 | color: #586e75; 132 | } 133 | body .cm-s-default .cm-quote { 134 | color: #93a1a1; 135 | } 136 | body .cm-s-default .cm-keyword { 137 | color: #cb4b16; 138 | } 139 | body .cm-s-default .cm-atom { 140 | color: #d33682; 141 | } 142 | body .cm-s-default .cm-number { 143 | color: #d33682; 144 | } 145 | body .cm-s-default .cm-def { 146 | color: #2aa198; 147 | } 148 | body .cm-s-default .cm-variable { 149 | color: #839496; 150 | } 151 | body .cm-s-default .cm-variable-2 { 152 | color: #b58900; 153 | } 154 | body .cm-s-default .cm-variable-3, body .cm-s-default .cm-type { 155 | color: #6c71c4; 156 | } 157 | body .cm-s-default .cm-property { 158 | color: #2aa198; 159 | } 160 | body .cm-s-default .cm-operator { 161 | color: #6c71c4; 162 | } 163 | body .cm-s-default .cm-comment { 164 | color: #586e75; 165 | font-style: italic; 166 | } 167 | body .cm-s-default .cm-string { 168 | color: #859900; 169 | } 170 | body .cm-s-default .cm-string-2 { 171 | color: #b58900; 172 | } 173 | body .cm-s-default .cm-meta { 174 | color: #859900; 175 | } 176 | body .cm-s-default .cm-qualifier { 177 | color: #b58900; 178 | } 179 | body .cm-s-default .cm-builtin { 180 | color: #d33682; 181 | } 182 | body .cm-s-default .cm-bracket { 183 | color: #cb4b16; 184 | } 185 | body .cm-s-default .CodeMirror-matchingbracket { 186 | color: #859900; 187 | } 188 | body .cm-s-default .CodeMirror-nonmatchingbracket { 189 | color: #dc322f; 190 | } 191 | body .cm-s-default .cm-tag { 192 | color: #93a1a1; 193 | } 194 | body .cm-s-default .cm-attribute { 195 | color: #2aa198; 196 | } 197 | body .cm-s-default .cm-hr { 198 | color: transparent; 199 | border-top: 1px solid #586e75; 200 | display: block; 201 | } 202 | body .cm-s-default .cm-link { 203 | color: #93a1a1; 204 | cursor: pointer; 205 | } 206 | body .cm-s-default .cm-special { 207 | color: #6c71c4; 208 | } 209 | body .cm-s-default .cm-em { 210 | color: #839496; 211 | text-decoration: underline; 212 | text-decoration-style: dotted; 213 | } 214 | body .cm-s-default .cm-error, body .cm-s-default .cm-invalidchar { 215 | color: #586e75; 216 | border-bottom: 1px dotted #dc322f; 217 | } 218 | body .cm-s-default div.CodeMirror-selected { 219 | background: #eee8d5; 220 | } 221 | body .cm-s-default .CodeMirror-line::selection, body .cm-s-default .CodeMirror-line::-moz-selection, 222 | body .cm-s-default .CodeMirror-line > span::selection, body .cm-s-default .CodeMirror-line > span::-moz-selection, 223 | body .cm-s-default .CodeMirror-line > span > span::selection, body .cm-s-default .CodeMirror-line > span > span::-moz-selection { 224 | background: #eee8d5; 225 | } 226 | body .cm-s-default .CodeMirror-gutters { 227 | border-right: 0; 228 | } 229 | body .cm-s-default .CodeMirror-gutters { 230 | background-color: #eee8d5; 231 | } 232 | body .cm-s-default .CodeMirror-linenumber { 233 | color: #839496; 234 | padding: 0 5px; 235 | } 236 | body .cm-s-default .CodeMirror-guttermarker-subtle { 237 | color: #586e75; 238 | } 239 | body .cm-s-default .CodeMirror-guttermarker { 240 | color: #cb4b16; 241 | } 242 | body .cm-s-default .CodeMirror-gutter .CodeMirror-gutter-text { 243 | color: #586e75; 244 | } 245 | body .cm-s-default .CodeMirror-cursor { 246 | border-left: 1px solid #839496; 247 | } 248 | body .cm-s-default .CodeMirror-cursor { 249 | background: #93a1a1; 250 | } 251 | body .cm-s-default .cm-animate-fat-cursor { 252 | background-color: #93a1a1; 253 | } 254 | body .cm-s-default .CodeMirror-activeline-background { 255 | background: rgba(0, 43, 54, 0.06); 256 | } 257 | -------------------------------------------------------------------------------- /solarized.css: -------------------------------------------------------------------------------- 1 | body { 2 | color-profile: sRGB; 3 | rendering-intent: auto; 4 | --theme-style: light; 5 | --main-background-color: #fdf6e3; 6 | --main-text-color: #586e75; 7 | --main-border-color: #657b83; 8 | --accented-background-color: #eee8d5; 9 | --more-accented-background-color: #93a1a1; 10 | --button-background-color: transparent; 11 | --button-disabled-background-color: #93a1a1; 12 | --button-border-color: #657b83; 13 | --button-text-color: #586e75; 14 | --primary-button-background-color: #268bd2; 15 | --primary-button-text-color: #586e75; 16 | --primary-button-border-color: #657b83; 17 | --muted-text-color: #657b83; 18 | --input-text-color: #586e75; 19 | --input-background-color: #fdf6e3; 20 | --hover-item-text-color: #586e75; 21 | --hover-item-background-color: #eee8d5; 22 | --active-item-background-color: #93a1a1; 23 | --active-item-text-color: #586e75; 24 | --menu-text-color: #586e75; 25 | --menu-background-color: #fdf6e3; 26 | --modal-background-color: #eee8d5; 27 | --modal-text-color: #657b83; 28 | --left-pane-background-color: #eee8d5; 29 | --left-pane-text-color: #657b83; 30 | --launcher-pane-background-color: #eee8d5; 31 | --launcher-pane-text-color: #657b83; 32 | --active-tab-background-color: #eee8d5; 33 | --active-tab-text-color: #586e75; 34 | --inactive-tab-background-color: #fdf6e3; 35 | --inactive-tab-text-color: #002b36; 36 | --scrollbar-border-color: transparent; 37 | --tooltip-background-color: #fdf6e3; 38 | --link-color: #268bd2; 39 | --mermaid-theme: default; 40 | } 41 | body ::-webkit-calendar-picker-indicator { 42 | filter: invert(1); 43 | } 44 | body ::-webkit-scrollbar { 45 | width: 6px; 46 | height: 6px; 47 | } 48 | body ::-webkit-scrollbar-thumb { 49 | border-radius: 2em; 50 | background: rgba(0, 43, 54, 0.075); 51 | } 52 | body .gutter { 53 | background-color: transparent; 54 | } 55 | body h1 { 56 | font-size: 2.5rem; 57 | margin: 1em 0; 58 | } 59 | body h2 { 60 | font-size: 2.2rem; 61 | margin: 1em 0; 62 | } 63 | body h3 { 64 | font-size: 1.8rem; 65 | margin: 1em 0; 66 | } 67 | body .modal-header { 68 | border-bottom-color: #93a1a1; 69 | } 70 | body .nav-tabs { 71 | border-bottom-color: #93a1a1; 72 | } 73 | body .nav-tabs .nav-link.active, body .nav-tabs .nav-link:hover, body .nav-tabs .nav-link:focus { 74 | border-top-color: #93a1a1; 75 | border-right-color: #93a1a1; 76 | border-bottom-color: #93a1a1; 77 | border-left-color: #93a1a1; 78 | } 79 | body .nav-tabs .nav-item.show .nav-link { 80 | border-top-color: #93a1a1; 81 | border-right-color: #93a1a1; 82 | border-bottom-color: #93a1a1; 83 | border-left-color: #93a1a1; 84 | } 85 | body .ck-content hr { 86 | border: none; 87 | height: 1px; 88 | } 89 | body textarea:focus, body input:focus { 90 | outline: none; 91 | } 92 | body .todo-list__label { 93 | margin-bottom: 0; 94 | } 95 | body .ck-content .todo-list .todo-list__label > input:before { 96 | border: 1px solid var(--link-color); 97 | border-radius: 2em; 98 | } 99 | body .ck-content .todo-list .todo-list__label > input[checked]::before { 100 | background-color: var(--link-color); 101 | } 102 | body .ck-content pre { 103 | border: none; 104 | border-radius: 0; 105 | background-color: #eee8d5; 106 | } 107 | body .calendar-widget .calendar-date, body .calendar-widget .calendar-week span { 108 | font-size: 14px; 109 | font-weight: 400; 110 | } 111 | body blockquote { 112 | color: #657b83; 113 | } 114 | body .form-control { 115 | border-color: var(--main-border-color); 116 | } 117 | body .input-group-text { 118 | border-color: var(--main-border-color); 119 | } 120 | body .cm-s-default { 121 | color-profile: sRGB; 122 | rendering-intent: auto; 123 | color: #586e75; 124 | background-color: #fdf6e3; 125 | text-shadow: #eee8d5 0 1px; 126 | } 127 | body .cm-s-default .CodeMirror-widget { 128 | text-shadow: none; 129 | } 130 | body .cm-s-default .cm-header { 131 | color: #586e75; 132 | } 133 | body .cm-s-default .cm-quote { 134 | color: #93a1a1; 135 | } 136 | body .cm-s-default .cm-keyword { 137 | color: #cb4b16; 138 | } 139 | body .cm-s-default .cm-atom { 140 | color: #d33682; 141 | } 142 | body .cm-s-default .cm-number { 143 | color: #d33682; 144 | } 145 | body .cm-s-default .cm-def { 146 | color: #2aa198; 147 | } 148 | body .cm-s-default .cm-variable { 149 | color: #839496; 150 | } 151 | body .cm-s-default .cm-variable-2 { 152 | color: #b58900; 153 | } 154 | body .cm-s-default .cm-variable-3, body .cm-s-default .cm-type { 155 | color: #6c71c4; 156 | } 157 | body .cm-s-default .cm-property { 158 | color: #2aa198; 159 | } 160 | body .cm-s-default .cm-operator { 161 | color: #6c71c4; 162 | } 163 | body .cm-s-default .cm-comment { 164 | color: #586e75; 165 | font-style: italic; 166 | } 167 | body .cm-s-default .cm-string { 168 | color: #859900; 169 | } 170 | body .cm-s-default .cm-string-2 { 171 | color: #b58900; 172 | } 173 | body .cm-s-default .cm-meta { 174 | color: #859900; 175 | } 176 | body .cm-s-default .cm-qualifier { 177 | color: #b58900; 178 | } 179 | body .cm-s-default .cm-builtin { 180 | color: #d33682; 181 | } 182 | body .cm-s-default .cm-bracket { 183 | color: #cb4b16; 184 | } 185 | body .cm-s-default .CodeMirror-matchingbracket { 186 | color: #859900; 187 | } 188 | body .cm-s-default .CodeMirror-nonmatchingbracket { 189 | color: #dc322f; 190 | } 191 | body .cm-s-default .cm-tag { 192 | color: #93a1a1; 193 | } 194 | body .cm-s-default .cm-attribute { 195 | color: #2aa198; 196 | } 197 | body .cm-s-default .cm-hr { 198 | color: transparent; 199 | border-top: 1px solid #586e75; 200 | display: block; 201 | } 202 | body .cm-s-default .cm-link { 203 | color: #93a1a1; 204 | cursor: pointer; 205 | } 206 | body .cm-s-default .cm-special { 207 | color: #6c71c4; 208 | } 209 | body .cm-s-default .cm-em { 210 | color: #839496; 211 | text-decoration: underline; 212 | text-decoration-style: dotted; 213 | } 214 | body .cm-s-default .cm-error, body .cm-s-default .cm-invalidchar { 215 | color: #586e75; 216 | border-bottom: 1px dotted #dc322f; 217 | } 218 | body .cm-s-default div.CodeMirror-selected { 219 | background: #eee8d5; 220 | } 221 | body .cm-s-default .CodeMirror-line::selection, body .cm-s-default .CodeMirror-line::-moz-selection, 222 | body .cm-s-default .CodeMirror-line > span::selection, body .cm-s-default .CodeMirror-line > span::-moz-selection, 223 | body .cm-s-default .CodeMirror-line > span > span::selection, body .cm-s-default .CodeMirror-line > span > span::-moz-selection { 224 | background: #eee8d5; 225 | } 226 | body .cm-s-default .CodeMirror-gutters { 227 | border-right: 0; 228 | } 229 | body .cm-s-default .CodeMirror-gutters { 230 | background-color: #eee8d5; 231 | } 232 | body .cm-s-default .CodeMirror-linenumber { 233 | color: #839496; 234 | padding: 0 5px; 235 | } 236 | body .cm-s-default .CodeMirror-guttermarker-subtle { 237 | color: #586e75; 238 | } 239 | body .cm-s-default .CodeMirror-guttermarker { 240 | color: #cb4b16; 241 | } 242 | body .cm-s-default .CodeMirror-gutter .CodeMirror-gutter-text { 243 | color: #586e75; 244 | } 245 | body .cm-s-default .CodeMirror-cursor { 246 | border-left: 1px solid #839496; 247 | } 248 | body .cm-s-default .CodeMirror-cursor { 249 | background: #93a1a1; 250 | } 251 | body .cm-s-default .cm-animate-fat-cursor { 252 | background-color: #93a1a1; 253 | } 254 | body .cm-s-default .CodeMirror-activeline-background { 255 | background: rgba(0, 43, 54, 0.06); 256 | } 257 | 258 | @media (prefers-color-scheme: dark) { 259 | body { 260 | color-profile: sRGB; 261 | rendering-intent: auto; 262 | --theme-style: dark; 263 | --main-background-color: #002b36; 264 | --main-text-color: #93a1a1; 265 | --main-border-color: #839496; 266 | --accented-background-color: #073642; 267 | --more-accented-background-color: #586e75; 268 | --button-background-color: transparent; 269 | --button-disabled-background-color: #586e75; 270 | --button-border-color: #839496; 271 | --button-text-color: #93a1a1; 272 | --primary-button-background-color: #268bd2; 273 | --primary-button-text-color: #93a1a1; 274 | --primary-button-border-color: #839496; 275 | --muted-text-color: #839496; 276 | --input-text-color: #93a1a1; 277 | --input-background-color: #002b36; 278 | --hover-item-text-color: #93a1a1; 279 | --hover-item-background-color: #073642; 280 | --active-item-background-color: #586e75; 281 | --active-item-text-color: #93a1a1; 282 | --menu-text-color: #93a1a1; 283 | --menu-background-color: #002b36; 284 | --modal-background-color: #073642; 285 | --modal-text-color: #839496; 286 | --left-pane-background-color: #073642; 287 | --left-pane-text-color: #839496; 288 | --launcher-pane-background-color: #073642; 289 | --launcher-pane-text-color: #839496; 290 | --active-tab-background-color: #073642; 291 | --active-tab-text-color: #93a1a1; 292 | --inactive-tab-background-color: #002b36; 293 | --inactive-tab-text-color: #fdf6e3; 294 | --scrollbar-border-color: transparent; 295 | --tooltip-background-color: #002b36; 296 | --link-color: #268bd2; 297 | --mermaid-theme: dark; 298 | } 299 | body ::-webkit-calendar-picker-indicator { 300 | filter: invert(1); 301 | } 302 | body ::-webkit-scrollbar { 303 | width: 6px; 304 | height: 6px; 305 | } 306 | body ::-webkit-scrollbar-thumb { 307 | border-radius: 2em; 308 | background: rgba(253, 246, 227, 0.075); 309 | } 310 | body .gutter { 311 | background-color: transparent; 312 | } 313 | body h1 { 314 | font-size: 2.5rem; 315 | margin: 1em 0; 316 | } 317 | body h2 { 318 | font-size: 2.2rem; 319 | margin: 1em 0; 320 | } 321 | body h3 { 322 | font-size: 1.8rem; 323 | margin: 1em 0; 324 | } 325 | body .modal-header { 326 | border-bottom-color: #586e75; 327 | } 328 | body .nav-tabs { 329 | border-bottom-color: #586e75; 330 | } 331 | body .nav-tabs .nav-link.active, body .nav-tabs .nav-link:hover, body .nav-tabs .nav-link:focus { 332 | border-top-color: #586e75; 333 | border-right-color: #586e75; 334 | border-bottom-color: #586e75; 335 | border-left-color: #586e75; 336 | } 337 | body .nav-tabs .nav-item.show .nav-link { 338 | border-top-color: #586e75; 339 | border-right-color: #586e75; 340 | border-bottom-color: #586e75; 341 | border-left-color: #586e75; 342 | } 343 | body .ck-content hr { 344 | border: none; 345 | height: 1px; 346 | } 347 | body textarea:focus, body input:focus { 348 | outline: none; 349 | } 350 | body .todo-list__label { 351 | margin-bottom: 0; 352 | } 353 | body .ck-content .todo-list .todo-list__label > input:before { 354 | border: 1px solid var(--link-color); 355 | border-radius: 2em; 356 | } 357 | body .ck-content .todo-list .todo-list__label > input[checked]::before { 358 | background-color: var(--link-color); 359 | } 360 | body .ck-content pre { 361 | border: none; 362 | border-radius: 0; 363 | background-color: #073642; 364 | } 365 | body .calendar-widget .calendar-date, body .calendar-widget .calendar-week span { 366 | font-size: 14px; 367 | font-weight: 400; 368 | } 369 | body blockquote { 370 | color: #839496; 371 | } 372 | body .form-control { 373 | border-color: var(--main-border-color); 374 | } 375 | body .input-group-text { 376 | border-color: var(--main-border-color); 377 | } 378 | body .cm-s-default { 379 | color-profile: sRGB; 380 | rendering-intent: auto; 381 | color: #93a1a1; 382 | background-color: #002b36; 383 | text-shadow: #073642 0 1px; 384 | } 385 | body .cm-s-default .CodeMirror-widget { 386 | text-shadow: none; 387 | } 388 | body .cm-s-default .cm-header { 389 | color: #93a1a1; 390 | } 391 | body .cm-s-default .cm-quote { 392 | color: #586e75; 393 | } 394 | body .cm-s-default .cm-keyword { 395 | color: #cb4b16; 396 | } 397 | body .cm-s-default .cm-atom { 398 | color: #d33682; 399 | } 400 | body .cm-s-default .cm-number { 401 | color: #d33682; 402 | } 403 | body .cm-s-default .cm-def { 404 | color: #2aa198; 405 | } 406 | body .cm-s-default .cm-variable { 407 | color: #657b83; 408 | } 409 | body .cm-s-default .cm-variable-2 { 410 | color: #b58900; 411 | } 412 | body .cm-s-default .cm-variable-3, body .cm-s-default .cm-type { 413 | color: #6c71c4; 414 | } 415 | body .cm-s-default .cm-property { 416 | color: #2aa198; 417 | } 418 | body .cm-s-default .cm-operator { 419 | color: #6c71c4; 420 | } 421 | body .cm-s-default .cm-comment { 422 | color: #93a1a1; 423 | font-style: italic; 424 | } 425 | body .cm-s-default .cm-string { 426 | color: #859900; 427 | } 428 | body .cm-s-default .cm-string-2 { 429 | color: #b58900; 430 | } 431 | body .cm-s-default .cm-meta { 432 | color: #859900; 433 | } 434 | body .cm-s-default .cm-qualifier { 435 | color: #b58900; 436 | } 437 | body .cm-s-default .cm-builtin { 438 | color: #d33682; 439 | } 440 | body .cm-s-default .cm-bracket { 441 | color: #cb4b16; 442 | } 443 | body .cm-s-default .CodeMirror-matchingbracket { 444 | color: #859900; 445 | } 446 | body .cm-s-default .CodeMirror-nonmatchingbracket { 447 | color: #dc322f; 448 | } 449 | body .cm-s-default .cm-tag { 450 | color: #586e75; 451 | } 452 | body .cm-s-default .cm-attribute { 453 | color: #2aa198; 454 | } 455 | body .cm-s-default .cm-hr { 456 | color: transparent; 457 | border-top: 1px solid #93a1a1; 458 | display: block; 459 | } 460 | body .cm-s-default .cm-link { 461 | color: #586e75; 462 | cursor: pointer; 463 | } 464 | body .cm-s-default .cm-special { 465 | color: #6c71c4; 466 | } 467 | body .cm-s-default .cm-em { 468 | color: #657b83; 469 | text-decoration: underline; 470 | text-decoration-style: dotted; 471 | } 472 | body .cm-s-default .cm-error, body .cm-s-default .cm-invalidchar { 473 | color: #93a1a1; 474 | border-bottom: 1px dotted #dc322f; 475 | } 476 | body .cm-s-default div.CodeMirror-selected { 477 | background: #073642; 478 | } 479 | body .cm-s-default .CodeMirror-line::selection, body .cm-s-default .CodeMirror-line::-moz-selection, 480 | body .cm-s-default .CodeMirror-line > span::selection, body .cm-s-default .CodeMirror-line > span::-moz-selection, 481 | body .cm-s-default .CodeMirror-line > span > span::selection, body .cm-s-default .CodeMirror-line > span > span::-moz-selection { 482 | background: #073642; 483 | } 484 | body .cm-s-default .CodeMirror-gutters { 485 | border-right: 0; 486 | } 487 | body .cm-s-default .CodeMirror-gutters { 488 | background-color: #073642; 489 | } 490 | body .cm-s-default .CodeMirror-linenumber { 491 | color: #657b83; 492 | padding: 0 5px; 493 | } 494 | body .cm-s-default .CodeMirror-guttermarker-subtle { 495 | color: #93a1a1; 496 | } 497 | body .cm-s-default .CodeMirror-guttermarker { 498 | color: #cb4b16; 499 | } 500 | body .cm-s-default .CodeMirror-gutter .CodeMirror-gutter-text { 501 | color: #93a1a1; 502 | } 503 | body .cm-s-default .CodeMirror-cursor { 504 | border-left: 1px solid #657b83; 505 | } 506 | body .cm-s-default .CodeMirror-cursor { 507 | background: #586e75; 508 | } 509 | body .cm-s-default .cm-animate-fat-cursor { 510 | background-color: #586e75; 511 | } 512 | body .cm-s-default .CodeMirror-activeline-background { 513 | background: rgba(253, 246, 227, 0.06); 514 | } 515 | } 516 | -------------------------------------------------------------------------------- /solarized.scss: -------------------------------------------------------------------------------- 1 | // See https://ethanschoonover.com/solarized/ for colors. 2 | 3 | @use 'sass:color'; 4 | 5 | $base03: #002b36; 6 | $base02: #073642; 7 | $base01: #586e75; 8 | $base00: #657b83; 9 | $base0: #839496; 10 | $base1: #93a1a1; 11 | $base2: #eee8d5; 12 | $base3: #fdf6e3; 13 | $yellow: #b58900; 14 | $orange: #cb4b16; 15 | $red: #dc322f; 16 | $magenta: #d33682; 17 | $violet: #6c71c4; 18 | $blue: #268bd2; 19 | $cyan: #2aa198; 20 | $green: #859900; 21 | 22 | @mixin solarized_common($rebase03, $rebase02, $rebase01, $rebase00, $rebase0, $rebase1, $rebase2, $rebase3, $themeStyle, $mermaidTheme) { 23 | body { 24 | color-profile: sRGB; 25 | rendering-intent: auto; 26 | // Variables follow order in 27 | // https://github.com/zadam/trilium/blob/master/src/public/stylesheets/theme-light.css. 28 | // Updated on 2021-11-01 to Trilium commit 7e4122654. 29 | 30 | --theme-style: #{$themeStyle}; 31 | 32 | // TODO: not sure why, but just passing $rebase3 etc. does not work, and the 33 | // generated CSS will not properly substitute the values of the SASS 34 | // variables. #{$rebase3} works. Maybe it's because we're setting CSS 35 | // variables here? Just $rebase3 et al. seem to work just fine elsewhere. 36 | --main-background-color: #{$rebase3}; 37 | --main-text-color: #{$rebase01}; 38 | --main-border-color: #{$rebase00}; 39 | 40 | --accented-background-color: #{$rebase2}; 41 | --more-accented-background-color: #{$rebase1}; 42 | 43 | --button-background-color: transparent; 44 | --button-disabled-background-color: #{$rebase1}; 45 | --button-border-color: #{$rebase00}; 46 | --button-text-color: #{$rebase01}; 47 | 48 | --primary-button-background-color: #{$blue}; 49 | --primary-button-text-color: #{$rebase01}; 50 | --primary-button-border-color: #{$rebase00}; 51 | 52 | --muted-text-color: #{$rebase00}; 53 | 54 | --input-text-color: #{$rebase01}; 55 | --input-background-color: #{$rebase3}; 56 | 57 | --hover-item-text-color: #{$rebase01}; 58 | --hover-item-background-color: #{$rebase2}; 59 | 60 | --active-item-background-color: #{$rebase1}; 61 | --active-item-text-color: #{$rebase01}; 62 | 63 | --menu-text-color: #{$rebase01}; 64 | --menu-background-color: #{$rebase3}; 65 | 66 | --modal-background-color: #{$rebase2}; 67 | --modal-text-color: #{$rebase00}; 68 | 69 | --left-pane-background-color: #{$rebase2}; 70 | --left-pane-text-color: #{$rebase00}; 71 | 72 | --launcher-pane-background-color: #{$rebase2}; 73 | --launcher-pane-text-color: #{$rebase00}; 74 | 75 | --active-tab-background-color: #{$rebase2}; 76 | --active-tab-text-color: #{$rebase01}; 77 | 78 | --inactive-tab-background-color: #{$rebase3}; 79 | --inactive-tab-text-color: #{$rebase03}; 80 | 81 | --scrollbar-border-color: transparent; 82 | --tooltip-background-color: #{$rebase3}; 83 | --link-color: #{$blue}; 84 | 85 | --mermaid-theme: #{$mermaidTheme}; 86 | 87 | ::-webkit-calendar-picker-indicator { 88 | filter: invert(1); 89 | } 90 | 91 | ::-webkit-scrollbar { 92 | width: 6px; 93 | height: 6px; 94 | } 95 | 96 | ::-webkit-scrollbar-thumb { 97 | border-radius: 2em; 98 | background: color.change($rebase03, $alpha: 0.075); 99 | } 100 | 101 | .gutter { 102 | background-color: transparent; 103 | } 104 | 105 | h1 { 106 | font-size: 2.5rem; 107 | margin: 1em 0; 108 | } 109 | 110 | h2 { 111 | font-size: 2.2rem; 112 | margin: 1em 0; 113 | } 114 | 115 | h3 { 116 | font-size: 1.8rem; 117 | margin: 1em 0; 118 | } 119 | 120 | .modal-header { 121 | border-bottom-color: #{$rebase1}; 122 | } 123 | 124 | // Border colors in tabbed panes, e.g. Trilium options dialog. 125 | .nav-tabs { 126 | border-bottom-color: #{$rebase1}; 127 | } 128 | 129 | .nav-tabs .nav-link { 130 | &.active, &:hover, &:focus { 131 | border-top-color: #{$rebase1}; 132 | border-right-color: #{$rebase1}; 133 | border-bottom-color: #{$rebase1}; 134 | border-left-color: #{$rebase1}; 135 | } 136 | } 137 | 138 | .nav-tabs .nav-item.show .nav-link { 139 | border-top-color: #{$rebase1}; 140 | border-right-color: #{$rebase1}; 141 | border-bottom-color: #{$rebase1}; 142 | border-left-color: #{$rebase1}; 143 | } 144 | 145 | .ck-content hr { 146 | border: none; 147 | height: 1px; 148 | } 149 | 150 | textarea:focus, input:focus { 151 | outline: none; 152 | } 153 | 154 | .todo-list__label { 155 | margin-bottom: 0; 156 | } 157 | 158 | .ck-content { 159 | .todo-list .todo-list__label { 160 | > input:before { 161 | border: 1px solid var(--link-color); 162 | border-radius: 2em; 163 | } 164 | > input[checked]::before { 165 | background-color: var(--link-color); 166 | } 167 | } 168 | 169 | pre { 170 | border: none; 171 | border-radius: 0; 172 | background-color: $rebase2; 173 | } 174 | } 175 | 176 | .calendar-widget .calendar-date, .calendar-widget .calendar-week span { 177 | font-size: 14px; 178 | font-weight: 400; 179 | } 180 | 181 | blockquote { 182 | color: $rebase00; 183 | } 184 | 185 | // For "Quick search" box's border. 186 | .form-control { 187 | border-color: var(--main-border-color); 188 | } 189 | .input-group-text { 190 | border-color: var(--main-border-color); 191 | } 192 | 193 | // Solarized theme for CodeMirror, based on 194 | // https://github.com/codemirror/CodeMirror/blob/master/theme/solarized.css. 195 | .cm-s-default { 196 | color-profile: sRGB; 197 | rendering-intent: auto; 198 | color: $rebase01; 199 | background-color: $rebase3; 200 | text-shadow: #{$rebase2} 0 1px; 201 | 202 | .CodeMirror-widget { 203 | text-shadow: none; 204 | } 205 | .cm-header { color: $rebase01; } 206 | .cm-quote { color: $rebase1; } 207 | 208 | .cm-keyword { color: $orange; } 209 | .cm-atom { color: $magenta; } 210 | .cm-number { color: $magenta; } 211 | .cm-def { color: $cyan; } 212 | 213 | .cm-variable { color: $rebase0; } 214 | .cm-variable-2 { color: $yellow; } 215 | .cm-variable-3, .cm-type { color: $violet; } 216 | 217 | .cm-property { color: $cyan; } 218 | .cm-operator { color: $violet; } 219 | 220 | .cm-comment { color: $rebase01; font-style:italic; } 221 | 222 | .cm-string { color: $green; } 223 | .cm-string-2 { color: $yellow; } 224 | 225 | .cm-meta { color: $green; } 226 | .cm-qualifier { color: $yellow; } 227 | .cm-builtin { color: $magenta; } 228 | .cm-bracket { color: $orange; } 229 | .CodeMirror-matchingbracket { color: $green; } 230 | .CodeMirror-nonmatchingbracket { color: $red; } 231 | .cm-tag { color: #{$rebase1}; } 232 | .cm-attribute { color: $cyan; } 233 | .cm-hr { 234 | color: transparent; 235 | border-top: 1px solid #{$rebase01}; 236 | display: block; 237 | } 238 | .cm-link { color: #{$rebase1}; cursor: pointer; } 239 | .cm-special { color: $violet; } 240 | .cm-em { 241 | color: #{$rebase0}; 242 | text-decoration: underline; 243 | text-decoration-style: dotted; 244 | } 245 | .cm-error, .cm-invalidchar { 246 | color: $rebase01; 247 | border-bottom: 1px dotted $red; 248 | } 249 | 250 | div.CodeMirror-selected { 251 | background: #{$rebase2}; 252 | } 253 | .CodeMirror-line { 254 | &::selection, &::-moz-selection, 255 | > span::selection, > span::-moz-selection, 256 | > span > span::selection, > span > span::-moz-selection { 257 | background: #{$rebase2}; 258 | } 259 | } 260 | 261 | // Editor styling 262 | 263 | // Little shadow on the view-port of the buffer view 264 | //.cm-s-default.CodeMirror { 265 | // -moz-box-shadow: inset 7px 0 12px -6px #000; 266 | // -webkit-box-shadow: inset 7px 0 12px -6px #000; 267 | // box-shadow: inset 7px 0 12px -6px #000; 268 | //} 269 | 270 | // Remove gutter border 271 | .CodeMirror-gutters { 272 | border-right: 0; 273 | } 274 | 275 | // Gutter colors and line number styling based of color scheme (dark / light) 276 | .CodeMirror-gutters { 277 | background-color: $rebase2; 278 | } 279 | 280 | .CodeMirror-linenumber { 281 | color: $rebase0; 282 | padding: 0 5px; 283 | } 284 | 285 | .CodeMirror-guttermarker-subtle { color: $rebase01; } 286 | .CodeMirror-guttermarker { color: $orange; } 287 | .CodeMirror-gutter .CodeMirror-gutter-text { color: $rebase01; } 288 | 289 | // Cursor 290 | .CodeMirror-cursor { border-left: 1px solid #{$rebase0}; } 291 | 292 | // Fat cursor 293 | .CodeMirror-cursor { background: $rebase1; } 294 | .cm-animate-fat-cursor { background-color: $rebase1; } 295 | 296 | // Active line 297 | .CodeMirror-activeline-background { 298 | background: color.change($rebase03, $alpha: 0.06); 299 | } 300 | } 301 | 302 | } 303 | } 304 | 305 | // Solarized Light by default. 306 | @include solarized_common( 307 | $base03, $base02, $base01, $base00, $base0, $base1, $base2, $base3, 308 | $themeStyle: "light", 309 | $mermaidTheme: "default"); 310 | 311 | // Solarized Dark if browser detects dark theme preference. 312 | @media (prefers-color-scheme: dark) { 313 | @include solarized_common( 314 | $base3, $base2, $base1, $base0, $base00, $base01, $base02, $base03, 315 | $themeStyle: "dark", 316 | $mermaidTheme: "dark"); 317 | } 318 | --------------------------------------------------------------------------------