diff --git a/web/app.js b/web/app.js index d4f9bbe..843e2af 100644 --- a/web/app.js +++ b/web/app.js @@ -1892,8 +1892,8 @@ // ========== Theme ========== - 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 THEMES = ['dark', 'paper', 'tinycard', 'catppuccin', 'catppuccin-latte', 'nord', 'dracula', 'gruvbox', 'rosepine', 'rosepine-dawn', 'tokyonight', 'solarized', 'solarized-light']; + const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈', catppuccin: '◕', 'catppuccin-latte': '◔', nord: '◓', dracula: '◒', gruvbox: '◔', rosepine: '◍', 'rosepine-dawn': '◌', tokyonight: '◗', solarized: '◖', 'solarized-light': '◑' }; const themeToggle = $('#theme-toggle'); let nibTheme = localStorage.getItem('nib:theme') || 'dark'; diff --git a/web/style.css b/web/style.css index 0f71e7f..da9216a 100644 --- a/web/style.css +++ b/web/style.css @@ -228,6 +228,72 @@ --lineage: #6c71c4; } +[data-theme="catppuccin-latte"] { + color-scheme: light; + --bg: #eff1f5; + --surf: #e6e9ef; + --raised: #dce0e8; + --border: #ccd0da; + --soft: #e4e7ed; + --text: #4c4f69; + --muted: #6c6f85; + --dim: #9ca0b0; + --accent: #8839ef; + --a-bg: rgba(136,57,239,.08); + --a-str: rgba(136,57,239,.18); + --todo: #df8e1d; + --note: #179299; + --event: #1e66f5; + --remind: #fe640b; + --ok: #40a02b; + --danger: #d20f39; + --lineage: #ea76cb; +} + +[data-theme="rosepine-dawn"] { + color-scheme: light; + --bg: #faf4ed; + --surf: #fffaf3; + --raised: #f2e9e1; + --border: #dfdad9; + --soft: #f4ede8; + --text: #575279; + --muted: #797593; + --dim: #9893a5; + --accent: #907aa9; + --a-bg: rgba(144,122,169,.08); + --a-str: rgba(144,122,169,.18); + --todo: #ea9d34; + --note: #56949f; + --event: #286983; + --remind: #d7827e; + --ok: #56949f; + --danger: #b4637a; + --lineage: #907aa9; +} + +[data-theme="solarized-light"] { + color-scheme: light; + --bg: #fdf6e3; + --surf: #eee8d5; + --raised: #e4ddc8; + --border: #d3cbb7; + --soft: #f5eedb; + --text: #657b83; + --muted: #586e75; + --dim: #93a1a1; + --accent: #268bd2; + --a-bg: rgba(38,139,210,.08); + --a-str: rgba(38,139,210,.18); + --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; }