midnight.css

/*
Midnight - Trilium Dark Mode Theme
https://github.com/cwilliams5/Midnight-Trilium-Dark-Mode
License at End of File

Built off trilium default base
https://github.com/zadam/trilium/blob/master/src/public/stylesheets/theme-light.css

Adjusted by me, using Google's material design guidelines and my thumb on the scale.
https://material.io/design/color/dark-theme.htm
*/

/* -------------------- Import Fonts -------------------- */

/* You should REALLY just install Inter and Fira Code:
https://github.com/rsms/inter
https://github.com/tonsky/FiraCode
But this will try and import them if you dont have them */

@import url('https://rsms.me/inter/inter.css');
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

/* -------------------- Root Trillium Theme -------------------- */
:root {
    /* either light or dark, colored theme with darker tones are also dark, used e.g. for note map node colors */
    --theme-style: dark;

    --main-font-family: Inter;
    --main-font-size: normal;

    --tree-font-family: Inter;
    --tree-font-size: normal;

    --detail-font-family: Inter;
    --detail-font-size: normal;

    --monospace-font-family: Fira Code;
    --monospace-font-size: normal;

    --main-background-color: #121212;
    --main-text-color: #dedede;
    --main-border-color: #aaa; 

    --accented-background-color: #033c53; /*  555 */
    --more-accented-background-color: #0784b5;  /*  777 */

    --button-background-color: transparent;
    --button-disabled-background-color: #222;
    --button-border-color: #ccc;
    --button-text-color: currentColor;
    --button-border-radius: 5px;

    --primary-button-background-color: #888;
    --primary-button-text-color: #FFF;
    --primary-button-border-color: #999;

    --muted-text-color: #bbb;

    --input-text-color: #ccc;
    --input-background-color: #333;

    --hover-item-text-color: #dedede; /* launcher bar, menus, etc */
    --hover-item-background-color: #0784b5; 

    --active-item-text-color: #ddd;
    --active-item-background-color: #0784b5;

    --menu-text-color: #dedede;
    --menu-background-color: #222;

    --modal-background-color: #333;
    --modal-backdrop-color: #444;

    --left-pane-background-color: #070707;
    --left-pane-text-color: #dedede;

    --launcher-pane-background-color: #1f1f1f;
    --launcher-pane-text-color: #AAAAAA;

    --active-tab-background-color: #033c53;
    --active-tab-hover-background-color: #0784b5;
    --active-tab-text-color: #ddd;

    --inactive-tab-background-color: #2c2c2c;
    --inactive-tab-hover-background-color: #0784b5;
    --inactive-tab-text-color: #bbb;

    --scrollbar-border-color: #888;
    --tooltip-background-color: #333;
    --link-color: #87CEFA;

    --mermaid-theme: dark;
}

/* -------------------- Beyond Root -------------------- */

/* That's all the official Trilium theme style gives us.
But it still doesn't look good.
We are going to have to get extracurricular. */

/* switch app icons  */
body .global-menu-button {
    background-image: url("../../../images/icon-grey.png"); 
}

/* opened note tab borders */
/* active */
.note-tab[active] .note-tab-wrapper {
    border: 1px solid rgba(187, 187, 187, 0.50);   
}
/* active hover */
.note-tab[active] .note-tab-wrapper:hover {
    border: 1px solid #FFF !important;
    color: #FFF !important;
}
/* inactive */
.note-tab:not([active]) .note-tab-wrapper {
 
}
/* inactive hover */
.note-tab:not([active]) .note-tab-wrapper:hover {
    border: 1px solid #FFF !important;
    color: #FFF !important;
}

/* tree list items */
/* hover */
#ft-id-1 .fancytree-node:hover {
    background-color:#0784b5;
    color: #FFF !important;
    border: 1px solid #FFF !important;
}
/* active */
#ft-id-1 .fancytree-active {
    border: 1px solid rgba(187, 187, 187, 0.50) !important;
}

/* floating tree buttons */
/* hover */
.tree-floating-button:hover {
    background-color:#0784b5 !important;
    color: #FFF !important;
}

/* backlinks menu */
.backlinks-items {
    background-color: #121212 !important;
    color: #dedede !important;
    border: 1px solid #FFF !important;
}

/* launcher pane */
/* icon hover */
#launcher-pane .button-widget:hover {
    color: #FFF !important;   
}
/* icons not caught by above rule */
#launcher-pane .right-dropdown-widget button:hover {
    color: #FFF !important;      
}

/* text label in find and replace dialog */
/* Zadam used this to address this issue in Trillium proper:
https://github.com/zadam/trilium/commit/83f8fac088f4bacbe9bed15637895f4b594fac14
Leaving here for now because (1) works in older versions (2) provides control of text color not just bg color */
.ck-find-and-replace-form__find .ck-labeled-field-view .ck-labeled-field-view__input-wrapper label.ck-label {
    background-color: #033c53 !important;
    color: #dedede !important;  
}

/* CKeditor find and replace highlights  */
/* while I could customize highlight color, leave the same so it matches the other trilium find method
But we should still update text color because are global whites look bad */
.ck-find-result {
    color: #000 !important;
}
.ck-find-result_selected {
    color: #000 !important;
}

/* attempt a grid layout for basic properties */
.basic-properties-widget {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, max-content))  !important;
}

/* attempt a grid layout for promoted attributes */
.promoted-attributes-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(400px, max-content))  !important;
}

/* @note link popup highlights
for some reason if I try a less specific selector the bg and border work but not the font color. */
body > div.ck-body-wrapper > div > div.ck.ck-balloon-panel.ck-balloon-panel_caret_se.ck-balloon-panel_visible > div > div.ck-balloon-rotator__content > ul > li > button.ck-on {
    background-color:#0784b5 !important;
    color: #FFF !important;
    border: 1px solid #FFF !important;  
}

/* fix main left bar calendar picker */
body ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* fix small calendar picker */
/* well turns, best I can tell, this is a Chromium widget that can't be themed?
https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker
I guess to theme it Trilium would need its own widget */

/* -------------------- Highly Opinionated -------------------- */
/* allow max width notes, but add slight side margins for gutter comfort */
.note-split {
    max-width:100% !important;
}
#center-pane {
    margin-left:0.5em !important;
    margin-right:0em !important;
}

/* -------------------- Extra Features -------------------- */

/* Zen Mode !
body.zen-mode #launcher-pane, body.zen-mode #left-pane, body.zen-mode .title-bar-buttons {
    display:none !important;
}
*/

/* Zen Mode Extreme */
/* display:none friendly */
body.zen-mode #launcher-pane, body.zen-mode #left-pane {
    display:none !important;
    height:0 !important;
    width:0 !important:
} 
/* display:none not friendly - some of these have an interactivity lag when coming back from display:none so another method must be used */
body.zen-mode .title-bar-buttons, body.zen-mode .tab-row-widget, body.zen-mode .title-row, body.zen-mode .ribbon-container, body.zen-mode .gutter, body.zen-mode #rest-pane > div:nth-child(1) {
    visibility: hidden !important;
    height:0 !important;
    width:0 !important:
} 
/* remove the margins we added in this theme for gutter comfort spacing during zen mode, because, well, there is no more gutter */
body.zen-mode #center-pane {
    margin-left:0em !important;
    margin-right:0em !important;
}

/* -------------------- Fixing Code View -------------------- */

/*
Trilium uses Code Mirror. Code Mirror has themes!
Code Mirror Themes can be previewed here:
https://codemirror.net/demo/theme.html
And the relevant code in their github, for example here is "material darker":
https://github.com/codemirror/CodeMirror/blob/master/theme/material-darker.css
We can't use this straight away in Trilium, we have to adapt it from the prefixed codemirror subtheme to the "default" code mirror theme Trilium expects. A find and replace like this does the job:
.cm-s-material-darker” to “.cm-s-default”

Hooray, now we can directly control the code theming!
*/

/*
    Code Mirror Theme: acdef
    Source: https://github.com/codemirror/CodeMirror/blob/master/theme/abcdef.css
*/
.cm-s-default.CodeMirror { background: #0f0f0f; color: #defdef; }
.cm-s-default div.CodeMirror-selected { background: #515151; }
.cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(56, 56, 56, 0.99); }
.cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(56, 56, 56, 0.99); }
.cm-s-default .CodeMirror-gutters { background: #555; border-right: 2px solid #314151; }
.cm-s-default .CodeMirror-guttermarker { color: #222; }
.cm-s-default .CodeMirror-guttermarker-subtle { color: azure; }
.cm-s-default .CodeMirror-linenumber { color: #FFFFFF; }
.cm-s-default .CodeMirror-cursor { border-left: 1px solid #00FF00; }

.cm-s-default span.cm-keyword { color: darkgoldenrod; font-weight: bold; }
.cm-s-default span.cm-atom { color: #77F; }
.cm-s-default span.cm-number { color: violet; }
.cm-s-default span.cm-def { color: #fffabc; }
.cm-s-default span.cm-variable { color: #abcdef; }
.cm-s-default span.cm-variable-2 { color: #cacbcc; }
.cm-s-default span.cm-variable-3, .cm-s-default span.cm-type { color: #def; }
.cm-s-default span.cm-property { color: #fedcba; }
.cm-s-default span.cm-operator { color: #ff0; }
.cm-s-default span.cm-comment { color: #7a7b7c; font-style: italic;}
.cm-s-default span.cm-string { color: #2b4; }
.cm-s-default span.cm-meta { color: #C9F; }
.cm-s-default span.cm-qualifier { color: #FFF700; }
.cm-s-default span.cm-builtin { color: #30aabc; }
.cm-s-default span.cm-bracket { color: #8a8a8a; }
.cm-s-default span.cm-tag { color: #FFDD44; }
.cm-s-default span.cm-attribute { color: #DDFF00; }
.cm-s-default span.cm-error { color: #FF0000; }
.cm-s-default span.cm-header { color: aquamarine; font-weight: bold; }
.cm-s-default span.cm-link { color: blueviolet; }

.cm-s-default .CodeMirror-activeline-background { background: #314151; }

/*
Code Mirror theme overrides:
Any part of the above Code Mirror theme we want to override
*/
.cm-s-default span.cm-comment { color: #8e9091; }

/*
Final Code Mirror Tweaks
There are some things even the Code Mirror themes don't tackle that we really need to fix.
*/

/* the matching highlight looks very bad */
.cm-matchhighlight {
    background-color: #033c53 !important;
}

/*
LICENSE

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.

In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org/>
*/