diff --git a/Themes.md b/Themes.md index 1ebebb9..6cb26db 100644 --- a/Themes.md +++ b/Themes.md @@ -38,10 +38,12 @@ body.theme-my-theme { --button-border-color: #333; --button-text-color: #AFB8C6; --button-border-radius: 2px; + --primary-button-background-color: #6c757d; + --primary-button-text-color: white; + --primary-button-border-color: #6c757d; --muted-text-color: #86919F; --input-text-color: #AFB8C6; --input-background-color: #404552; - --modal-background-color: #404552; --hover-item-text-color: white; --hover-item-background-color: #4877B1; --active-item-text-color: white; @@ -50,11 +52,18 @@ body.theme-my-theme { --menu-background-color: #383C4A; --tooltip-background-color: #383C4A; --link-color: lightskyblue; + --modal-background-color: #404552; + --modal-backdrop-color: black; + --scrollbar-border-color: rgba(175, 184, 198, 0.5); } body.theme-my-theme .note-detail-text { font-size: 120%; } + +body.theme-steel-blue .CodeMirror { + filter: invert(100%) hue-rotate(180deg); +} ``` We define a custom font (provided by [[custom request handler]]) and then just define a bunch of CSS variables. These variables are then used in Trilium's CSS stylesheets. You can also use standard CSS selectors for further customization (open dev tools using `CTRL-SHIFT-I` to help with that), but keep in mind that HTML structure can change in future releases which might break your selectors. For that reason it is better to restrict yourself to use CSS variables as much as possible. diff --git a/images/dark-theme.png b/images/dark-theme.png index 087d867..22750d1 100644 Binary files a/images/dark-theme.png and b/images/dark-theme.png differ diff --git a/images/screenshot.png b/images/screenshot.png index 1d73ca4..8f64ce0 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/images/steel-blue.png b/images/steel-blue.png index 623ca01..ce189d5 100644 Binary files a/images/steel-blue.png and b/images/steel-blue.png differ