feat(ash): add Ash Dark + Ash Light themes on the 16-colour palette
This commit is contained in:
Richard Zink
+332
@@ -0,0 +1,332 @@
|
||||
/*
|
||||
* Ash Dark Theme for TriliumNext
|
||||
*
|
||||
* Derived from the current default (next) theme via #appThemeBase=next-dark.
|
||||
* Fixed dark variant.
|
||||
*
|
||||
* The "Ash" palette: Gruvbox hues cooled and desaturated toward a grey / ash
|
||||
* look (bone text on soot panels, ember accents). Same 16 colours as the
|
||||
* game's AshPalette (see yurakuden: docs/ash_palette.md).
|
||||
*
|
||||
* tones: void #100f12 panel #1c1b1f raised #29282c border #3a383d
|
||||
* ash #6d6a63 stone #999187 bone #e6dfd1 chalk #f3ede1
|
||||
* accents: ember #e0914f gold #d6b46a blood #c15c46 rot #b47e99
|
||||
* moss #8f9a5c steel #7c9aa1 violet #a585ac rust #a86a48
|
||||
*/
|
||||
|
||||
#trilium-app {
|
||||
--theme-style: dark;
|
||||
|
||||
/* Main surfaces */
|
||||
--main-background-color: #1c1b1f;
|
||||
--main-text-color: #e6dfd1;
|
||||
--main-border-color: #3a383d;
|
||||
--subtle-border-color: #29282c;
|
||||
--dropdown-border-color: #3a383d;
|
||||
--dropdown-shadow-opacity: 0.6;
|
||||
|
||||
/* Accented / highlight */
|
||||
--accented-background-color: #29282c;
|
||||
--more-accented-background-color: #3a383d;
|
||||
|
||||
/* Cards & dialogs */
|
||||
--card-background-color: #29282c;
|
||||
--card-background-hover-color: #3a383d;
|
||||
--card-border-color: #3a383d;
|
||||
--tool-dialog-background-color: #1c1b1f;
|
||||
--modal-background-color: #1c1b1f;
|
||||
--modal-border-color: #3a383d;
|
||||
|
||||
/* Text & muted */
|
||||
--muted-text-color: #999187;
|
||||
--menu-text-color: #e6dfd1;
|
||||
--menu-background-color: #1c1b1fe6;
|
||||
--menu-background-color-no-backdrop: #1c1b1f;
|
||||
|
||||
/* Links (steel by day, ember on hover) */
|
||||
--link-color: #7c9aa1;
|
||||
--link-hover-color: #e0914f;
|
||||
--link-hover-background: #e0914f24;
|
||||
|
||||
/* Inputs */
|
||||
--input-background-color: #29282c;
|
||||
--input-text-color: #e6dfd1;
|
||||
--input-placeholder-color: #99918780;
|
||||
--input-hover-background: #3a383d;
|
||||
--input-focus-outline-color: #e0914f;
|
||||
--input-focus-background: #3a383d;
|
||||
--input-focus-color: #f3ede1;
|
||||
--input-action-button-color: #999187;
|
||||
--input-action-button-hover: #f3ede1;
|
||||
|
||||
/* Selection */
|
||||
--selection-background-color: #e0914f;
|
||||
--hover-item-text-color: #f3ede1;
|
||||
--hover-item-background-color: #29282c;
|
||||
--active-item-text-color: #f3ede1;
|
||||
--active-item-background-color: #3a383d;
|
||||
|
||||
/* Left pane / launcher */
|
||||
--left-pane-background-color: #100f12;
|
||||
--left-pane-text-color: #999187;
|
||||
--left-pane-icon-color: #b0a89a;
|
||||
--left-pane-item-hover-background: #29282c;
|
||||
--left-pane-item-selected-background: #3a383d;
|
||||
--left-pane-item-selected-color: #f3ede1;
|
||||
--launcher-pane-background-color: #100f12;
|
||||
--launcher-pane-text-color: #999187;
|
||||
--launcher-pane-vert-background-color: #100f12;
|
||||
--launcher-pane-vert-text-color: #999187;
|
||||
--launcher-pane-horiz-background-color: #100f12;
|
||||
--launcher-pane-horiz-text-color: #999187;
|
||||
|
||||
/* Tabs & breadcrumb / window backgrounds */
|
||||
--window-background-color-bgfx: #100f12;
|
||||
--root-background: #100f12;
|
||||
--tab-background-color: #100f12;
|
||||
--note-split-background-color: #1c1b1f;
|
||||
--center-pane-background-color-bgfx: #1c1b1f;
|
||||
--launcher-pane-horiz-background-color-bgfx: #100f12;
|
||||
--center-pane-horiz-layout-background-color-bgfx: #1c1b1f;
|
||||
--center-pane-vert-layout-background-color-bgfx: #1c1b1f;
|
||||
|
||||
/* Tabs */
|
||||
--active-tab-background-color: #1c1b1f;
|
||||
--active-tab-text-color: #f3ede1;
|
||||
--inactive-tab-background-color: #100f12;
|
||||
--inactive-tab-text-color: #999187;
|
||||
--tab-close-button-hover-background: #29282c;
|
||||
--tab-close-button-hover-color: #c15c46;
|
||||
|
||||
/* Right pane */
|
||||
--right-pane-background-color: #100f12;
|
||||
--right-pane-heading-color: #e6dfd1;
|
||||
--right-pane-item-hover-background: #29282c;
|
||||
--right-pane-item-hover-color: #f3ede1;
|
||||
|
||||
/* Bottom panel */
|
||||
--bottom-panel-background-color: #100f12;
|
||||
--bottom-panel-title-bar-background-color: #1c1b1f;
|
||||
|
||||
/* Status bar */
|
||||
--status-bar-border-color: #3a383d;
|
||||
|
||||
/* Code / inline code */
|
||||
--inline-code-background-color: #29282c;
|
||||
--inline-code-border-color: #3a383d;
|
||||
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Note icons */
|
||||
--note-icon-background-color: #29282c;
|
||||
--note-icon-color: #e6dfd1;
|
||||
|
||||
/* Floating buttons */
|
||||
--floating-button-background-color: #29282c;
|
||||
--floating-button-color: #e6dfd1;
|
||||
--floating-button-hover-background: #3a383d;
|
||||
--floating-button-hover-color: #f3ede1;
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-background-color: #29282c;
|
||||
--tooltip-foreground-color: #e6dfd1;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-color: #3a383d;
|
||||
--scrollbar-thumb-hover-color: #54514f;
|
||||
--scrollbar-background-color: #100f12;
|
||||
|
||||
/* Checkboxes / tasks */
|
||||
--task-checkbox-done-color: #8f9a5c;
|
||||
--task-checkbox-glyph-color: #f3ede1;
|
||||
--task-checkbox-without-state-background: #3a383d;
|
||||
--task-checkbox-with-state-background: #e0914f;
|
||||
|
||||
/* Mermaid */
|
||||
--mermaid-theme: dark;
|
||||
|
||||
/* Buttons */
|
||||
--cmd-button-background-color: #3a383da0;
|
||||
--cmd-button-text-color: #e6dfd1;
|
||||
--cmd-button-hover-background-color: #54514fa0;
|
||||
--cmd-button-hover-text-color: #f3ede1;
|
||||
--icon-button-hover-background: #29282c;
|
||||
--icon-button-hover-color: #f3ede1;
|
||||
|
||||
/* Logs */
|
||||
--log-error-color: #c15c46;
|
||||
--log-info-color: #7c9aa1;
|
||||
--log-slow-color: #d6b46a;
|
||||
--log-success-color: #8f9a5c;
|
||||
|
||||
/* Badges */
|
||||
--badge-background-color: #3a383d;
|
||||
--badge-text-color: #e6dfd1;
|
||||
|
||||
/* CKEditor editor dropdowns / panels */
|
||||
--ck-color-base-foreground: #29282c;
|
||||
--ck-color-base-background: #1c1b1f;
|
||||
--ck-color-dialog-background: #1c1b1f;
|
||||
--ck-color-dropdown-panel-background: #29282c;
|
||||
--ck-color-dropdown-panel-border: #3a383d;
|
||||
--ck-color-list-background: #29282c;
|
||||
--ck-color-list-button-hover-background: #3a383d;
|
||||
--ck-color-list-button-on-background: #3a383d;
|
||||
--ck-color-button-default-background: #29282c;
|
||||
--ck-color-button-default-hover-background: #3a383d;
|
||||
--ck-color-button-on-background: #3a383d;
|
||||
--ck-color-button-on-hover-background: #54514f;
|
||||
--ck-color-button-action-background: #3a383d;
|
||||
--ck-color-button-action-hover-background: #54514f;
|
||||
--ck-color-input-background: #1c1b1f;
|
||||
--ck-editor-toolbar-button-on-background: #3a383d;
|
||||
--ck-editor-toolbar-button-on-color: #f3ede1;
|
||||
--ck-editor-toolbar-dropdown-button-open-background: #29282c;
|
||||
}
|
||||
|
||||
/* Menus & dropdowns render outside #trilium-app, so also set them globally. */
|
||||
:root {
|
||||
--menu-text-color: #e6dfd1;
|
||||
--menu-background-color: #1c1b1f;
|
||||
--menu-background-color-no-backdrop: #1c1b1f;
|
||||
--menu-item-icon-color: #999187;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #99918790;
|
||||
--menu-item-arrow-color: #999187a3;
|
||||
--menu-item-delimiter-color: #29282c;
|
||||
--menu-item-group-header-color: #999187;
|
||||
--menu-section-background-color: #1c1b1f;
|
||||
--menu-hover-item-background-color: #29282c;
|
||||
--menu-hover-item-text-color: #f3ede1;
|
||||
--hover-item-background-color: #29282c;
|
||||
--active-item-background-color: #3a383d;
|
||||
--dropdown-border-color: #29282c;
|
||||
--dropdown-item-icon-destructive-color: #c15c46;
|
||||
|
||||
--ck-color-base-text: #e6dfd1;
|
||||
--ck-color-text: #e6dfd1;
|
||||
--ck-color-base-foreground: #29282c;
|
||||
--ck-color-base-background: #1c1b1f;
|
||||
--ck-color-dialog-background: #1c1b1f;
|
||||
--ck-color-dropdown-panel-background: #29282c;
|
||||
--ck-color-dropdown-panel-border: #3a383d;
|
||||
--ck-color-list-background: #29282c;
|
||||
--ck-color-list-button-hover-background: #3a383d;
|
||||
--ck-color-list-button-on-background: #3a383d;
|
||||
--ck-color-list-button-on-text: #f3ede1;
|
||||
--ck-color-button-default-background: #29282c;
|
||||
--ck-color-button-default-hover-background: #3a383d;
|
||||
--ck-color-button-on-background: #3a383d;
|
||||
--ck-color-button-on-hover-background: #54514f;
|
||||
--ck-color-button-action-background: #3a383d;
|
||||
--ck-color-button-action-hover-background: #54514f;
|
||||
--ck-color-input-background: #1c1b1f;
|
||||
--ck-color-input-text: #e6dfd1;
|
||||
--ck-color-panel-background: #29282c;
|
||||
--ck-color-toolbar-background: #29282c;
|
||||
}
|
||||
|
||||
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: #1c1b1f !important;
|
||||
--menu-background-color-no-backdrop: #1c1b1f !important;
|
||||
--menu-section-background-color: #1c1b1f !important;
|
||||
background-color: #1c1b1f !important;
|
||||
}
|
||||
body.desktop .dropdown-menu::before,
|
||||
body.mobile .dropdown-menu::before {
|
||||
background-color: #1c1b1f !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item,
|
||||
body.mobile .dropdown-menu .dropdown-item {
|
||||
--custom-color: #e6dfd1 !important;
|
||||
color: #e6dfd1;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item:hover,
|
||||
body.desktop .dropdown-menu .dropdown-item:focus,
|
||||
body.desktop .dropdown-menu .dropdown-item.active {
|
||||
background-color: #29282c !important;
|
||||
color: #f3ede1;
|
||||
}
|
||||
|
||||
/* ============ NOTE HEADER BOXES (h2-h6) ============ */
|
||||
.ck-content h2 {
|
||||
background-color: rgba(224, 145, 79, 0.32);
|
||||
border-bottom: 2px solid rgba(224, 145, 79, 0.65);
|
||||
border-radius: 4px;
|
||||
padding: 0.25em 0.4em;
|
||||
}
|
||||
.ck-content h3 {
|
||||
background-color: rgba(124, 154, 161, 0.28);
|
||||
border-bottom: 2px solid rgba(124, 154, 161, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h4 {
|
||||
background-color: rgba(143, 154, 92, 0.28);
|
||||
border-bottom: 2px solid rgba(143, 154, 92, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h5 {
|
||||
background-color: rgba(165, 133, 172, 0.28);
|
||||
border-bottom: 2px solid rgba(165, 133, 172, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h6 {
|
||||
background-color: rgba(180, 126, 153, 0.28);
|
||||
border-bottom: 2px solid rgba(180, 126, 153, 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(224, 145, 79, 0.28) !important;
|
||||
color: #f3ede1;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid rgba(224, 145, 79, 0.55);
|
||||
}
|
||||
.ck-content table tbody td:first-child {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
color: #e6dfd1;
|
||||
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,
|
||||
.ck-content table .col-hover {
|
||||
background-color: rgba(124, 154, 161, 0.08) !important;
|
||||
}
|
||||
.ck-content table tbody tr:hover td.col-hover,
|
||||
.ck-content table thead th.col-hover {
|
||||
background-color: rgba(124, 154, 161, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ============ MERMAID ============ */
|
||||
.mermaid-render svg { width: 95%; height: auto; max-width: 100%; }
|
||||
Reference in New Issue
Block a user