updated screenshots

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.