e7f10aa5f0
All checks were successful
Build and Release / build-and-release (push) Successful in 10m7s
413 lines
12 KiB
CSS
413 lines
12 KiB
CSS
/* ============================================
|
||
Discord Theme System
|
||
4 themes: Light, Dark (default), Ash, Onyx
|
||
CSS class mapping:
|
||
Light → .theme-light
|
||
Dark → .theme-dark
|
||
Ash → .theme-darker
|
||
Onyx → .theme-midnight
|
||
============================================ */
|
||
|
||
/* ============================================
|
||
DARK THEME (default)
|
||
============================================ */
|
||
.theme-dark {
|
||
/* Backgrounds */
|
||
--background-base-low: #313338;
|
||
--background-base-lower: #2b2d31;
|
||
--background-base-lowest: #1e1f22;
|
||
--background-surface-high: #3c3e44;
|
||
--background-surface-higher: #3f4147;
|
||
--background-surface-highest: #43454b;
|
||
--chat-background: #313338;
|
||
--channeltextarea-background: #383a40;
|
||
--modal-background: #313338;
|
||
--panel-bg: #2b2d31;
|
||
--embed-background: #2f3136;
|
||
|
||
/* Text */
|
||
--text-default: #f2f3f5;
|
||
--text-strong: #f2f3f5;
|
||
--text-muted: #949ba4;
|
||
--text-subtle: #b5bac1;
|
||
--text-link: #00a8fc;
|
||
--channels-default: #949ba4;
|
||
--text-feedback-critical: #ed4245;
|
||
|
||
/* Interactive */
|
||
--interactive-background-hover: rgba(78, 80, 88, 0.3);
|
||
--interactive-background-active: rgba(78, 80, 88, 0.48);
|
||
--interactive-background-selected: rgba(78, 80, 88, 0.6);
|
||
--interactive-icon-default: #b5bac1;
|
||
--interactive-icon-hover: #dbdee1;
|
||
--interactive-icon-active: #ffffff;
|
||
--interactive-text-default: #b5bac1;
|
||
--interactive-text-hover: #dbdee1;
|
||
--interactive-text-active: #ffffff;
|
||
|
||
/* Borders */
|
||
--border-subtle: #1e1f22;
|
||
--border-muted: rgba(255, 255, 255, 0.04);
|
||
--border-normal: rgba(255, 255, 255, 0.2);
|
||
--border-strong: rgba(255, 255, 255, 0.44);
|
||
--app-frame-border: hsla(240, 4%, 60.784%, 0.122);
|
||
|
||
/* Icons */
|
||
--icon-default: #dbdee1;
|
||
--icon-strong: #ffffff;
|
||
--icon-muted: #949ba4;
|
||
--icon-subtle: #b5bac1;
|
||
|
||
/* Controls */
|
||
--control-primary-background-default: #5865f2;
|
||
--control-primary-background-hover: #4752c4;
|
||
--control-primary-background-active: #3b43a8;
|
||
--control-critical-primary-background-default: #ed4245;
|
||
|
||
/* Input */
|
||
--input-background-default: #383a40;
|
||
--input-border-default: rgba(255, 255, 255, 0.2);
|
||
--input-text-default: #dbdee1;
|
||
|
||
/* Scrollbar */
|
||
--scrollbar-auto-thumb: #1a1b1e;
|
||
--scrollbar-thin-thumb: #1a1b1e;
|
||
|
||
/* Message */
|
||
--message-background-hover: rgba(0, 0, 0, 0.06);
|
||
|
||
/* Compatibility aliases (map old names → new semantic names) */
|
||
--bg-primary: #313338;
|
||
--bg-secondary: #2b2d31;
|
||
--bg-tertiary: #1e1f22;
|
||
--text-normal: #dbdee1;
|
||
--header-primary: #f2f3f5;
|
||
--header-secondary: #b5bac1;
|
||
--interactive-normal: #b5bac1;
|
||
--interactive-hover: #dbdee1;
|
||
--interactive-active: #ffffff;
|
||
--brand-experiment: #5865f2;
|
||
--brand-experiment-hover: #4752c4;
|
||
--input-background: #383a40;
|
||
--danger: #ed4245;
|
||
--background-modifier-hover: rgba(78, 80, 88, 0.3);
|
||
--background-modifier-active: rgba(78, 80, 88, 0.48);
|
||
--background-modifier-selected: rgba(78, 80, 88, 0.6);
|
||
--div-border: #1e1f22;
|
||
|
||
--text-feedback-warning: hsl(38.455, 100%, 43.137%);
|
||
}
|
||
|
||
|
||
/* ============================================
|
||
LIGHT THEME
|
||
============================================ */
|
||
.theme-light {
|
||
/* Backgrounds */
|
||
--background-base-low: #ffffff;
|
||
--background-base-lower: #f2f3f5;
|
||
--background-base-lowest: #e3e5e8;
|
||
--background-surface-high: #ffffff;
|
||
--background-surface-higher: #ffffff;
|
||
--background-surface-highest: #ffffff;
|
||
--chat-background: #ffffff;
|
||
--channeltextarea-background: #ebedef;
|
||
--modal-background: #ffffff;
|
||
--panel-bg: #f2f3f5;
|
||
--embed-background: #f2f3f5;
|
||
|
||
/* Text */
|
||
--text-default: #313338;
|
||
--text-strong: #060607;
|
||
--text-muted: #5c6470;
|
||
--text-subtle: #4e5058;
|
||
--text-link: #006ce7;
|
||
--channels-default: #5c6470;
|
||
--text-feedback-critical: #da373c;
|
||
|
||
/* Interactive */
|
||
--interactive-background-hover: rgba(116, 124, 138, 0.14);
|
||
--interactive-background-active: rgba(116, 124, 138, 0.22);
|
||
--interactive-background-selected: rgba(116, 124, 138, 0.30);
|
||
--interactive-icon-default: #4e5058;
|
||
--interactive-icon-hover: #313338;
|
||
--interactive-icon-active: #060607;
|
||
--interactive-text-default: #4e5058;
|
||
--interactive-text-hover: #313338;
|
||
--interactive-text-active: #060607;
|
||
|
||
/* Borders */
|
||
--border-subtle: rgba(0, 0, 0, 0.28);
|
||
--border-muted: rgba(0, 0, 0, 0.2);
|
||
--border-normal: rgba(0, 0, 0, 0.36);
|
||
--border-strong: rgba(0, 0, 0, 0.48);
|
||
--app-frame-border: hsla(240, 4%, 60.784%, 0.122);
|
||
|
||
/* Icons */
|
||
--icon-default: #313338;
|
||
--icon-strong: #060607;
|
||
--icon-muted: #5c6470;
|
||
--icon-subtle: #4e5058;
|
||
|
||
/* Controls */
|
||
--control-primary-background-default: #5865f2;
|
||
--control-primary-background-hover: #4752c4;
|
||
--control-primary-background-active: #3b43a8;
|
||
--control-critical-primary-background-default: #da373c;
|
||
|
||
/* Input */
|
||
--input-background-default: #e3e5e8;
|
||
--input-border-default: rgba(0, 0, 0, 0.36);
|
||
--input-text-default: #313338;
|
||
|
||
/* Scrollbar */
|
||
--scrollbar-auto-thumb: #c1c3c7;
|
||
--scrollbar-thin-thumb: #c1c3c7;
|
||
|
||
/* Message */
|
||
--message-background-hover: rgba(0, 0, 0, 0.06);
|
||
|
||
/* Compatibility aliases */
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #f2f3f5;
|
||
--bg-tertiary: #e3e5e8;
|
||
--text-normal: #313338;
|
||
--header-primary: #060607;
|
||
--header-secondary: #4e5058;
|
||
--interactive-normal: #4e5058;
|
||
--interactive-hover: #313338;
|
||
--interactive-active: #060607;
|
||
--brand-experiment: #5865f2;
|
||
--brand-experiment-hover: #4752c4;
|
||
--input-background: #e3e5e8;
|
||
--danger: #da373c;
|
||
--background-modifier-hover: rgba(116, 124, 138, 0.14);
|
||
--background-modifier-active: rgba(116, 124, 138, 0.22);
|
||
--background-modifier-selected: rgba(116, 124, 138, 0.30);
|
||
--div-border: #e1e2e4;
|
||
|
||
--text-feedback-warning: hsl(38.455, 100%, 43.137%);
|
||
}
|
||
|
||
|
||
/* ============================================
|
||
ASH THEME (theme-darker)
|
||
============================================ */
|
||
.theme-darker {
|
||
/* Backgrounds */
|
||
--background-base-low: #202225;
|
||
--background-base-lower: #1a1b1e;
|
||
--background-base-lowest: #111214;
|
||
--background-surface-high: #292b2f;
|
||
--background-surface-higher: #2e3035;
|
||
--background-surface-highest: #33363c;
|
||
--chat-background: #202225;
|
||
--channeltextarea-background: #252529;
|
||
--modal-background: #292b2f;
|
||
--panel-bg: hsl(240, 5.882%, 13.333%);
|
||
--embed-background: #242529;
|
||
|
||
/* Text */
|
||
--text-default: #f0f1f3;
|
||
--text-strong: #f5f5f7;
|
||
--text-muted: #858993;
|
||
--text-subtle: #a0a4ad;
|
||
--text-link: #00a8fc;
|
||
--channels-default: #858993;
|
||
--text-feedback-critical: #ed4245;
|
||
|
||
/* Interactive */
|
||
--interactive-background-hover: rgba(78, 80, 88, 0.15);
|
||
--interactive-background-active: rgba(78, 80, 88, 0.3);
|
||
--interactive-background-selected: rgba(78, 80, 88, 0.4);
|
||
--interactive-icon-default: #a0a4ad;
|
||
--interactive-icon-hover: #dddfe4;
|
||
--interactive-icon-active: #f5f5f7;
|
||
--interactive-text-default: #a0a4ad;
|
||
--interactive-text-hover: #dddfe4;
|
||
--interactive-text-active: #f5f5f7;
|
||
|
||
/* Borders */
|
||
--border-subtle: rgba(255, 255, 255, 0.12);
|
||
--border-muted: rgba(255, 255, 255, 0.04);
|
||
--border-normal: rgba(255, 255, 255, 0.2);
|
||
--border-strong: rgba(255, 255, 255, 0.44);
|
||
--app-frame-border: hsla(240, 4%, 60.784%, 0.122);
|
||
|
||
/* Icons */
|
||
--icon-default: #dddfe4;
|
||
--icon-strong: #f5f5f7;
|
||
--icon-muted: #858993;
|
||
--icon-subtle: #a0a4ad;
|
||
|
||
/* Controls */
|
||
--control-primary-background-default: #5865f2;
|
||
--control-primary-background-hover: #4752c4;
|
||
--control-primary-background-active: #3b43a8;
|
||
--control-critical-primary-background-default: #ed4245;
|
||
|
||
/* Input */
|
||
--input-background-default: #252529;
|
||
--input-border-default: rgba(255, 255, 255, 0.2);
|
||
--input-text-default: #dddfe4;
|
||
|
||
/* Scrollbar */
|
||
--scrollbar-auto-thumb: #15161a;
|
||
--scrollbar-thin-thumb: #15161a;
|
||
|
||
/* Message */
|
||
--message-background-hover: rgba(0, 0, 0, 0.08);
|
||
|
||
/* Compatibility aliases */
|
||
--bg-primary: #202225;
|
||
--bg-secondary: #1a1b1e;
|
||
--bg-tertiary: #121214;
|
||
--text-normal: #dddfe4;
|
||
--header-primary: #f5f5f7;
|
||
--header-secondary: #a0a4ad;
|
||
--interactive-normal: #a0a4ad;
|
||
--interactive-hover: #dddfe4;
|
||
--interactive-active: #f5f5f7;
|
||
--brand-experiment: #5865f2;
|
||
--brand-experiment-hover: #4752c4;
|
||
--input-background: #252529;
|
||
--danger: #ed4245;
|
||
--background-modifier-hover: rgba(78, 80, 88, 0.15);
|
||
--background-modifier-active: rgba(78, 80, 88, 0.3);
|
||
--background-modifier-selected: rgba(78, 80, 88, 0.4);
|
||
--div-border: #111214;
|
||
|
||
--text-feedback-warning: hsl(38.455, 100%, 43.137%);
|
||
}
|
||
|
||
|
||
/* ============================================
|
||
ONYX THEME (theme-midnight)
|
||
============================================ */
|
||
.theme-midnight {
|
||
/* Backgrounds */
|
||
--background-base-low: #0c0c14;
|
||
--background-base-lower: #080810;
|
||
--background-base-lowest: #000000;
|
||
--background-surface-high: #141422;
|
||
--background-surface-higher: #1a1a2e;
|
||
--background-surface-highest: #202038;
|
||
--chat-background: #000000;
|
||
--channeltextarea-background: #1a1a2e;
|
||
--modal-background: #141422;
|
||
--panel-bg: #0c0c14;
|
||
--embed-background: #161626;
|
||
|
||
/* Text */
|
||
--text-default: #e0def0;
|
||
--text-strong: #f8f8fc;
|
||
--text-muted: #7a7687;
|
||
--text-subtle: #a8a5b5;
|
||
--text-link: #00a8fc;
|
||
--channels-default: #7a7687;
|
||
--text-feedback-critical: #ed4245;
|
||
|
||
/* Interactive */
|
||
--interactive-background-hover: rgba(78, 73, 106, 0.2);
|
||
--interactive-background-active: rgba(78, 73, 106, 0.36);
|
||
--interactive-background-selected: rgba(78, 73, 106, 0.48);
|
||
--interactive-icon-default: #a8a5b5;
|
||
--interactive-icon-hover: #e0def0;
|
||
--interactive-icon-active: #f8f8fc;
|
||
--interactive-text-default: #a8a5b5;
|
||
--interactive-text-hover: #e0def0;
|
||
--interactive-text-active: #f8f8fc;
|
||
|
||
/* Borders */
|
||
--border-subtle: rgba(255, 255, 255, 0.2);
|
||
--border-muted: rgba(255, 255, 255, 0.16);
|
||
--border-normal: rgba(255, 255, 255, 0.24);
|
||
--border-strong: rgba(255, 255, 255, 0.44);
|
||
--app-frame-border: hsla(240, 4%, 60.784%, 0.122);
|
||
|
||
/* Icons */
|
||
--icon-default: #e0def0;
|
||
--icon-strong: #f8f8fc;
|
||
--icon-muted: #7a7687;
|
||
--icon-subtle: #a8a5b5;
|
||
|
||
/* Controls */
|
||
--control-primary-background-default: #5865f2;
|
||
--control-primary-background-hover: #4752c4;
|
||
--control-primary-background-active: #3b43a8;
|
||
--control-critical-primary-background-default: #ed4245;
|
||
|
||
/* Input */
|
||
--input-background-default: #1a1a2e;
|
||
--input-border-default: rgba(255, 255, 255, 0.24);
|
||
--input-text-default: #e0def0;
|
||
|
||
/* Scrollbar */
|
||
--scrollbar-auto-thumb: #1a1a2e;
|
||
--scrollbar-thin-thumb: #1a1a2e;
|
||
|
||
/* Message */
|
||
--message-background-hover: rgba(0, 0, 0, 0.12);
|
||
|
||
/* Compatibility aliases */
|
||
--bg-primary: #0c0c14;
|
||
--bg-secondary: #080810;
|
||
--bg-tertiary: #000000;
|
||
--text-normal: #e0def0;
|
||
--header-primary: #f8f8fc;
|
||
--header-secondary: #a8a5b5;
|
||
--interactive-normal: #a8a5b5;
|
||
--interactive-hover: #e0def0;
|
||
--interactive-active: #f8f8fc;
|
||
--brand-experiment: #5865f2;
|
||
--brand-experiment-hover: #4752c4;
|
||
--input-background: #1a1a2e;
|
||
--danger: #ed4245;
|
||
--background-modifier-hover: rgba(78, 73, 106, 0.2);
|
||
--background-modifier-active: rgba(78, 73, 106, 0.36);
|
||
--background-modifier-selected: rgba(78, 73, 106, 0.48);
|
||
--div-border: #080810;
|
||
|
||
--text-feedback-warning: hsl(38.455, 100%, 43.137%);
|
||
}
|
||
|
||
|
||
/* ============================================
|
||
MOBILE OVERRIDES – Dark theme only
|
||
Darker, more unified backgrounds when .is-mobile is active.
|
||
Override --bg-tertiary so inline styles using var(--bg-tertiary)
|
||
(e.g. .channel-list in Sidebar.jsx) also pick up the new color.
|
||
============================================ */
|
||
|
||
/* Override the variable so all var(--bg-tertiary) usages resolve to #1C1D22 */
|
||
.theme-dark .is-mobile {
|
||
--bg-tertiary: #1C1D22;
|
||
}
|
||
|
||
/* Server list needs a different (darker) color than --bg-tertiary */
|
||
.theme-dark .is-mobile .server-list {
|
||
background-color: #141318;
|
||
}
|
||
|
||
/* Remove borders on channel panel and DM view (inline styles, needs !important) */
|
||
.theme-dark .is-mobile .channel-panel,
|
||
.theme-dark .is-mobile .channel-list {
|
||
border-left: none !important;
|
||
}
|
||
|
||
/* Chat area/header use var(--bg-primary), not --bg-tertiary, so override explicitly */
|
||
.theme-dark .is-mobile .chat-container,
|
||
.theme-dark .is-mobile .chat-area,
|
||
.theme-dark .is-mobile .chat-header,
|
||
.theme-dark .is-mobile .chat-input-form {
|
||
background-color: #1C1D22;
|
||
}
|
||
|
||
.theme-dark .is-mobile .chat-header {
|
||
border-bottom: 1px solid var(--app-frame-border);
|
||
}
|
||
|
||
.theme-dark .is-mobile .chat-input-wrapper {
|
||
background-color: #26262E;
|
||
}
|