diff --git a/web/app.js b/web/app.js index a76b8ca..d4f9bbe 100644 --- a/web/app.js +++ b/web/app.js @@ -1892,8 +1892,8 @@ // ========== Theme ========== - const THEMES = ['dark', 'paper', 'tinycard', 'catppuccin', 'nord', 'dracula']; - const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈', catppuccin: '◕', nord: '◓', dracula: '◒' }; + const THEMES = ['dark', 'paper', 'tinycard', 'catppuccin', 'nord', 'dracula', 'gruvbox', 'rosepine', 'tokyonight', 'solarized']; + const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈', catppuccin: '◕', nord: '◓', dracula: '◒', gruvbox: '◔', rosepine: '◍', tokyonight: '◗', solarized: '◖' }; const themeToggle = $('#theme-toggle'); let nibTheme = localStorage.getItem('nib:theme') || 'dark'; diff --git a/web/style.css b/web/style.css index 8d730e3..0f71e7f 100644 --- a/web/style.css +++ b/web/style.css @@ -140,6 +140,94 @@ --lineage: #ff79c6; } +[data-theme="gruvbox"] { + color-scheme: dark; + --bg: #282828; + --surf: #1d2021; + --raised: #3c3836; + --border: #504945; + --soft: #32302f; + --text: #ebdbb2; + --muted: #a89984; + --dim: #665c54; + --accent: #fabd2f; + --a-bg: rgba(250,189,47,.09); + --a-str: rgba(250,189,47,.22); + --todo: #fabd2f; + --note: #8ec07c; + --event: #83a598; + --remind: #fe8019; + --ok: #b8bb26; + --danger: #fb4934; + --lineage: #d3869b; +} + +[data-theme="rosepine"] { + color-scheme: dark; + --bg: #191724; + --surf: #1f1d2e; + --raised: #26233a; + --border: #403d52; + --soft: #211f30; + --text: #e0def4; + --muted: #908caa; + --dim: #6e6a86; + --accent: #c4a7e7; + --a-bg: rgba(196,167,231,.09); + --a-str: rgba(196,167,231,.22); + --todo: #f6c177; + --note: #9ccfd8; + --event: #31748f; + --remind: #ea9a97; + --ok: #a6da95; + --danger: #eb6f92; + --lineage: #c4a7e7; +} + +[data-theme="tokyonight"] { + color-scheme: dark; + --bg: #1a1b26; + --surf: #16161e; + --raised: #292e42; + --border: #3b4261; + --soft: #1f2335; + --text: #c0caf5; + --muted: #a9b1d6; + --dim: #565f89; + --accent: #7aa2f7; + --a-bg: rgba(122,162,247,.09); + --a-str: rgba(122,162,247,.22); + --todo: #e0af68; + --note: #7dcfff; + --event: #7aa2f7; + --remind: #ff9e64; + --ok: #9ece6a; + --danger: #f7768e; + --lineage: #bb9af7; +} + +[data-theme="solarized"] { + color-scheme: dark; + --bg: #002b36; + --surf: #073642; + --raised: #094552; + --border: #586e75; + --soft: #05303b; + --text: #839496; + --muted: #657b83; + --dim: #586e75; + --accent: #268bd2; + --a-bg: rgba(38,139,210,.09); + --a-str: rgba(38,139,210,.22); + --todo: #b58900; + --note: #2aa198; + --event: #268bd2; + --remind: #cb4b16; + --ok: #859900; + --danger: #dc322f; + --lineage: #6c71c4; +} + /* ── RESET ──────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; }