/* * themes.css — Nexus complete theme system * 7 themes via [data-theme] attribute on * Zero-flash: theme.js IIFE applies before first paint * * Variable groups: * --bg-* background surfaces * --text-* foreground text * --brand primary accent * --input-* form controls * --shadow-* elevation * --mention-* @mentions * --code-* code blocks * --reaction-* emoji reactions * --ctx-sep context menu dividers * --msg-* chat-specific tokens */ /* ═══════════════════ DARK (default) ══════════════════════ */ :root, [data-theme="dark"] { --bg-primary: #313338; --bg-secondary: #2b2d31; --bg-tertiary: #1e1f22; --bg-accent: #4e5058; --bg-floating: #111214; --bg-overlay: rgba(0,0,0,.70); --bg-hover: rgba(79,84,92,.16); --bg-active: rgba(79,84,92,.32); --bg-selected: rgba(79,84,92,.48); --bg-message-hover: rgba(4,4,5,.07); --text-normal: #dbdee1; --text-muted: #949ba4; --text-link: #00a8fc; --text-positive: #23a55a; --text-warning: #f0b132; --text-danger: #f23f43; --text-header: #f2f3f5; --brand: #5865f2; --brand-hover: #4752c4; --brand-active: #3c45a5; --brand-light: rgba(88,101,242,.15); --green: #23a55a; --red: #f23f43; --yellow: #f0b132; --status-online: #23a55a; --status-idle: #f0b132; --status-dnd: #f23f43; --status-offline: #80848e; --input-bg: #1e1f22; --input-border: #1e1f22; --input-border-focus: #00a8fc; --input-placeholder: #4e5058; --scrollbar-thumb: #2c2e33; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(4,4,5,.20),0 1.5px 0 rgba(6,6,7,.05),0 2px 0 rgba(4,4,5,.05); --shadow-high: 0 8px 16px rgba(0,0,0,.24); --shadow-overlay: 0 4px 60px rgba(0,0,0,.70); --mention-bg: rgba(88,101,242,.30); --mention-color: #c9cdfb; --mention-hover-bg: rgba(88,101,242,.50); --code-bg: rgba(0,0,0,.30); --code-color: #e3e5e8; --reaction-bg: rgba(79,84,92,.20); --reaction-hover: rgba(79,84,92,.30); --ctx-sep: rgba(255,255,255,.06); --msg-hover-bg: rgba(2,2,2,.06); --msg-actions-bg: #2b2d31; --msg-actions-border: rgba(255,255,255,.08); --msg-reply-line: #4e5058; } /* ═══════════════════ DIM ══════════════════════════════════ */ [data-theme="dim"] { --bg-primary: #36393f; --bg-secondary: #2f3136; --bg-tertiary: #202225; --bg-accent: #40444b; --bg-floating: #18191c; --bg-overlay: rgba(0,0,0,.60); --bg-hover: rgba(79,84,92,.18); --bg-active: rgba(79,84,92,.35); --bg-selected: rgba(79,84,92,.50); --bg-message-hover: rgba(0,0,0,.06); --text-normal: #dcddde; --text-muted: #72767d; --text-link: #00b0f4; --text-positive: #43b581; --text-warning: #faa61a; --text-danger: #f04747; --text-header: #ffffff; --brand: #7289da; --brand-hover: #677bc4; --brand-active: #5b6eae; --brand-light: rgba(114,137,218,.15); --green: #43b581; --red: #f04747; --yellow: #faa61a; --status-online: #43b581; --status-idle: #faa61a; --status-dnd: #f04747; --status-offline: #747f8d; --input-bg: #40444b; --input-border: #202225; --input-border-focus: #00b0f4; --input-placeholder: #72767d; --scrollbar-thumb: #202225; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(4,4,5,.20),0 1.5px 0 rgba(6,6,7,.05),0 2px 0 rgba(4,4,5,.05); --shadow-high: 0 8px 16px rgba(0,0,0,.24); --shadow-overlay: 0 4px 60px rgba(0,0,0,.60); --mention-bg: rgba(114,137,218,.25); --mention-color: #dee0fc; --mention-hover-bg: rgba(114,137,218,.40); --code-bg: rgba(32,34,37,.80); --code-color: #dcddde; --reaction-bg: rgba(64,68,75,.60); --reaction-hover: rgba(64,68,75,.90); --ctx-sep: rgba(255,255,255,.05); --msg-hover-bg: rgba(0,0,0,.10); --msg-actions-bg: #2f3136; --msg-actions-border: rgba(255,255,255,.06); --msg-reply-line: #40444b; } /* ═══════════════════ LIGHT ════════════════════════════════ */ [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f2f3f5; --bg-tertiary: #e3e5e8; --bg-accent: #c4c9d2; --bg-floating: #ffffff; --bg-overlay: rgba(0,0,0,.50); --bg-hover: rgba(6,6,7,.06); --bg-active: rgba(6,6,7,.12); --bg-selected: rgba(6,6,7,.16); --bg-message-hover: rgba(6,6,7,.04); --text-normal: #2e3338; --text-muted: #4e5058; --text-link: #006ce7; --text-positive: #1a8a40; --text-warning: #c8900a; --text-danger: #da373c; --text-header: #060607; --brand: #5865f2; --brand-hover: #4752c4; --brand-active: #3c45a5; --brand-light: rgba(88,101,242,.10); --green: #1a8a40; --red: #da373c; --yellow: #c8900a; --status-online: #1a8a40; --status-idle: #c8900a; --status-dnd: #da373c; --status-offline: #747f8d; --input-bg: #e3e5e8; --input-border: #c4c9d2; --input-border-focus: #006ce7; --input-placeholder: #6d6f78; --scrollbar-thumb: #c4c9d2; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(6,6,7,.10),0 1.5px 0 rgba(6,6,7,.04),0 2px 0 rgba(6,6,7,.04); --shadow-high: 0 8px 16px rgba(0,0,0,.12); --shadow-overlay: 0 4px 60px rgba(0,0,0,.40); --mention-bg: rgba(88,101,242,.15); --mention-color: #3c45a5; --mention-hover-bg: rgba(88,101,242,.30); --code-bg: rgba(116,127,141,.16); --code-color: #2e3338; --reaction-bg: rgba(79,84,92,.12); --reaction-hover: rgba(79,84,92,.22); --ctx-sep: rgba(0,0,0,.08); --msg-hover-bg: rgba(6,6,7,.04); --msg-actions-bg: #ffffff; --msg-actions-border: rgba(0,0,0,.10); --msg-reply-line: #c4c9d2; } /* ═══════════════════ MIDNIGHT ═════════════════════════════ */ [data-theme="midnight"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #0d1117; --bg-accent: #30363d; --bg-floating: #010409; --bg-overlay: rgba(1,4,9,.85); --bg-hover: rgba(177,186,196,.08); --bg-active: rgba(177,186,196,.16); --bg-selected: rgba(177,186,196,.24); --bg-message-hover: rgba(177,186,196,.04); --text-normal: #e6edf3; --text-muted: #7d8590; --text-link: #58a6ff; --text-positive: #3fb950; --text-warning: #d29922; --text-danger: #f85149; --text-header: #f0f6fc; --brand: #58a6ff; --brand-hover: #388bfd; --brand-active: #1f6feb; --brand-light: rgba(88,166,255,.12); --green: #3fb950; --red: #f85149; --yellow: #d29922; --status-online: #3fb950; --status-idle: #d29922; --status-dnd: #f85149; --status-offline: #6e7681; --input-bg: #161b22; --input-border: #30363d; --input-border-focus: #58a6ff; --input-placeholder: #484f58; --scrollbar-thumb: #30363d; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(1,4,9,.40),0 1.5px 0 rgba(1,4,9,.20),0 2px 0 rgba(1,4,9,.10); --shadow-high: 0 8px 24px rgba(1,4,9,.50); --shadow-overlay: 0 4px 60px rgba(1,4,9,.80); --mention-bg: rgba(88,166,255,.15); --mention-color: #79c0ff; --mention-hover-bg: rgba(88,166,255,.25); --code-bg: rgba(110,118,129,.20); --code-color: #e6edf3; --reaction-bg: rgba(48,54,61,.60); --reaction-hover: rgba(48,54,61,.90); --ctx-sep: rgba(177,186,196,.08); --msg-hover-bg: rgba(177,186,196,.04); --msg-actions-bg: #161b22; --msg-actions-border: rgba(177,186,196,.10); --msg-reply-line: #30363d; } /* ═══════════════════ PURPLE ═══════════════════════════════ */ [data-theme="purple"] { --bg-primary: #1a1025; --bg-secondary: #130d1e; --bg-tertiary: #0e0916; --bg-accent: #3d2d5e; --bg-floating: #0a0610; --bg-overlay: rgba(10,6,16,.85); --bg-hover: rgba(167,139,250,.10); --bg-active: rgba(167,139,250,.20); --bg-selected: rgba(167,139,250,.30); --bg-message-hover: rgba(167,139,250,.05); --text-normal: #e2d9f3; --text-muted: #9d8ec4; --text-link: #a78bfa; --text-positive: #4ade80; --text-warning: #fbbf24; --text-danger: #f87171; --text-header: #f5f0ff; --brand: #8b5cf6; --brand-hover: #7c3aed; --brand-active: #6d28d9; --brand-light: rgba(139,92,246,.15); --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --status-online: #4ade80; --status-idle: #fbbf24; --status-dnd: #f87171; --status-offline: #6b7280; --input-bg: #130d1e; --input-border: #3d2d5e; --input-border-focus: #8b5cf6; --input-placeholder: #5b4d7a; --scrollbar-thumb: #3d2d5e; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(10,6,16,.40),0 1.5px 0 rgba(10,6,16,.20),0 2px 0 rgba(10,6,16,.10); --shadow-high: 0 8px 24px rgba(10,6,16,.60); --shadow-overlay: 0 4px 60px rgba(10,6,16,.80); --mention-bg: rgba(139,92,246,.20); --mention-color: #c4b5fd; --mention-hover-bg: rgba(139,92,246,.35); --code-bg: rgba(61,45,94,.60); --code-color: #e2d9f3; --reaction-bg: rgba(61,45,94,.50); --reaction-hover: rgba(61,45,94,.80); --ctx-sep: rgba(167,139,250,.10); --msg-hover-bg: rgba(167,139,250,.05); --msg-actions-bg: #130d1e; --msg-actions-border: rgba(167,139,250,.15); --msg-reply-line: #3d2d5e; } /* ═══════════════════ DISCORD (classic) ═══════════════════ */ [data-theme="discord"] { --bg-primary: #36393f; --bg-secondary: #2f3136; --bg-tertiary: #202225; --bg-accent: #40444b; --bg-floating: #18191c; --bg-overlay: rgba(0,0,0,.85); --bg-hover: rgba(79,84,92,.16); --bg-active: rgba(79,84,92,.32); --bg-selected: rgba(79,84,92,.48); --bg-message-hover: rgba(0,0,0,.10); --text-normal: #dcddde; --text-muted: #72767d; --text-link: #00b0f4; --text-positive: #43b581; --text-warning: #faa61a; --text-danger: #f04747; --text-header: #ffffff; --brand: #7289da; --brand-hover: #677bc4; --brand-active: #5b6eae; --brand-light: rgba(114,137,218,.15); --green: #43b581; --red: #f04747; --yellow: #faa61a; --status-online: #43b581; --status-idle: #faa61a; --status-dnd: #f04747; --status-offline: #747f8d; --input-bg: #40444b; --input-border: #202225; --input-border-focus: #00b0f4; --input-placeholder: #72767d; --scrollbar-thumb: #202225; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(4,4,5,.20),0 1.5px 0 rgba(6,6,7,.05),0 2px 0 rgba(4,4,5,.05); --shadow-high: 0 8px 16px rgba(0,0,0,.24); --shadow-overlay: 0 4px 60px rgba(0,0,0,.70); --mention-bg: rgba(114,137,218,.30); --mention-color: #dee0fc; --mention-hover-bg: rgba(114,137,218,.50); --code-bg: rgba(32,34,37,.80); --code-color: #dcddde; --reaction-bg: rgba(64,68,75,.60); --reaction-hover: rgba(64,68,75,.90); --ctx-sep: rgba(255,255,255,.06); --msg-hover-bg: rgba(0,0,0,.10); --msg-actions-bg: #2f3136; --msg-actions-border: rgba(255,255,255,.06); --msg-reply-line: #40444b; } /* ═══════════════════ AMOLED ═══════════════════════════════ */ [data-theme="amoled"] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #000000; --bg-accent: #1a1a1a; --bg-floating: #000000; --bg-overlay: rgba(0,0,0,.92); --bg-hover: rgba(255,255,255,.06); --bg-active: rgba(255,255,255,.12); --bg-selected: rgba(255,255,255,.18); --bg-message-hover: rgba(255,255,255,.03); --text-normal: #ffffff; --text-muted: #8a8a8a; --text-link: #60a5fa; --text-positive: #34d399; --text-warning: #fbbf24; --text-danger: #f87171; --text-header: #ffffff; --brand: #5865f2; --brand-hover: #4752c4; --brand-active: #3c45a5; --brand-light: rgba(88,101,242,.12); --green: #34d399; --red: #f87171; --yellow: #fbbf24; --status-online: #34d399; --status-idle: #fbbf24; --status-dnd: #f87171; --status-offline: #6b7280; --input-bg: #0a0a0a; --input-border: #1a1a1a; --input-border-focus: #5865f2; --input-placeholder: #3a3a3a; --scrollbar-thumb: #1a1a1a; --scrollbar-track: transparent; --shadow-low: 0 1px 0 rgba(255,255,255,.04),0 1.5px 0 rgba(255,255,255,.02),0 2px 0 rgba(255,255,255,.01); --shadow-high: 0 8px 24px rgba(0,0,0,.80); --shadow-overlay: 0 4px 60px rgba(0,0,0,.95); --mention-bg: rgba(88,101,242,.20); --mention-color: #a5b4fc; --mention-hover-bg: rgba(88,101,242,.35); --code-bg: rgba(26,26,26,.90); --code-color: #ffffff; --reaction-bg: rgba(26,26,26,.80); --reaction-hover: rgba(38,38,38,.90); --ctx-sep: rgba(255,255,255,.08); --msg-hover-bg: rgba(255,255,255,.03); --msg-actions-bg: #0a0a0a; --msg-actions-border: rgba(255,255,255,.08); --msg-reply-line: #1a1a1a; } /* ═══════════════════════════════════════════════════════════ UNIVERSAL COMPONENT OVERRIDES These ensure every element uses theme vars, no hardcoding. ═══════════════════════════════════════════════════════════ */ /* All form inputs */ .settings-input, .modal-input, .modal-textarea, .modal-select, .settings-textarea, .settings-select, .msg-input, .thread-input, .friends-search-input, .emoji-search, .add-friend-form input, input[type="text"], input[type="email"], input[type="password"], textarea, select { background: var(--input-bg); border-color: var(--input-border); color: var(--text-normal); } .settings-input:focus, .modal-input:focus, .settings-textarea:focus, .settings-select:focus, .modal-textarea:focus { border-color: var(--input-border-focus); } /* Input box */ .input-box { background: var(--bg-secondary); } /* Reactions */ .reaction { background: var(--reaction-bg); } .reaction:hover { background: var(--reaction-hover); } .reaction.own { background: var(--brand-light); border-color: var(--brand); } /* Inline code */ code { background: var(--code-bg); color: var(--code-color); } /* Mentions */ .mention { color: var(--mention-color); background: var(--mention-bg); } .mention:hover { background: var(--mention-hover-bg); } /* Context menu separator */ .ctx-sep { background: var(--ctx-sep); } /* Message hover */ .msg-group:hover { background: var(--msg-hover-bg); } .msg-actions { background: var(--msg-actions-bg) !important; border-color: var(--msg-actions-border) !important; } /* Scrollbars */ ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } /* Reply bar line */ .msg-reply-bar .reply-line { border-color: var(--msg-reply-line); } /* ═══════════════════ LIGHT STRUCTURAL FIXES ═══════════════ */ [data-theme="light"] { color-scheme: light; } [data-theme="light"] .server-rail { background: var(--bg-tertiary); border-right: 1px solid var(--bg-accent); } [data-theme="light"] .side-panel { border-right: 1px solid var(--bg-accent); } [data-theme="light"] .top-bar { border-bottom-color: var(--bg-accent); } [data-theme="light"] .panel-header { border-bottom-color: var(--bg-accent); } [data-theme="light"] .user-area { background: var(--bg-tertiary); border-top-color: var(--bg-accent); } [data-theme="light"] .settings-sidebar { background: var(--bg-secondary); border-right: 1px solid var(--bg-accent); } [data-theme="light"] .modal { box-shadow: 0 8px 32px rgba(0,0,0,.20); border: 1px solid var(--bg-accent); } [data-theme="light"] .ctx-menu { box-shadow: 0 8px 24px rgba(0,0,0,.20); border: 1px solid var(--bg-accent); } [data-theme="light"] .profile-popout { box-shadow: 0 8px 32px rgba(0,0,0,.20); border: 1px solid var(--bg-accent); } [data-theme="light"] .toast { background: #fff; color: var(--text-normal); box-shadow: 0 4px 16px rgba(0,0,0,.15); } [data-theme="light"] .settings-close { background: var(--bg-accent); color: var(--text-normal); } [data-theme="light"] .date-divider::before, [data-theme="light"] .date-divider::after { background: var(--bg-accent); } [data-theme="light"] .settings-divider { background: var(--bg-accent); } [data-theme="light"] .toggle-row { border-bottom-color: var(--bg-accent); } [data-theme="light"] .ctx-item:hover { background: var(--brand); color: #fff; } [data-theme="light"] .rail-item { background: var(--bg-primary); color: var(--text-muted); } [data-theme="light"] .rail-item.active, [data-theme="light"] .rail-item:hover { color: var(--text-header); } [data-theme="light"] .ch-item:hover { background: var(--bg-hover); } [data-theme="light"] .ch-item.active { background: var(--bg-active); } [data-theme="light"] .msg-actions { border: 1px solid var(--msg-actions-border); box-shadow: 0 4px 12px rgba(0,0,0,.12); } [data-theme="light"] .emoji-picker { border: 1px solid var(--bg-accent); } [data-theme="light"] .member-list { border-left: 1px solid var(--bg-accent); } [data-theme="light"] .thread-panel { border-left-color: var(--bg-accent); } [data-theme="light"] .input-box { background: var(--input-bg); border: 1px solid var(--input-border); } /* ═══════════════════ MIDNIGHT / AMOLED STRUCTURAL ════════ */ [data-theme="midnight"] .server-rail, [data-theme="amoled"] .server-rail { background: var(--bg-tertiary); } [data-theme="midnight"] .side-panel, [data-theme="amoled"] .side-panel { background: var(--bg-secondary); } [data-theme="midnight"] .user-area, [data-theme="amoled"] .user-area { background: var(--bg-tertiary); border-top: 1px solid var(--bg-accent); } [data-theme="midnight"] .modal, [data-theme="midnight"] .ctx-menu { border: 1px solid var(--bg-accent); } [data-theme="amoled"] .panel-header, [data-theme="amoled"] .top-bar { border-bottom: 1px solid var(--bg-accent); } [data-theme="amoled"] .modal, [data-theme="amoled"] .ctx-menu { border: 1px solid var(--bg-accent); } /* ═══════════════════ PURPLE STRUCTURAL ═══════════════════ */ [data-theme="purple"] .server-rail { background: var(--bg-tertiary); } [data-theme="purple"] .side-panel { background: var(--bg-secondary); } [data-theme="purple"] .user-area { background: var(--bg-tertiary); border-top: 1px solid var(--bg-accent); } [data-theme="purple"] .modal, [data-theme="purple"] .ctx-menu { border: 1px solid var(--bg-accent); } [data-theme="purple"] .rail-item.dm-btn { color: var(--brand); } [data-theme="purple"] .rail-item.dm-btn:hover { background: var(--brand); color: white; } /* ═══════════════════ TRANSITIONS ═════════════════════════ */ html { transition: background-color .20s ease, color .15s ease; } body, .server-rail, .side-panel, .main-content, .top-bar, .panel-header, .user-area, .settings-sidebar, .settings-content, .input-box, .modal, .ctx-menu, .profile-popout, .friends-page, .voice-view, .member-list, .thread-panel, .msg-group, .msg-actions, .reaction, .emoji-picker, .toast, .dm-item, .ch-item, .rail-item, .att-file { transition: background-color .20s ease, border-color .15s ease, color .15s ease; } /* ═══════════════════════════════════════════════════════════ THEME CARD PREVIEWS (Settings → Appearance) ═══════════════════════════════════════════════════════════ */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 6px; } .theme-card { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .12s, box-shadow .12s; position: relative; user-select: none; flex-shrink: 0; } .theme-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); } .theme-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand), 0 8px 20px rgba(0,0,0,.3); } .theme-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: white; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 18px; text-align: center; } .tc-header { padding: 7px 9px; font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .tc-body { height: 40px; display: flex; align-items: center; padding: 8px 9px; gap: 5px; } .tc-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } .tc-line { flex: 1; height: 5px; border-radius: 3px; } .tc-line2 { flex: 0.6; height: 5px; border-radius: 3px; opacity: .45; } /* Preview colors per theme */ .tc-dark .tc-header { background: #1e1f22; color: #949ba4; } .tc-dark .tc-body { background: #313338; } .tc-dark .tc-dot { background: #5865f2; } .tc-dark .tc-line { background: #4e5058; } .tc-dim .tc-header { background: #202225; color: #72767d; } .tc-dim .tc-body { background: #36393f; } .tc-dim .tc-dot { background: #7289da; } .tc-dim .tc-line { background: #40444b; } .tc-light .tc-header { background: #e3e5e8; color: #4e5058; } .tc-light .tc-body { background: #ffffff; } .tc-light .tc-dot { background: #5865f2; } .tc-light .tc-line { background: #c4c9d2; } .tc-midnight .tc-header { background: #0d1117; color: #7d8590; } .tc-midnight .tc-body { background: #161b22; } .tc-midnight .tc-dot { background: #58a6ff; } .tc-midnight .tc-line { background: #30363d; } .tc-purple .tc-header { background: #0e0916; color: #9d8ec4; } .tc-purple .tc-body { background: #1a1025; } .tc-purple .tc-dot { background: #8b5cf6; } .tc-purple .tc-line { background: #3d2d5e; } .tc-discord .tc-header { background: #202225; color: #72767d; } .tc-discord .tc-body { background: #36393f; } .tc-discord .tc-dot { background: #7289da; } .tc-discord .tc-line { background: #40444b; } .tc-amoled .tc-header { background: #000000; color: #8a8a8a; } .tc-amoled .tc-body { background: #000000; border-top: 1px solid #1a1a1a; } .tc-amoled .tc-dot { background: #5865f2; } .tc-amoled .tc-line { background: #1a1a1a; }