mirror of
https://github.com/cwilliams5/Midnight-Trilium-Dark-Mode.git
synced 2025-09-10 09:18:28 -04:00
Initial Checkin
Initial Check in v1.0
This commit is contained in:
Cody Williams
255
midnight.css
Normal file
255
midnight.css
Normal file
@@ -0,0 +1,255 @@
|
||||
/*
|
||||
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: #033c53;
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
/* backlinks menu */
|
||||
.backlinks-items {
|
||||
background-color: #121212 !important;
|
||||
color: #dedede !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 */
|
||||
|
||||
/* -------------------- 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/>
|
||||
*/
|
||||
Reference in New Issue
Block a user