/* ============================================================ themes.css — 5 Theme Definitions Each theme defines the same CSS variables with different values. Apply by setting data-theme="name" on element. ============================================================ */ /* ---- Base / Default Theme ---- */ :root, [data-theme="fluent"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #edebe9; --text-primary: #323130; --text-secondary: #605e5c; --accent: #0078d4; --accent-hover: #106ebe; --accent-active: #005a9e; --border: #d2d0ce; --table-stripe: #fafafa; --table-hover: #f3f2f1; --success: #107c10; --warning: #ff8c00; --danger: #d13438; --scrollbar-track: #f0f0f0; --scrollbar-thumb: #c0c0c0; --dialog-overlay: rgba(0, 0, 0, 0.4); --card-bg: #ffffff; --input-bg: #ffffff; --toolbar-bg: #f0f0f0; --statusbar-bg: #f0f0f0; --tab-active-bg: #ffffff; --tab-inactive-bg: #f0f0f0; --badge-bg: #0078d4; --badge-text: #ffffff; } /* ---- Claude Theme ---- */ [data-theme="claude"] { --bg-primary: #faf9f7; --bg-secondary: #f0ede8; --bg-tertiary: #e5e0d8; --text-primary: #2c2c2c; --text-secondary: #6b6b6b; --accent: #c7562e; --accent-hover: #b04828; --accent-active: #9a3f22; --border: #d4cdc0; --table-stripe: #f7f5f2; --table-hover: #eeebe6; --success: #2e7d32; --warning: #e65100; --danger: #c62828; --scrollbar-track: #e5e0d8; --scrollbar-thumb: #b8b0a0; --dialog-overlay: rgba(44, 44, 44, 0.45); --card-bg: #faf9f7; --input-bg: #ffffff; --toolbar-bg: #e5e0d8; --statusbar-bg: #e5e0d8; --tab-active-bg: #faf9f7; --tab-inactive-bg: #e5e0d8; --badge-bg: #c7562e; --badge-text: #ffffff; } /* ---- Dark Theme ---- */ [data-theme="dark"] { --bg-primary: #1e1e1e; --bg-secondary: #252526; --bg-tertiary: #2d2d2d; --text-primary: #cccccc; --text-secondary: #969696; --accent: #569cd6; --accent-hover: #4a94cc; --accent-active: #3d7abf; --border: #404040; --table-stripe: #2a2a2a; --table-hover: #333333; --success: #4ec9b0; --warning: #dcdcaa; --danger: #f44747; --scrollbar-track: #252526; --scrollbar-thumb: #424242; --dialog-overlay: rgba(0, 0, 0, 0.6); --card-bg: #252526; --input-bg: #3c3c3c; --toolbar-bg: #2d2d2d; --statusbar-bg: #007acc; --tab-active-bg: #1e1e1e; --tab-inactive-bg: #2d2d2d; --badge-bg: #569cd6; --badge-text: #1e1e1e; } /* ---- Linear Theme ---- */ [data-theme="linear"] { --bg-primary: #ffffff; --bg-secondary: #f7f8f8; --bg-tertiary: #efeef0; --text-primary: #18181a; --text-secondary: #5e5e60; --accent: #5e6ad2; --accent-hover: #4f5bd1; --accent-active: #434ec7; --border: #d4d4d8; --table-stripe: #fafafa; --table-hover: #f4f4f5; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --scrollbar-track: #f7f8f8; --scrollbar-thumb: #d4d4d8; --dialog-overlay: rgba(24, 24, 26, 0.4); --card-bg: #ffffff; --input-bg: #ffffff; --toolbar-bg: #f7f8f8; --statusbar-bg: #f7f8f8; --tab-active-bg: #ffffff; --tab-inactive-bg: #f7f8f8; --badge-bg: #5e6ad2; --badge-text: #ffffff; } /* ---- Nature Theme ---- */ [data-theme="nature"] { --bg-primary: #fafef5; --bg-secondary: #f0f7ea; --bg-tertiary: #e5eedc; --text-primary: #2d3a2a; --text-secondary: #5c6b58; --accent: #4a7c3f; --accent-hover: #3d6b34; --accent-active: #2f5a28; --border: #c6d4bb; --table-stripe: #f4f9ef; --table-hover: #edf3e5; --success: #2e7d32; --warning: #e65100; --danger: #c62828; --scrollbar-track: #e5eedc; --scrollbar-thumb: #a8c090; --dialog-overlay: rgba(45, 58, 42, 0.4); --card-bg: #fafef5; --input-bg: #ffffff; --toolbar-bg: #e5eedc; --statusbar-bg: #e5eedc; --tab-active-bg: #fafef5; --tab-inactive-bg: #e5eedc; --badge-bg: #4a7c3f; --badge-text: #ffffff; }