catppuccin-coal.md
· 728 B · Markdown
Raw
Catppuccin Mocha with these changes:
black/grayscale version of mocha catppuccin theme.
|color|mocha|coal|
|---|---|---|
|Text|#cdd6f4|#e0e0e0
|Subtext1|#bac2de|#cccccc|
|Subtext0|#a6adc8|#b8b8b8|
|Overlay2|#9399b2|#a3a3a3|
|Overlay1|#7f849c|#8c8c8c|
|Overlay0|#6c7086|#787878|
|Surface2|#585b70|#636363|
|Surface1|#45475a|#4f4f4f|
|Surface0|#313244|#3b3b3b|
|Base|#1e1e2e|#262626|
|Mantle|#181825|#1f1f1f|
|Crust|#11111b|#171717|
Sed command
```sh
sed -i '' 's/#cdd6f4/#e0e0e0/g; s/#bac2de/#cccccc/g; s/#a6adc8/#b8b8b8/g; s/#9399b2/#a3a3a3/g; s/#7f849c/#8c8c8c/g; s/#6c7086/#787878/g; s/#585b70/#636363/g; s/#45475a/#4f4f4f/g; s/#313244/#3b3b3b/g; s/#1e1e2e/#262626/g; s/#181825/#1f1f1f/g; s/#11111b/#171717/g' filename
```
Catppuccin Mocha with these changes:
black/grayscale version of mocha catppuccin theme.
| color | mocha | coal |
|---|---|---|
| Text | #cdd6f4 | #e0e0e0 |
| Subtext1 | #bac2de | #cccccc |
| Subtext0 | #a6adc8 | #b8b8b8 |
| Overlay2 | #9399b2 | #a3a3a3 |
| Overlay1 | #7f849c | #8c8c8c |
| Overlay0 | #6c7086 | #787878 |
| Surface2 | #585b70 | #636363 |
| Surface1 | #45475a | #4f4f4f |
| Surface0 | #313244 | #3b3b3b |
| Base | #1e1e2e | #262626 |
| Mantle | #181825 | #1f1f1f |
| Crust | #11111b | #171717 |
Sed command
sed -i '' 's/#cdd6f4/#e0e0e0/g; s/#bac2de/#cccccc/g; s/#a6adc8/#b8b8b8/g; s/#9399b2/#a3a3a3/g; s/#7f849c/#8c8c8c/g; s/#6c7086/#787878/g; s/#585b70/#636363/g; s/#45475a/#4f4f4f/g; s/#313244/#3b3b3b/g; s/#1e1e2e/#262626/g; s/#181825/#1f1f1f/g; s/#11111b/#171717/g' filename
trilium.css
· 6.1 KiB · CSS
Raw
/* Attribute: #appTheme=catppuccin-coal */
/* https://gist.joshuabell.xyz/ringofstorms/8f1e3afba1b34be6a8d8a78265765f6c */
/* Adapted from https://github.com/catppuccin/trilium-notes/blob/main/themes/mocha/catppuccin-mocha-yellow.css */
:root {
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--orange: #ffb875;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
--text: #e0e0e0;
--subtext1: #cccccc;
--subtext0: #b8b8b8;
--overlay2: #a3a3a3;
--overlay1: #8c8c8c;
--overlay0: #787878;
--surface2: #636363;
--surface1: #4f4f4f;
--surface0: #3b3b3b;
--base: #262626;
--mantle: #1f1f1f;
--crust: #171717;
--accent: var(--orange);
}
:root {
--theme-style: dark;
--mermaid-theme: dark;
--main-font-family: "Arial";
--main-font-size: normal;
--tree-font-family: "Arial";
--tree-font-size: normal;
--detail-font-family: "Arial";
--detail-font-size: normal;
--monospace-font-family: "Monospace";
--monospace-font-size: normal;
--main-background-color: var(--crust);
--main-text-color: var(--text);
--main-border-color: var(--text);
--accented-background-color: var(--mantle);
--more-accented-background-color: var(--surface0);
--button-text-color: var(--text);
--button-background-color: var(--mantle);
--button-disabled-text-color: var(--overlay2);
--button-disabled-background-color: var(--crust);
--button-border-color: var(--base);
--button-border-radius: 2px;
--primary-button-background-color: var(--overlay1);
--primary-button-text-color: var(--text);
--primary-button-border-color: var(--overlay1);
--muted-text-color: var(--overlay2);
--input-text-color: var(--text);
--input-background-color: var(--crust);
--hover-item-text-color: var(--text);
--hover-item-background-color: var(--surface0);
--active-item-text-color: var(--text);
--active-item-background-color: var(--surface0);
--active-item-border-color: transparent;
--menu-text-color: var(--text);
--menu-background-color: var(--surface0);
--modal-background-color: var(--crust);
--modal-backdrop-color: var(--surface1);
--left-pane-background-color: var(--mantle);
--left-pane-text-color: var(--text);
--launcher-pane-background-color: var(--mantle);
--launcher-pane-text-color: var(--text);
--active-tab-background-color: var(--crust);
--active-tab-text-color: var(--text);
--active-tab-hover-background-color: var(--accent);
--inactive-tab-background-color: var(--mantle);
--inactive-tab-text-color: var(--text);
--inactive-tab-hover-background-color: var(--surface1);
--scrollbar-border-color: var(--accent);
--tooltip-background-color: var(--base);
--link-color: var(--sapphire);
}
/* CANVAS NOTE */
.excalidraw.theme--dark {
--theme-filter: none !important;
--island-bg-color: var(--mantle) !important;
--button-hover-bg: var(--surface1) !important;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-border-color) !important;
}
span.fancytree-custom-icon {
color: var(--scrollbar-border-color);
background: none;
}
span.fancytree-node:hover {
border: 0px !important;
background-color: var(--hover-item-background-color) !important;
}
span.fancytree-active {
background-color: var(--active-tab-background-color) !important;
}
body .global-menu-button:hover {
background-color: transparent !important;
}
.form-control:focus {
box-shadow: 0px 0px transparent;
}
.tab-row-widget .note-tab[active]:hover .note-tab-wrapper {
color: var(--active-tab-background-color) !important;
}
button.bx-history,
.bx-dots-vertical-rounded,
.bx-dock-right,
.bx-edit-alt,
.floating-button,
.bx-x {
background-color: transparent !important;
}
/* CODEMIRROR */
div#root-widget
div#rest-pane
div#center-pane
div.note-detail
div.note-detail-code
div.note-detail-code-editor
div.CodeMirror-code
span {
font-family: var(--monospace-font-family);
}
div.CodeMirror span.cm-atom {
color: var(--peach);
}
div.CodeMirror span.cm-builtin {
color: var(--lavender);
}
div.CodeMirror span.cm-callee {
color: var(--sky) !important;
}
div.CodeMirror span.cm-comment {
color: var(--overlay1);
padding: 5px 2px;
margin: -5px -2px;
}
div.CodeMirror span.cm-def {
color: var(--yellow);
}
div.CodeMirror span.cm-keyword {
color: var(--mauve);
}
div.CodeMirror span.cm-matchhighlight {
color: var(--base) !important;
background-color: var(--mauve) !important;
}
div.CodeMirror span.cm-number {
color: var(--maroon);
}
div.CodeMirror span.cm-operator {
color: var(--mauve);
}
div.CodeMirror span.cm-overlay {
color: var(--base);
}
div.CodeMirror span.cm-property {
color: var(--blue);
}
div.CodeMirror span.cm-variable {
color: var(--yellow);
}
div.CodeMirror span.cm-variable-2 {
color: var(--text);
}
div.CodeMirror span.cm-variable-3,
div.CodeMirror span.cm-meta {
color: var(--mauve);
}
div.CodeMirror span.cm-qualifier {
color: var(--yellow);
}
div.CodeMirror span.cm-string {
color: var(--green);
}
div.CodeMirror span.cm-string-2 {
color: var(--teal);
}
div.CodeMirror span.cm-tag {
color: var(--red);
}
div.CodeMirror-lines {
color: var(--flamingo);
}
div.CodeMirror-cursor {
filter: invert(100%);
}
.cm-s-default .cm-attribute {
color: var(--yellow);
}
.ck-find-result_selected {
color: var(--crust) !important;
background-color: var(--maroon);
}
.ck-find-result {
color: var(--crust) !important;
background-color: var(--yellow);
}
.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
background-color: var(--surface0);
}
.CodeMirror-matchingbracket {
text-decoration: none;
color: var(--mauve) !important;
border: 1px solid var(--sapphire);
}
.CodeMirror-linenumber {
color: var(--lavender);
font-family: var(--monospace-font-family) !important;
}
/* codeblocks */
.ck-content pre {
background: var(--base);
border: 1px solid var(--surface2);
}
.ck-editor__editable pre[data-language]:after {
background: transparent !important;
color: transparent !important;
}
| 1 | /* Attribute: #appTheme=catppuccin-coal */ |
| 2 | /* https://gist.joshuabell.xyz/ringofstorms/8f1e3afba1b34be6a8d8a78265765f6c */ |
| 3 | /* Adapted from https://github.com/catppuccin/trilium-notes/blob/main/themes/mocha/catppuccin-mocha-yellow.css */ |
| 4 | :root { |
| 5 | --rosewater: #f5e0dc; |
| 6 | --flamingo: #f2cdcd; |
| 7 | --pink: #f5c2e7; |
| 8 | --mauve: #cba6f7; |
| 9 | --red: #f38ba8; |
| 10 | --maroon: #eba0ac; |
| 11 | --peach: #fab387; |
| 12 | --yellow: #f9e2af; |
| 13 | --orange: #ffb875; |
| 14 | --green: #a6e3a1; |
| 15 | --teal: #94e2d5; |
| 16 | --sky: #89dceb; |
| 17 | --sapphire: #74c7ec; |
| 18 | --blue: #89b4fa; |
| 19 | --lavender: #b4befe; |
| 20 | --text: #e0e0e0; |
| 21 | --subtext1: #cccccc; |
| 22 | --subtext0: #b8b8b8; |
| 23 | --overlay2: #a3a3a3; |
| 24 | --overlay1: #8c8c8c; |
| 25 | --overlay0: #787878; |
| 26 | --surface2: #636363; |
| 27 | --surface1: #4f4f4f; |
| 28 | --surface0: #3b3b3b; |
| 29 | --base: #262626; |
| 30 | --mantle: #1f1f1f; |
| 31 | --crust: #171717; |
| 32 | --accent: var(--orange); |
| 33 | } |
| 34 | |
| 35 | :root { |
| 36 | --theme-style: dark; |
| 37 | --mermaid-theme: dark; |
| 38 | |
| 39 | --main-font-family: "Arial"; |
| 40 | --main-font-size: normal; |
| 41 | |
| 42 | --tree-font-family: "Arial"; |
| 43 | --tree-font-size: normal; |
| 44 | |
| 45 | --detail-font-family: "Arial"; |
| 46 | --detail-font-size: normal; |
| 47 | |
| 48 | --monospace-font-family: "Monospace"; |
| 49 | --monospace-font-size: normal; |
| 50 | |
| 51 | --main-background-color: var(--crust); |
| 52 | --main-text-color: var(--text); |
| 53 | --main-border-color: var(--text); |
| 54 | |
| 55 | --accented-background-color: var(--mantle); |
| 56 | --more-accented-background-color: var(--surface0); |
| 57 | |
| 58 | --button-text-color: var(--text); |
| 59 | --button-background-color: var(--mantle); |
| 60 | --button-disabled-text-color: var(--overlay2); |
| 61 | --button-disabled-background-color: var(--crust); |
| 62 | --button-border-color: var(--base); |
| 63 | --button-border-radius: 2px; |
| 64 | |
| 65 | --primary-button-background-color: var(--overlay1); |
| 66 | --primary-button-text-color: var(--text); |
| 67 | --primary-button-border-color: var(--overlay1); |
| 68 | |
| 69 | --muted-text-color: var(--overlay2); |
| 70 | |
| 71 | --input-text-color: var(--text); |
| 72 | --input-background-color: var(--crust); |
| 73 | |
| 74 | --hover-item-text-color: var(--text); |
| 75 | --hover-item-background-color: var(--surface0); |
| 76 | |
| 77 | --active-item-text-color: var(--text); |
| 78 | --active-item-background-color: var(--surface0); |
| 79 | --active-item-border-color: transparent; |
| 80 | |
| 81 | --menu-text-color: var(--text); |
| 82 | --menu-background-color: var(--surface0); |
| 83 | |
| 84 | --modal-background-color: var(--crust); |
| 85 | --modal-backdrop-color: var(--surface1); |
| 86 | |
| 87 | --left-pane-background-color: var(--mantle); |
| 88 | --left-pane-text-color: var(--text); |
| 89 | |
| 90 | --launcher-pane-background-color: var(--mantle); |
| 91 | --launcher-pane-text-color: var(--text); |
| 92 | |
| 93 | --active-tab-background-color: var(--crust); |
| 94 | --active-tab-text-color: var(--text); |
| 95 | --active-tab-hover-background-color: var(--accent); |
| 96 | |
| 97 | --inactive-tab-background-color: var(--mantle); |
| 98 | --inactive-tab-text-color: var(--text); |
| 99 | --inactive-tab-hover-background-color: var(--surface1); |
| 100 | |
| 101 | --scrollbar-border-color: var(--accent); |
| 102 | --tooltip-background-color: var(--base); |
| 103 | --link-color: var(--sapphire); |
| 104 | } |
| 105 | |
| 106 | /* CANVAS NOTE */ |
| 107 | .excalidraw.theme--dark { |
| 108 | --theme-filter: none !important; |
| 109 | --island-bg-color: var(--mantle) !important; |
| 110 | --button-hover-bg: var(--surface1) !important; |
| 111 | } |
| 112 | |
| 113 | ::-webkit-scrollbar-thumb { |
| 114 | background: var(--scrollbar-border-color) !important; |
| 115 | } |
| 116 | |
| 117 | span.fancytree-custom-icon { |
| 118 | color: var(--scrollbar-border-color); |
| 119 | background: none; |
| 120 | } |
| 121 | |
| 122 | span.fancytree-node:hover { |
| 123 | border: 0px !important; |
| 124 | background-color: var(--hover-item-background-color) !important; |
| 125 | } |
| 126 | |
| 127 | span.fancytree-active { |
| 128 | background-color: var(--active-tab-background-color) !important; |
| 129 | } |
| 130 | |
| 131 | body .global-menu-button:hover { |
| 132 | background-color: transparent !important; |
| 133 | } |
| 134 | |
| 135 | .form-control:focus { |
| 136 | box-shadow: 0px 0px transparent; |
| 137 | } |
| 138 | |
| 139 | .tab-row-widget .note-tab[active]:hover .note-tab-wrapper { |
| 140 | color: var(--active-tab-background-color) !important; |
| 141 | } |
| 142 | |
| 143 | button.bx-history, |
| 144 | .bx-dots-vertical-rounded, |
| 145 | .bx-dock-right, |
| 146 | .bx-edit-alt, |
| 147 | .floating-button, |
| 148 | .bx-x { |
| 149 | background-color: transparent !important; |
| 150 | } |
| 151 | |
| 152 | /* CODEMIRROR */ |
| 153 | div#root-widget |
| 154 | div#rest-pane |
| 155 | div#center-pane |
| 156 | div.note-detail |
| 157 | div.note-detail-code |
| 158 | div.note-detail-code-editor |
| 159 | div.CodeMirror-code |
| 160 | span { |
| 161 | font-family: var(--monospace-font-family); |
| 162 | } |
| 163 | div.CodeMirror span.cm-atom { |
| 164 | color: var(--peach); |
| 165 | } |
| 166 | div.CodeMirror span.cm-builtin { |
| 167 | color: var(--lavender); |
| 168 | } |
| 169 | div.CodeMirror span.cm-callee { |
| 170 | color: var(--sky) !important; |
| 171 | } |
| 172 | div.CodeMirror span.cm-comment { |
| 173 | color: var(--overlay1); |
| 174 | padding: 5px 2px; |
| 175 | margin: -5px -2px; |
| 176 | } |
| 177 | div.CodeMirror span.cm-def { |
| 178 | color: var(--yellow); |
| 179 | } |
| 180 | div.CodeMirror span.cm-keyword { |
| 181 | color: var(--mauve); |
| 182 | } |
| 183 | div.CodeMirror span.cm-matchhighlight { |
| 184 | color: var(--base) !important; |
| 185 | background-color: var(--mauve) !important; |
| 186 | } |
| 187 | div.CodeMirror span.cm-number { |
| 188 | color: var(--maroon); |
| 189 | } |
| 190 | div.CodeMirror span.cm-operator { |
| 191 | color: var(--mauve); |
| 192 | } |
| 193 | div.CodeMirror span.cm-overlay { |
| 194 | color: var(--base); |
| 195 | } |
| 196 | div.CodeMirror span.cm-property { |
| 197 | color: var(--blue); |
| 198 | } |
| 199 | div.CodeMirror span.cm-variable { |
| 200 | color: var(--yellow); |
| 201 | } |
| 202 | div.CodeMirror span.cm-variable-2 { |
| 203 | color: var(--text); |
| 204 | } |
| 205 | div.CodeMirror span.cm-variable-3, |
| 206 | div.CodeMirror span.cm-meta { |
| 207 | color: var(--mauve); |
| 208 | } |
| 209 | div.CodeMirror span.cm-qualifier { |
| 210 | color: var(--yellow); |
| 211 | } |
| 212 | div.CodeMirror span.cm-string { |
| 213 | color: var(--green); |
| 214 | } |
| 215 | div.CodeMirror span.cm-string-2 { |
| 216 | color: var(--teal); |
| 217 | } |
| 218 | div.CodeMirror span.cm-tag { |
| 219 | color: var(--red); |
| 220 | } |
| 221 | div.CodeMirror-lines { |
| 222 | color: var(--flamingo); |
| 223 | } |
| 224 | div.CodeMirror-cursor { |
| 225 | filter: invert(100%); |
| 226 | } |
| 227 | |
| 228 | .cm-s-default .cm-attribute { |
| 229 | color: var(--yellow); |
| 230 | } |
| 231 | |
| 232 | .ck-find-result_selected { |
| 233 | color: var(--crust) !important; |
| 234 | background-color: var(--maroon); |
| 235 | } |
| 236 | |
| 237 | .ck-find-result { |
| 238 | color: var(--crust) !important; |
| 239 | background-color: var(--yellow); |
| 240 | } |
| 241 | |
| 242 | .note-detail-code-editor div.CodeMirror-selected, |
| 243 | .note-detail-code-editor div.CodeMirror-line::selection { |
| 244 | background-color: var(--surface0); |
| 245 | } |
| 246 | |
| 247 | .CodeMirror-matchingbracket { |
| 248 | text-decoration: none; |
| 249 | color: var(--mauve) !important; |
| 250 | border: 1px solid var(--sapphire); |
| 251 | } |
| 252 | |
| 253 | .CodeMirror-linenumber { |
| 254 | color: var(--lavender); |
| 255 | font-family: var(--monospace-font-family) !important; |
| 256 | } |
| 257 | |
| 258 | /* codeblocks */ |
| 259 | .ck-content pre { |
| 260 | background: var(--base); |
| 261 | border: 1px solid var(--surface2); |
| 262 | } |
| 263 | |
| 264 | .ck-editor__editable pre[data-language]:after { |
| 265 | background: transparent !important; |
| 266 | color: transparent !important; |
| 267 | } |