kestrove/kestrove-desktop
2
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases 1 Wiki Activity

Colour themes, synced across devices (beta)
ci / build (ubuntu-22.04) (push) Canceled after 0s
Details
ci / build (windows-2025) (push) Canceled after 0s
Details
ci / deny (push) Canceled after 0s
Details

Browse Source 
Seven themes (Spruce, Ocean, Violet, Rose, Crimson, Amber, Graphite) that
change only the brand colour, all AA in light and dark. "Same theme on all
my devices" saves the choice in the encrypted vault and adopts it after
unlocking and syncing.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
sami
2026-10-27 00:23:42 +07:00
co-authored by Claude Opus 5.5
parent fb53b7d907
commit 10a9507aa2
4 changed files with 241 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+14
View File
@@ -104,3 +104,17 @@ summary { cursor: pointer; color: var(--text-2); }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1\.5); margin: 0 0 var(--space-3); }
.tag-row .tag { font: 500 12px/16px var(--font-sans); color: var(--text-2); background: var(--surface-2); border-radius: var(--radius-sm); padding: 4px 8px; }
.rail-tags { display: contents; }
/* Colour theme swatches (Settings). Fixed colours: each dot shows its theme, whatever theme is active. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-1); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.swatch[aria-checked="true"] { color: var(--text); }
.swatch .dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px transparent; }
.swatch[aria-checked="true"] .dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-2); }
.swatch[data-swatch="spruce"] .dot { background: #19604f; }
.swatch[data-swatch="ocean"] .dot { background: #1d5a9e; }
.swatch[data-swatch="violet"] .dot { background: #5a43ad; }
.swatch[data-swatch="rose"] .dot { background: #a3305f; }
.swatch[data-swatch="crimson"] .dot { background: #ad2828; }
.swatch[data-swatch="amber"] .dot { background: #8f4a00; }
.swatch[data-swatch="graphite"] .dot { background: #3d4a52; }