/* * GhostNote Theme System * * Toggle theme by setting data-theme on : * document.documentElement.setAttribute('data-theme', 'dark'); * * All component CSS references var(--name) — no literal colors. */ :root[data-theme="dark"] { /* Backgrounds */ --bg-primary: #1e1f22; --bg-surface: #222325; --bg-input: rgba(0, 0, 0, 0.2); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-overlay-light: rgba(0, 0, 0, 0.4); --bg-hover: rgba(255, 255, 255, 0.025); --bg-hover-subtle: rgba(255, 255, 255, 0.02); --bg-hover-btn: rgba(255, 255, 255, 0.05); --bg-hover-muted: rgba(255, 255, 255, 0.03); /* Borders */ --border-default: #2b2d31; --border-subtle: #222325; --border-input: #3b3d44; /* Text */ --text-primary: #b0b0b0; --text-secondary: #8e919a; --text-muted: #4a4d55; --text-faint: #3b3d44; --text-placeholder: #333538; --text-label: #6a6d75; --text-inverse: #fff; /* Accent */ --accent: #5865f2; --accent-bg: rgba(88, 101, 242, 0.15); /* Badges */ --badge-text: #555860; --badge-scratchpad: #706040; --badge-research: #406050; --badge-reference: #405070; /* Status */ --success: #4a6a50; --success-hover: #6a9a70; --success-bg: rgba(64, 96, 80, 0.2); --danger: #d95555; --danger-hover: #c04545; --danger-bg: rgba(217, 85, 85, 0.1); --danger-bg-hover: rgba(217, 85, 85, 0.15); --danger-border: rgba(217, 85, 85, 0.2); /* Semantic aliases */ --pin-active: var(--accent); --lock-active: var(--text-muted); --checkbox-accent: var(--success); --scrollbar-thumb: var(--border-default); /* Shadows */ --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.4); } :root[data-theme="work"] { /* Clean, neutral, enterprise-boring — stub */ --bg-primary: #f5f5f5; --bg-surface: #ffffff; --bg-input: #f0f0f0; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-overlay-light: rgba(0, 0, 0, 0.2); --bg-hover: rgba(0, 0, 0, 0.03); --bg-hover-subtle: rgba(0, 0, 0, 0.02); --bg-hover-btn: rgba(0, 0, 0, 0.05); --bg-hover-muted: rgba(0, 0, 0, 0.03); --border-default: #e0e0e0; --border-subtle: #eaeaea; --border-input: #cccccc; --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-muted: #888888; --text-faint: #aaaaaa; --text-placeholder: #bbbbbb; --text-label: #666666; --text-inverse: #ffffff; --accent: #2563eb; --accent-bg: rgba(37, 99, 235, 0.1); --badge-text: #777777; --badge-scratchpad: #92740a; --badge-research: #0a7a4a; --badge-reference: #3b5998; --success: #2e7d32; --success-hover: #388e3c; --success-bg: rgba(46, 125, 50, 0.1); --danger: #d32f2f; --danger-hover: #b71c1c; --danger-bg: rgba(211, 47, 47, 0.08); --danger-bg-hover: rgba(211, 47, 47, 0.12); --danger-border: rgba(211, 47, 47, 0.2); --pin-active: var(--accent); --lock-active: var(--text-muted); --checkbox-accent: var(--success); --scrollbar-thumb: var(--border-default); --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.12); } :root[data-theme="light"] { /* Standard light theme — stub */ --bg-primary: #ffffff; --bg-surface: #f8f8f8; --bg-input: #f0f0f0; --bg-overlay: rgba(0, 0, 0, 0.5); --bg-overlay-light: rgba(0, 0, 0, 0.25); --bg-hover: rgba(0, 0, 0, 0.04); --bg-hover-subtle: rgba(0, 0, 0, 0.02); --bg-hover-btn: rgba(0, 0, 0, 0.06); --bg-hover-muted: rgba(0, 0, 0, 0.03); --border-default: #e2e2e2; --border-subtle: #eeeeee; --border-input: #cccccc; --text-primary: #222222; --text-secondary: #555555; --text-muted: #999999; --text-faint: #bbbbbb; --text-placeholder: #cccccc; --text-label: #777777; --text-inverse: #ffffff; --accent: #5865f2; --accent-bg: rgba(88, 101, 242, 0.12); --badge-text: #888888; --badge-scratchpad: #a08030; --badge-research: #308060; --badge-reference: #506090; --success: #3a8a40; --success-hover: #4caf50; --success-bg: rgba(58, 138, 64, 0.12); --danger: #e53935; --danger-hover: #c62828; --danger-bg: rgba(229, 57, 53, 0.08); --danger-bg-hover: rgba(229, 57, 53, 0.12); --danger-border: rgba(229, 57, 53, 0.2); --pin-active: var(--accent); --lock-active: var(--text-muted); --checkbox-accent: var(--success); --scrollbar-thumb: var(--border-default); --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.1); }