In Trilium, select dark theme, create a CSS
note with the code and add the atttribute @appCss
(yes, that's hacky / not a full theme, but it works).
Code (v2.1 for v0.40):
/*
https://github.com/zadam/trilium/wiki/Themes
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
https://caniuse.com/#feat=css-filters
https://en.wikipedia.org/wiki/HSL_and_HSV
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
https://www.w3schools.com/colors/colors_converter.asp
*/
/* Better contrast */
body.theme-dark {
--main-background-color: hsl(0, 0%, 15%) !important;
--content-background-color: hsl(0, 0%, 20%) !important;
--input-background-color: var(--content-background-color) !important;
--header-background-color: var(--main-background-color) !important;
--modal-background-color: hsl(0, 0%, 22%) !important;
--menu-background-color: hsl(0, 0%, 12%) !important;
}
#center-pane {
background-color: var(--content-background-color) !important;
}
/* Only allow content/metadata selection */
#topbar, #title-bar-buttons, #toolbar, .card-header, .note-title-row, .CodeMirror-linenumber {
user-select: none;
}
/* Better todo list */
.ck-content .todo-list li, .todo-list__label {
margin-bottom: 0px !important;
}
.ck-content .todo-list li .todo-list {
margin-top: 0px !important;
margin-bottom: 5px !important;
}