diff --git a/README.md b/README.md index 25ee7bb..d0ecd72 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Trilium Themes -Gruvbox, Harbor and Coffee themes for [TriliumNext](https://github.com/TriliumNext/Trilium) – +Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) – each available in a dark and a light variant. The themes are plain `text/css` files that override Trilium's `--*` variables on `#trilium-app` and the global menus. @@ -9,6 +9,8 @@ Trilium's `--*` variables on `#trilium-app` and the global menus. | **Gruvbox** | `gruvbox-dark.css` | `gruvbox-light.css` | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) | | **Harbor** | `harbor-dark.css` | `harbor-light.css` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) | | **Coffee** | `coffee-dark.css` | `coffee-latte.css` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) | +| **Solarized** | `solarized-dark.css` | `solarized-light.css` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) | +| **Tokyo Night** | `tokyonight-dark.css` | `tokyonight-light.css` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) | All variants are **fixed** (dark stays dark, light stays light) – Trilium user themes do not auto-switch with the system preference. Each theme is derived from Trilium's default `next` theme @@ -21,6 +23,8 @@ auto-switch with the system preference. Each theme is derived from Trilium's def | Gruvbox | bg `#282828` / fg `#ebdbb2` · red `#fb4934` green `#b8bb26` yellow `#fabd2f` | bg `#fbf1c7` / fg `#3c3836` · blue `#076678` aqua `#83a598` | | Harbor | bg `#1b1b1b` / fg `#efebdc` · coral `#e75a50` gold `#E1CE98` slate `#77838a` | bg `#dfe4c4` / fg `#1c2d28` · nord-blue `#5e81ac` | | Coffee | bg `#1d150f` / fg `#f0e2d0` · caramel `#e0a15c` cream-yellow `#ffda92` | bg `#E8E3C3` / fg `#2D1A1D` · berry `#8e2d53` | +| Solarized | bg `#002b36` / fg `#839496` · blue `#268bd2` cyan `#2aa198` | bg `#fdf6e3` / fg `#657b83` · blue `#268bd2` | +| Tokyo Night | bg `#24283b` / fg `#c0caf5` · blue `#7aa2f7` magenta `#bb9af7` | bg `#e1e2e7` / fg `#3760bf` · blue `#2e7de9` red `#f52a65` | ## Install in Trilium @@ -55,4 +59,6 @@ comment in each theme file): - **Gruvbox** – [morhetz/gruvbox](https://github.com/morhetz/gruvbox) - **Harbor / Harbordark** – [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) and [omarchy-harbordark-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) -- **Coffee / Coffee Latte** – [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) and [omarchy-coffee-latte-theme](https://github.com/megabyte0x/omarchy-coffee-latte-theme) \ No newline at end of file +- **Coffee / Coffee Latte** – [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) and [omarchy-coffee-latte-theme](https://github.com/megabyte0x/omarchy-coffee-latte-theme) +- **Solarized** – [ethanschoonover.com/solarized](https://ethanschoonover.com/solarized/) (MIT) +- **Tokyo Night / Day** – [folke/tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) \ No newline at end of file diff --git a/solarized-dark.css b/solarized-dark.css new file mode 100644 index 0000000..799b248 --- /dev/null +++ b/solarized-dark.css @@ -0,0 +1,409 @@ +/* + * Solarized Theme for TriliumNext + * + * Fixed dark variant (no automatic light/dark switching). + * Palette: Solarized (Ethan Schoonover, MIT) + */ + + +#trilium-app { + --theme-style: dark; + + /* Main surfaces */ + --main-background-color: #002b36; + --main-text-color: #839496; + --main-border-color: #073642; + --subtle-border-color: #073642; + --dropdown-border-color: #073642; + --dropdown-shadow-opacity: 0.6; + + /* Accented / highlight */ + --accented-background-color: #073642; + --more-accented-background-color: #073642; + + /* Cards & dialogs */ + --card-background-color: #073642; + --card-background-hover-color: #073642; + --card-border-color: #073642; + --tool-dialog-background-color: #002b36; + --modal-background-color: #002b36; + --modal-border-color: #073642; + + /* Text & muted */ + --muted-text-color: #859900; + --menu-text-color: #839496; + --menu-background-color: #073642e6; + --menu-background-color-no-backdrop: #002b36; + + /* Links */ + --link-color: #268bd2; + --link-hover-color: #b58900; + --link-hover-background: #b5890024; + + /* Inputs */ + --input-background-color: #07364260; + --input-text-color: #839496; + --input-placeholder-color: #85990080; + --input-hover-background: #07364260; + --input-focus-outline-color: #268bd2; + --input-focus-background: #07364250; + --input-focus-color: #839496; + --input-action-button-color: #859900; + --input-action-button-hover: #839496; + + /* Selection */ + --selection-background-color: #268bd2; + --hover-item-text-color: #839496; + --hover-item-background-color: #073642; + --active-item-text-color: #839496; + --active-item-background-color: #073642; + + /* Left pane / launcher */ + --left-pane-background-color: #002b36; + --left-pane-text-color: #859900; + --left-pane-icon-color: #586e75; + --left-pane-item-hover-background: #073642; + --left-pane-item-selected-background: #073642; + --left-pane-item-selected-color: #839496; + --launcher-pane-background-color: #002b36; + --launcher-pane-text-color: #859900; + --launcher-pane-vert-background-color: #002b36; + --launcher-pane-vert-text-color: #859900; + --launcher-pane-horiz-background-color: #002b36; + --launcher-pane-horiz-text-color: #859900; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #002b36; + --root-background: #002b36; + --tab-background-color: #002b36; + --note-split-background-color: #002b36; + --center-pane-background-color-bgfx: #002b36; + --launcher-pane-horiz-background-color-bgfx: #002b36; + --center-pane-horiz-layout-background-color-bgfx: #002b36; + --center-pane-vert-layout-background-color-bgfx: #002b36; + + /* Tabs */ + --active-tab-background-color: #002b36; + --active-tab-text-color: #839496; + --inactive-tab-background-color: #002b36; + --inactive-tab-text-color: #859900; + --tab-close-button-hover-background: #073642; + --tab-close-button-hover-color: #dc322f; + + /* Right pane */ + --right-pane-background-color: #002b36; + --right-pane-heading-color: #839496; + --right-pane-item-hover-background: #073642; + --right-pane-item-hover-color: #839496; + + /* Bottom panel */ + --bottom-panel-background-color: #002b36; + --bottom-panel-title-bar-background-color: #002b36; + + /* Status bar */ + --status-bar-border-color: #073642; + + /* Code / inline code */ + --inline-code-background-color: #073642; + --inline-code-border-color: #073642; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + + /* Note icons */ + --note-icon-background-color: #073642; + --note-icon-color: #839496; + + /* Floating buttons */ + --floating-button-background-color: #073642; + --floating-button-color: #839496; + --floating-button-hover-background: #073642; + --floating-button-hover-color: #839496; + + /* Tooltips */ + --tooltip-background-color: #073642; + --tooltip-foreground-color: #839496; + + /* Scrollbar */ + --scrollbar-thumb-color: #073642; + --scrollbar-thumb-hover-color: #073642; + --scrollbar-background-color: #002b36; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #859900; + --task-checkbox-glyph-color: #839496; + --task-checkbox-without-state-background: #073642; + --task-checkbox-with-state-background: #268bd2; + + /* Mermaid */ + --mermaid-theme: dark; + + /* Buttons */ + --cmd-button-background-color: #073642a0; + --cmd-button-text-color: #839496; + --cmd-button-hover-background-color: #073642a0; + --cmd-button-hover-text-color: #839496; + --icon-button-hover-background: #073642; + --icon-button-hover-color: #839496; + + /* Logs */ + --log-error-color: #dc322f; + --log-info-color: #268bd2; + --log-slow-color: #b58900; + --log-success-color: #859900; + + /* Badges */ + --badge-background-color: #073642; + --badge-text-color: #839496; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #073642; + --ck-color-base-background: #002b36; + --ck-color-dialog-background: #002b36; + --ck-color-dropdown-panel-background: #073642; + --ck-color-dropdown-panel-border: #073642; + --ck-color-list-background: #073642; + --ck-color-list-button-hover-background: #073642; + --ck-color-list-button-on-background: #073642; + --ck-color-button-default-background: #073642; + --ck-color-button-default-hover-background: #073642; + --ck-color-button-on-background: #073642; + --ck-color-button-on-hover-background: #073642; + --ck-color-button-action-background: #073642; + --ck-color-button-action-hover-background: #073642; + --ck-color-input-background: #002b36; + --ck-editor-toolbar-button-on-background: #073642; + --ck-editor-toolbar-button-on-color: #839496; + --ck-editor-toolbar-dropdown-button-open-background: #073642; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #839496; + --menu-background-color: #002b36; + --menu-background-color-no-backdrop: #002b36; + --menu-item-icon-color: #859900; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #85990090; + --menu-item-arrow-color: #859900a3; + --menu-item-delimiter-color: #073642; + --menu-item-group-header-color: #859900; + --menu-section-background-color: #002b36; + --menu-hover-item-background-color: #073642; + --menu-hover-item-text-color: #839496; + --hover-item-background-color: #073642; + --active-item-background-color: #073642; + --dropdown-border-color: #073642; + --dropdown-item-icon-destructive-color: #dc322f; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #839496; + --ck-color-text: #839496; + --ck-color-base-foreground: #073642; + --ck-color-base-background: #002b36; + --ck-color-dialog-background: #002b36; + --ck-color-dropdown-panel-background: #073642; + --ck-color-dropdown-panel-border: #073642; + --ck-color-list-background: #073642; + --ck-color-list-button-hover-background: #073642; + --ck-color-list-button-on-background: #073642; + --ck-color-list-button-on-text: #839496; + --ck-color-button-default-background: #073642; + --ck-color-button-default-hover-background: #073642; + --ck-color-button-on-background: #073642; + --ck-color-button-on-hover-background: #073642; + --ck-color-button-action-background: #073642; + --ck-color-button-action-hover-background: #073642; + --ck-color-input-background: #002b36; + --ck-color-input-text: #839496; + --ck-color-panel-background: #073642; + --ck-color-toolbar-background: #073642; +} + +/* Force the note-tree context menu / dropdowns to the Harbordark 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: #002b36 !important; + --menu-background-color-no-backdrop: #002b36 !important; + --menu-section-background-color: #002b36 !important; + background-color: #002b36 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #002b36 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #839496 !important; + color: #839496; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #073642 !important; + color: #839496; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbordark neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(133, 153, 0, 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(133, 153, 0, 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 #dc322f80; + 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 #dc816480; + 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 #b5890080; + 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 #85990080; + 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 #85990080; + 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 #83949680; + 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 #83949680; + 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 #83949680; + 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 #268bd280; + 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 #268bd280; + 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 #268bd280; + 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(38, 107, 210, 0.30); + border-bottom: 2px solid rgba(38, 107, 210, 0.6); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(133, 153, 0, 0.25); + border-bottom: 2px solid rgba(133, 153, 0, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(181, 137, 0, 0.22); + border-bottom: 2px solid rgba(181, 137, 0, 0.55); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(131, 148, 150, 0.25); + border-bottom: 2px solid rgba(131, 148, 150, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(229, 137, 128, 0.25); + border-bottom: 2px solid rgba(229, 137, 128, 0.6); + 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(38, 107, 210, 0.20) !important; + color: #839496; + font-weight: 700; + border-bottom: 2px solid rgba(38, 107, 210, 0.45); +} +.ck-content table tbody td:first-child { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #839496; + font-weight: 600; + white-space: nowrap; +} +.ck-content table tbody tr:nth-child(even) td:not(:first-child) { + background-color: rgba(255, 255, 255, 0.04) !important; +} +.ck-content table tbody tr:hover td { + background-color: rgba(38, 107, 210, 0.10) !important; +} +.ck-content table .col-hover { + background-color: rgba(38, 107, 210, 0.10) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(38, 107, 210, 0.18) !important; +} \ No newline at end of file diff --git a/solarized-light.css b/solarized-light.css new file mode 100644 index 0000000..d3d42b0 --- /dev/null +++ b/solarized-light.css @@ -0,0 +1,409 @@ +/* + * Solarized Light Theme for TriliumNext + * + * Fixed light variant (no automatic light/dark switching). + * Palette: Solarized (Ethan Schoonover, MIT) + */ + + +#trilium-app { + --theme-style: light; + + /* Main surfaces */ + --main-background-color: #fdf6e3; + --main-text-color: #657b83; + --main-border-color: #93a1a1; + --subtle-border-color: #eee8d5; + --dropdown-border-color: #93a1a1; + --dropdown-shadow-opacity: 0.5; + + /* Accented / highlight */ + --accented-background-color: #eee8d5; + --more-accented-background-color: #93a1a1; + + /* Cards & dialogs */ + --card-background-color: #eee8d5; + --card-background-hover-color: #93a1a1; + --card-border-color: #93a1a1; + --tool-dialog-background-color: #eee8d5; + --modal-background-color: #eee8d5; + --modal-border-color: #93a1a1; + + /* Text & muted */ + --muted-text-color: #586e75; + --menu-text-color: #657b83; + --menu-background-color: #eee8d5; + --menu-background-color-no-backdrop: #eee8d5; + + /* Links */ + --link-color: #268bd2; + --link-hover-color: #2aa198; + --link-hover-background: #2aa19824; + + /* Inputs */ + --input-background-color: #93a1a160; + --input-text-color: #657b83; + --input-placeholder-color: #586e7580; + --input-hover-background: #93a1a160; + --input-focus-outline-color: #268bd2; + --input-focus-background: #93a1a150; + --input-focus-color: #657b83; + --input-action-button-color: #93a1a1; + --input-action-button-hover: #657b83; + + /* Selection */ + --selection-background-color: #268bd2; + --hover-item-text-color: #657b83; + --hover-item-background-color: #eee8d5; + --active-item-text-color: #657b83; + --active-item-background-color: #93a1a1; + + /* Left pane / launcher */ + --left-pane-background-color: #eee8d5; + --left-pane-text-color: #586e75; + --left-pane-icon-color: #586e75; + --left-pane-item-hover-background: #93a1a1; + --left-pane-item-selected-background: #93a1a1; + --left-pane-item-selected-color: #657b83; + --launcher-pane-background-color: #eee8d5; + --launcher-pane-text-color: #586e75; + --launcher-pane-vert-background-color: #eee8d5; + --launcher-pane-vert-text-color: #586e75; + --launcher-pane-horiz-background-color: #eee8d5; + --launcher-pane-horiz-text-color: #586e75; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #eee8d5; + --root-background: #eee8d5; + --tab-background-color: #eee8d5; + --note-split-background-color: #fdf6e3; + --center-pane-background-color-bgfx: #fdf6e3; + --launcher-pane-horiz-background-color-bgfx: #eee8d5; + --center-pane-horiz-layout-background-color-bgfx: #fdf6e3; + --center-pane-vert-layout-background-color-bgfx: #fdf6e3; + + /* Tabs */ + --active-tab-background-color: #eee8d5; + --active-tab-text-color: #657b83; + --inactive-tab-background-color: #fdf6e3; + --inactive-tab-text-color: #586e75; + --tab-close-button-hover-background: #93a1a1; + --tab-close-button-hover-color: #dc322f; + + /* Right pane */ + --right-pane-background-color: #eee8d5; + --right-pane-heading-color: #657b83; + --right-pane-item-hover-background: #93a1a1; + --right-pane-item-hover-color: #657b83; + + /* Bottom panel */ + --bottom-panel-background-color: #eee8d5; + --bottom-panel-title-bar-background-color: #fdf6e3; + + /* Status bar */ + --status-bar-border-color: #93a1a1; + + /* Code / inline code */ + --inline-code-background-color: #eee8d5; + --inline-code-border-color: #93a1a1; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + + /* Note icons */ + --note-icon-background-color: #eee8d5; + --note-icon-color: #657b83; + + /* Floating buttons */ + --floating-button-background-color: #eee8d5; + --floating-button-color: #657b83; + --floating-button-hover-background: #93a1a1; + --floating-button-hover-color: #657b83; + + /* Tooltips */ + --tooltip-background-color: #eee8d5; + --tooltip-foreground-color: #657b83; + + /* Scrollbar */ + --scrollbar-thumb-color: #93a1a1; + --scrollbar-thumb-hover-color: #93a1a1; + --scrollbar-background-color: #eee8d5; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #586e75; + --task-checkbox-glyph-color: #657b83; + --task-checkbox-without-state-background: #93a1a1; + --task-checkbox-with-state-background: #268bd2; + + /* Mermaid */ + --mermaid-theme: light; + + /* Buttons */ + --cmd-button-background-color: #93a1a1a0; + --cmd-button-text-color: #657b83; + --cmd-button-hover-background-color: #93a1a1a0; + --cmd-button-hover-text-color: #657b83; + --icon-button-hover-background: #93a1a1; + --icon-button-hover-color: #657b83; + + /* Logs */ + --log-error-color: #dc322f; + --log-info-color: #268bd2; + --log-slow-color: #cb4b16; + --log-success-color: #586e75; + + /* Badges */ + --badge-background-color: #93a1a1; + --badge-text-color: #657b83; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #93a1a1; + --ck-color-base-background: #fdf6e3; + --ck-color-dialog-background: #fdf6e3; + --ck-color-dropdown-panel-background: #fdf6e3; + --ck-color-dropdown-panel-border: #93a1a1; + --ck-color-list-background: #fdf6e3; + --ck-color-list-button-hover-background: #93a1a1; + --ck-color-list-button-on-background: #93a1a1; + --ck-color-button-default-background: #eee8d5; + --ck-color-button-default-hover-background: #93a1a1; + --ck-color-button-on-background: #93a1a1; + --ck-color-button-on-hover-background: #93a1a1; + --ck-color-button-action-background: #93a1a1; + --ck-color-button-action-hover-background: #93a1a1; + --ck-color-input-background: #fdf6e3; + --ck-editor-toolbar-button-on-background: #93a1a1; + --ck-editor-toolbar-button-on-color: #657b83; + --ck-editor-toolbar-dropdown-button-open-background: #eee8d5; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #657b83; + --menu-background-color: #fdf6e3; + --menu-background-color-no-backdrop: #fdf6e3; + --menu-item-icon-color: #93a1a1; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #93a1a190; + --menu-item-arrow-color: #93a1a1a3; + --menu-item-delimiter-color: #93a1a1; + --menu-item-group-header-color: #586e75; + --menu-section-background-color: #fdf6e3; + --menu-hover-item-background-color: #93a1a1; + --menu-hover-item-text-color: #657b83; + --hover-item-background-color: #93a1a1; + --active-item-background-color: #93a1a1; + --dropdown-border-color: #93a1a1; + --dropdown-item-icon-destructive-color: #dc322f; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #657b83; + --ck-color-text: #657b83; + --ck-color-base-foreground: #93a1a1; + --ck-color-base-background: #fdf6e3; + --ck-color-dialog-background: #fdf6e3; + --ck-color-dropdown-panel-background: #fdf6e3; + --ck-color-dropdown-panel-border: #93a1a1; + --ck-color-list-background: #fdf6e3; + --ck-color-list-button-hover-background: #93a1a1; + --ck-color-list-button-on-background: #93a1a1; + --ck-color-list-button-on-text: #657b83; + --ck-color-button-default-background: #eee8d5; + --ck-color-button-default-hover-background: #93a1a1; + --ck-color-button-on-background: #93a1a1; + --ck-color-button-on-hover-background: #93a1a1; + --ck-color-button-action-background: #93a1a1; + --ck-color-button-action-hover-background: #93a1a1; + --ck-color-input-background: #fdf6e3; + --ck-color-input-text: #657b83; + --ck-color-panel-background: #fdf6e3; + --ck-color-toolbar-background: #eee8d5; +} + +/* 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: #fdf6e3 !important; + --menu-background-color-no-backdrop: #fdf6e3 !important; + --menu-section-background-color: #fdf6e3 !important; + background-color: #fdf6e3 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #fdf6e3 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #657b83 !important; + color: #657b83; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #93a1a1 !important; + color: #657b83; +} + +/* ============ 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(88, 110, 117, 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(88, 110, 117, 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 #dc322f80; + 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 #cb4b1680; + 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 #586e7580; + 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 #586e7580; + 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 #2aa19880; + 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 #2aa19880; + 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 #268bd280; + 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 #268bd280; + 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 #d3368280; + 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 #d3368280; + 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(88, 110, 117, 0.14); + border-bottom: 2px solid rgba(88, 110, 117, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(203, 75, 22, 0.14); + border-bottom: 2px solid rgba(203, 75, 22, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(211, 54, 130, 0.12); + border-bottom: 2px solid rgba(211, 54, 130, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(42, 161, 152, 0.12); + border-bottom: 2px solid rgba(42, 161, 152, 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: #657b83; + 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: #657b83; + 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; +} \ No newline at end of file diff --git a/tokyonight-dark.css b/tokyonight-dark.css new file mode 100644 index 0000000..a14cb25 --- /dev/null +++ b/tokyonight-dark.css @@ -0,0 +1,409 @@ +/* + * Tokyo Night Theme for TriliumNext + * + * Fixed dark variant (no automatic light/dark switching). + * Palette: tokyonight.nvim (folke, Apache-2.0) + */ + + +#trilium-app { + --theme-style: dark; + + /* Main surfaces */ + --main-background-color: #24283b; + --main-text-color: #c0caf5; + --main-border-color: #292e42; + --subtle-border-color: #1a1b26; + --dropdown-border-color: #292e42; + --dropdown-shadow-opacity: 0.6; + + /* Accented / highlight */ + --accented-background-color: #1a1b26; + --more-accented-background-color: #292e42; + + /* Cards & dialogs */ + --card-background-color: #1a1b26; + --card-background-hover-color: #292e42; + --card-border-color: #292e42; + --tool-dialog-background-color: #16161e; + --modal-background-color: #16161e; + --modal-border-color: #292e42; + + /* Text & muted */ + --muted-text-color: #9ece6a; + --menu-text-color: #c0caf5; + --menu-background-color: #1a1b26e6; + --menu-background-color-no-backdrop: #16161e; + + /* Links */ + --link-color: #7aa2f7; + --link-hover-color: #e0af68; + --link-hover-background: #e0af6824; + + /* Inputs */ + --input-background-color: #292e4260; + --input-text-color: #c0caf5; + --input-placeholder-color: #9ece6a80; + --input-hover-background: #292e4260; + --input-focus-outline-color: #7aa2f7; + --input-focus-background: #292e4250; + --input-focus-color: #c0caf5; + --input-action-button-color: #9ece6a; + --input-action-button-hover: #c0caf5; + + /* Selection */ + --selection-background-color: #7aa2f7; + --hover-item-text-color: #c0caf5; + --hover-item-background-color: #1a1b26; + --active-item-text-color: #c0caf5; + --active-item-background-color: #292e42; + + /* Left pane / launcher */ + --left-pane-background-color: #16161e; + --left-pane-text-color: #9ece6a; + --left-pane-icon-color: #565f89; + --left-pane-item-hover-background: #1a1b26; + --left-pane-item-selected-background: #292e42; + --left-pane-item-selected-color: #c0caf5; + --launcher-pane-background-color: #16161e; + --launcher-pane-text-color: #9ece6a; + --launcher-pane-vert-background-color: #16161e; + --launcher-pane-vert-text-color: #9ece6a; + --launcher-pane-horiz-background-color: #16161e; + --launcher-pane-horiz-text-color: #9ece6a; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #16161e; + --root-background: #16161e; + --tab-background-color: #16161e; + --note-split-background-color: #24283b; + --center-pane-background-color-bgfx: #24283b; + --launcher-pane-horiz-background-color-bgfx: #16161e; + --center-pane-horiz-layout-background-color-bgfx: #24283b; + --center-pane-vert-layout-background-color-bgfx: #24283b; + + /* Tabs */ + --active-tab-background-color: #16161e; + --active-tab-text-color: #c0caf5; + --inactive-tab-background-color: #24283b; + --inactive-tab-text-color: #9ece6a; + --tab-close-button-hover-background: #1a1b26; + --tab-close-button-hover-color: #f7768e; + + /* Right pane */ + --right-pane-background-color: #16161e; + --right-pane-heading-color: #c0caf5; + --right-pane-item-hover-background: #1a1b26; + --right-pane-item-hover-color: #c0caf5; + + /* Bottom panel */ + --bottom-panel-background-color: #16161e; + --bottom-panel-title-bar-background-color: #24283b; + + /* Status bar */ + --status-bar-border-color: #292e42; + + /* Code / inline code */ + --inline-code-background-color: #1a1b26; + --inline-code-border-color: #292e42; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + + /* Note icons */ + --note-icon-background-color: #1a1b26; + --note-icon-color: #c0caf5; + + /* Floating buttons */ + --floating-button-background-color: #1a1b26; + --floating-button-color: #c0caf5; + --floating-button-hover-background: #292e42; + --floating-button-hover-color: #c0caf5; + + /* Tooltips */ + --tooltip-background-color: #1a1b26; + --tooltip-foreground-color: #c0caf5; + + /* Scrollbar */ + --scrollbar-thumb-color: #292e42; + --scrollbar-thumb-hover-color: #292e42; + --scrollbar-background-color: #16161e; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #9ece6a; + --task-checkbox-glyph-color: #c0caf5; + --task-checkbox-without-state-background: #292e42; + --task-checkbox-with-state-background: #7aa2f7; + + /* Mermaid */ + --mermaid-theme: dark; + + /* Buttons */ + --cmd-button-background-color: #292e42a0; + --cmd-button-text-color: #c0caf5; + --cmd-button-hover-background-color: #292e42a0; + --cmd-button-hover-text-color: #c0caf5; + --icon-button-hover-background: #1a1b26; + --icon-button-hover-color: #c0caf5; + + /* Logs */ + --log-error-color: #f7768e; + --log-info-color: #7aa2f7; + --log-slow-color: #e0af68; + --log-success-color: #9ece6a; + + /* Badges */ + --badge-background-color: #292e42; + --badge-text-color: #c0caf5; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #1a1b26; + --ck-color-base-background: #24283b; + --ck-color-dialog-background: #24283b; + --ck-color-dropdown-panel-background: #1a1b26; + --ck-color-dropdown-panel-border: #292e42; + --ck-color-list-background: #1a1b26; + --ck-color-list-button-hover-background: #292e42; + --ck-color-list-button-on-background: #292e42; + --ck-color-button-default-background: #1a1b26; + --ck-color-button-default-hover-background: #292e42; + --ck-color-button-on-background: #292e42; + --ck-color-button-on-hover-background: #292e42; + --ck-color-button-action-background: #292e42; + --ck-color-button-action-hover-background: #292e42; + --ck-color-input-background: #24283b; + --ck-editor-toolbar-button-on-background: #292e42; + --ck-editor-toolbar-button-on-color: #c0caf5; + --ck-editor-toolbar-dropdown-button-open-background: #1a1b26; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #c0caf5; + --menu-background-color: #24283b; + --menu-background-color-no-backdrop: #24283b; + --menu-item-icon-color: #9ece6a; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #9ece6a90; + --menu-item-arrow-color: #9ece6aa3; + --menu-item-delimiter-color: #1a1b26; + --menu-item-group-header-color: #9ece6a; + --menu-section-background-color: #24283b; + --menu-hover-item-background-color: #1a1b26; + --menu-hover-item-text-color: #c0caf5; + --hover-item-background-color: #1a1b26; + --active-item-background-color: #292e42; + --dropdown-border-color: #1a1b26; + --dropdown-item-icon-destructive-color: #f7768e; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #c0caf5; + --ck-color-text: #c0caf5; + --ck-color-base-foreground: #1a1b26; + --ck-color-base-background: #24283b; + --ck-color-dialog-background: #24283b; + --ck-color-dropdown-panel-background: #1a1b26; + --ck-color-dropdown-panel-border: #292e42; + --ck-color-list-background: #1a1b26; + --ck-color-list-button-hover-background: #292e42; + --ck-color-list-button-on-background: #292e42; + --ck-color-list-button-on-text: #c0caf5; + --ck-color-button-default-background: #1a1b26; + --ck-color-button-default-hover-background: #292e42; + --ck-color-button-on-background: #292e42; + --ck-color-button-on-hover-background: #292e42; + --ck-color-button-action-background: #292e42; + --ck-color-button-action-hover-background: #292e42; + --ck-color-input-background: #24283b; + --ck-color-input-text: #c0caf5; + --ck-color-panel-background: #1a1b26; + --ck-color-toolbar-background: #1a1b26; +} + +/* Force the note-tree context menu / dropdowns to the Harbordark 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: #24283b !important; + --menu-background-color-no-backdrop: #24283b !important; + --menu-section-background-color: #24283b !important; + background-color: #24283b !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #24283b !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #c0caf5 !important; + color: #c0caf5; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #1a1b26 !important; + color: #c0caf5; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbordark neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(158, 206, 106, 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(158, 206, 106, 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 #f7768e80; + 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 #dc816480; + 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 #e0af6880; + 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 #9ece6a80; + 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 #9ece6a80; + 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 #a9b1d680; + 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 #a9b1d680; + 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 #a9b1d680; + 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 #7aa2f780; + 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 #7aa2f780; + 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 #7aa2f780; + 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(122, 162, 247, 0.30); + border-bottom: 2px solid rgba(122, 162, 247, 0.6); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(158, 206, 106, 0.25); + border-bottom: 2px solid rgba(158, 206, 106, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(224, 175, 104, 0.22); + border-bottom: 2px solid rgba(224, 175, 104, 0.55); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(169, 177, 214, 0.25); + border-bottom: 2px solid rgba(169, 177, 214, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(229, 137, 128, 0.25); + border-bottom: 2px solid rgba(229, 137, 128, 0.6); + 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(122, 162, 247, 0.20) !important; + color: #c0caf5; + font-weight: 700; + border-bottom: 2px solid rgba(122, 162, 247, 0.45); +} +.ck-content table tbody td:first-child { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #c0caf5; + font-weight: 600; + white-space: nowrap; +} +.ck-content table tbody tr:nth-child(even) td:not(:first-child) { + background-color: rgba(255, 255, 255, 0.04) !important; +} +.ck-content table tbody tr:hover td { + background-color: rgba(122, 162, 247, 0.10) !important; +} +.ck-content table .col-hover { + background-color: rgba(122, 162, 247, 0.10) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(122, 162, 247, 0.18) !important; +} \ No newline at end of file diff --git a/tokyonight-light.css b/tokyonight-light.css new file mode 100644 index 0000000..98ed069 --- /dev/null +++ b/tokyonight-light.css @@ -0,0 +1,409 @@ +/* + * 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; +} \ No newline at end of file