/* * Tokyo Night Day Theme for TriliumNext * * Fixed light variant (no automatic light/dark switching). * Palette: tokyonight.nvim day (folke, Apache-2.0) */ #trilium-app { --theme-style: light; /* Main surfaces */ --main-background-color: #e1e2e7; --main-text-color: #3760bf; --main-border-color: #c4c6dd; --subtle-border-color: #cfc9c2; --dropdown-border-color: #c4c6dd; --dropdown-shadow-opacity: 0.5; /* Accented / highlight */ --accented-background-color: #cfc9c2; --more-accented-background-color: #c4c6dd; /* Cards & dialogs */ --card-background-color: #cfc9c2; --card-background-hover-color: #c4c6dd; --card-border-color: #c4c6dd; --tool-dialog-background-color: #e1e2e7; --modal-background-color: #e1e2e7; --modal-border-color: #c4c6dd; /* Text & muted */ --muted-text-color: #a0a6c2; --menu-text-color: #3760bf; --menu-background-color: #cfc9c2; --menu-background-color-no-backdrop: #cfc9c2; /* Links */ --link-color: #2e7de9; --link-hover-color: #0db9d7; --link-hover-background: #0db9d724; /* Inputs */ --input-background-color: #c4c6dd60; --input-text-color: #3760bf; --input-placeholder-color: #a0a6c280; --input-hover-background: #9aa5ce60; --input-focus-outline-color: #2e7de9; --input-focus-background: #c4c6dd50; --input-focus-color: #3760bf; --input-action-button-color: #9aa5ce; --input-action-button-hover: #3760bf; /* Selection */ --selection-background-color: #2e7de9; --hover-item-text-color: #3760bf; --hover-item-background-color: #cfc9c2; --active-item-text-color: #3760bf; --active-item-background-color: #c4c6dd; /* Left pane / launcher */ --left-pane-background-color: #cfc9c2; --left-pane-text-color: #a0a6c2; --left-pane-icon-color: #a0a6c2; --left-pane-item-hover-background: #c4c6dd; --left-pane-item-selected-background: #c4c6dd; --left-pane-item-selected-color: #3760bf; --launcher-pane-background-color: #cfc9c2; --launcher-pane-text-color: #a0a6c2; --launcher-pane-vert-background-color: #cfc9c2; --launcher-pane-vert-text-color: #a0a6c2; --launcher-pane-horiz-background-color: #cfc9c2; --launcher-pane-horiz-text-color: #a0a6c2; /* Tabs & breadcrumb / window backgrounds */ --window-background-color-bgfx: #cfc9c2; --root-background: #cfc9c2; --tab-background-color: #cfc9c2; --note-split-background-color: #e1e2e7; --center-pane-background-color-bgfx: #e1e2e7; --launcher-pane-horiz-background-color-bgfx: #cfc9c2; --center-pane-horiz-layout-background-color-bgfx: #e1e2e7; --center-pane-vert-layout-background-color-bgfx: #e1e2e7; /* Tabs */ --active-tab-background-color: #e1e2e7; --active-tab-text-color: #3760bf; --inactive-tab-background-color: #e1e2e7; --inactive-tab-text-color: #a0a6c2; --tab-close-button-hover-background: #c4c6dd; --tab-close-button-hover-color: #f52a65; /* Right pane */ --right-pane-background-color: #cfc9c2; --right-pane-heading-color: #3760bf; --right-pane-item-hover-background: #c4c6dd; --right-pane-item-hover-color: #3760bf; /* Bottom panel */ --bottom-panel-background-color: #cfc9c2; --bottom-panel-title-bar-background-color: #e1e2e7; /* Status bar */ --status-bar-border-color: #c4c6dd; /* Code / inline code */ --inline-code-background-color: #cfc9c2; --inline-code-border-color: #c4c6dd; --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Note icons */ --note-icon-background-color: #cfc9c2; --note-icon-color: #3760bf; /* Floating buttons */ --floating-button-background-color: #cfc9c2; --floating-button-color: #3760bf; --floating-button-hover-background: #c4c6dd; --floating-button-hover-color: #3760bf; /* Tooltips */ --tooltip-background-color: #cfc9c2; --tooltip-foreground-color: #3760bf; /* Scrollbar */ --scrollbar-thumb-color: #c4c6dd; --scrollbar-thumb-hover-color: #9aa5ce; --scrollbar-background-color: #cfc9c2; /* Checkboxes / tasks */ --task-checkbox-done-color: #a0a6c2; --task-checkbox-glyph-color: #3760bf; --task-checkbox-without-state-background: #c4c6dd; --task-checkbox-with-state-background: #2e7de9; /* Mermaid */ --mermaid-theme: light; /* Buttons */ --cmd-button-background-color: #c4c6dda0; --cmd-button-text-color: #3760bf; --cmd-button-hover-background-color: #9aa5cea0; --cmd-button-hover-text-color: #3760bf; --icon-button-hover-background: #c4c6dd; --icon-button-hover-color: #3760bf; /* Logs */ --log-error-color: #f52a65; --log-info-color: #2e7de9; --log-slow-color: #b15c00; --log-success-color: #a0a6c2; /* Badges */ --badge-background-color: #c4c6dd; --badge-text-color: #3760bf; /* CKEditor editor dropdowns / panels (no yellow) */ --ck-color-base-foreground: #c4c6dd; --ck-color-base-background: #e1e2e7; --ck-color-dialog-background: #e1e2e7; --ck-color-dropdown-panel-background: #e1e2e7; --ck-color-dropdown-panel-border: #c4c6dd; --ck-color-list-background: #e1e2e7; --ck-color-list-button-hover-background: #c4c6dd; --ck-color-list-button-on-background: #c4c6dd; --ck-color-button-default-background: #cfc9c2; --ck-color-button-default-hover-background: #c4c6dd; --ck-color-button-on-background: #c4c6dd; --ck-color-button-on-hover-background: #9aa5ce; --ck-color-button-action-background: #c4c6dd; --ck-color-button-action-hover-background: #9aa5ce; --ck-color-input-background: #e1e2e7; --ck-editor-toolbar-button-on-background: #c4c6dd; --ck-editor-toolbar-button-on-color: #3760bf; --ck-editor-toolbar-dropdown-button-open-background: #cfc9c2; } /* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ :root { --menu-text-color: #3760bf; --menu-background-color: #e1e2e7; --menu-background-color-no-backdrop: #e1e2e7; --menu-item-icon-color: #9aa5ce; --menu-item-disabled-opacity: 0.5; --menu-item-keyboard-shortcut-color: #9aa5ce90; --menu-item-arrow-color: #9aa5cea3; --menu-item-delimiter-color: #c4c6dd; --menu-item-group-header-color: #a0a6c2; --menu-section-background-color: #e1e2e7; --menu-hover-item-background-color: #c4c6dd; --menu-hover-item-text-color: #3760bf; --hover-item-background-color: #c4c6dd; --active-item-background-color: #c4c6dd; --dropdown-border-color: #c4c6dd; --dropdown-item-icon-destructive-color: #f52a65; /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ --ck-color-base-text: #3760bf; --ck-color-text: #3760bf; --ck-color-base-foreground: #c4c6dd; --ck-color-base-background: #e1e2e7; --ck-color-dialog-background: #e1e2e7; --ck-color-dropdown-panel-background: #e1e2e7; --ck-color-dropdown-panel-border: #c4c6dd; --ck-color-list-background: #e1e2e7; --ck-color-list-button-hover-background: #c4c6dd; --ck-color-list-button-on-background: #c4c6dd; --ck-color-list-button-on-text: #3760bf; --ck-color-button-default-background: #cfc9c2; --ck-color-button-default-hover-background: #c4c6dd; --ck-color-button-on-background: #c4c6dd; --ck-color-button-on-hover-background: #9aa5ce; --ck-color-button-action-background: #c4c6dd; --ck-color-button-action-hover-background: #9aa5ce; --ck-color-input-background: #e1e2e7; --ck-color-input-text: #3760bf; --ck-color-panel-background: #e1e2e7; --ck-color-toolbar-background: #cfc9c2; } /* Force the note-tree context menu / dropdowns to a neutral, non-yellow background. */ body.desktop .dropdown-menu, body.desktop .dropdown-menu.tn-dropdown-menu, body.desktop .dropdown-menu.tn-dropdown-list, body.mobile .dropdown-menu { --menu-background-color: #e1e2e7 !important; --menu-background-color-no-backdrop: #e1e2e7 !important; --menu-section-background-color: #e1e2e7 !important; background-color: #e1e2e7 !important; } body.desktop .dropdown-menu::before, body.mobile .dropdown-menu::before { background-color: #e1e2e7 !important; backdrop-filter: none !important; } body.desktop .dropdown-menu .dropdown-item, body.mobile .dropdown-menu .dropdown-item { --custom-color: #3760bf !important; color: #3760bf; } body.desktop .dropdown-menu .dropdown-item:hover, body.desktop .dropdown-menu .dropdown-item:focus, body.desktop .dropdown-menu .dropdown-item.active { background-color: #c4c6dd !important; color: #3760bf; } /* ============ TREELINES (Vertical tree lines) ============ */ /* Base connector lines — Harbor neutral */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { border-left: 2.5px solid rgba(160, 166, 194, 0.8); border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { border-left: 2.5px solid rgba(160, 166, 194, 0.5); border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR red */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { border-left: 2.5px solid #f52a6580; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR orange */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { border-left: 2.5px solid #b15c0080; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR yellow */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { border-left: 2.5px solid #d8c36e80; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR green (light) */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { border-left: 2.5px solid #a0a6c280; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR green */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { border-left: 2.5px solid #a0a6c280; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR aqua/green */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { border-left: 2.5px solid #0db9d780; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR aqua/cyan */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { border-left: 2.5px solid #0db9d780; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR blue */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { border-left: 2.5px solid #2e7de980; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR blue/purple */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { border-left: 2.5px solid #2e7de980; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR purple */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { border-left: 2.5px solid #9854f180; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* COLOR pink/magenta */ div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { border-left: 2.5px solid #c6437d80; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* ============ NOTE HEADER BOXES (h2-h6) ============ */ /* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ .ck-content h2 { background-color: rgba(94, 129, 172, 0.18); border-bottom: 2px solid rgba(94, 129, 172, 0.45); border-radius: 4px; padding: 0.25em 0.4em; } .ck-content h3 { background-color: rgba(160, 166, 194, 0.14); border-bottom: 2px solid rgba(160, 166, 194, 0.38); border-radius: 4px; padding: 0.2em 0.35em; } .ck-content h4 { background-color: rgba(177, 92, 0, 0.14); border-bottom: 2px solid rgba(177, 92, 0, 0.38); border-radius: 4px; padding: 0.2em 0.35em; } .ck-content h5 { background-color: rgba(152, 84, 241, 0.12); border-bottom: 2px solid rgba(152, 84, 241, 0.35); border-radius: 4px; padding: 0.2em 0.35em; } .ck-content h6 { background-color: rgba(13, 185, 215, 0.12); border-bottom: 2px solid rgba(13, 185, 215, 0.35); border-radius: 4px; padding: 0.2em 0.35em; } /* ============ TABLES ============ */ .ck-content table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--main-border-color); border-radius: 8px; overflow: hidden; margin: 1em 0; } .ck-content table th, .ck-content table td { border: none; border-bottom: 1px solid var(--main-border-color); border-right: 1px solid var(--main-border-color); padding: 8px 12px; text-align: left; background-color: transparent !important; } .ck-content table th:last-child, .ck-content table td:last-child { border-right: none; } .ck-content table tr:last-child td { border-bottom: none; } .ck-content table thead th { background-color: rgba(94, 129, 172, 0.16) !important; color: #3760bf; font-weight: 700; border-bottom: 2px solid rgba(94, 129, 172, 0.40); } .ck-content table tbody td:first-child { background-color: rgba(0, 0, 0, 0.05) !important; color: #3760bf; font-weight: 600; white-space: nowrap; } .ck-content table tbody tr:nth-child(even) td:not(:first-child) { background-color: rgba(0, 0, 0, 0.04) !important; } .ck-content table tbody tr:hover td { background-color: rgba(94, 129, 172, 0.08) !important; } .ck-content table .col-hover { background-color: rgba(94, 129, 172, 0.08) !important; } .ck-content table tbody tr:hover td.col-hover, .ck-content table thead th.col-hover { background-color: rgba(94, 129, 172, 0.15) !important; }