163 lines
8 KiB
SCSS
163 lines
8 KiB
SCSS
$bg-color: #1A1E21;
|
|
|
|
:root {
|
|
--background-secondary: #{darken($bg-color, 2%)};
|
|
}
|
|
|
|
.theme-dark {
|
|
--header-primary: #fff;
|
|
--header-secondary: #b9bbbe;
|
|
--text-normal: #dcddde;
|
|
--text-muted: #72767d;
|
|
--text-link: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
|
|
--text-link-low-saturation: hsl(197, calc(var(--saturation-factor, 1)*100%), 52.9%);
|
|
--text-positive: hsl(139, calc(var(--saturation-factor, 1)*66.8%), 58.6%);
|
|
--text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
|
|
--text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
|
|
--text-brand: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
|
|
--interactive-normal: #b9bbbe;
|
|
--interactive-hover: #dcddde;
|
|
--interactive-active: #fff;
|
|
--interactive-muted: #4f545c;
|
|
--background-primary: #{$bg-color};
|
|
--background-secondary: #{darken($bg-color, 2%)};
|
|
--background-secondary-alt: #{darken($bg-color, 3%)};
|
|
--background-tertiary: #202225;
|
|
--background-accent: #4f545c;
|
|
--background-floating: #18191c;
|
|
--background-nested-floating: #2f3136;
|
|
--background-mobile-primary: #36393f;
|
|
--background-mobile-secondary: #2f3136;
|
|
--background-modifier-hover: rgba(79, 84, 92, 0.16);
|
|
--background-modifier-active: rgba(79, 84, 92, 0.24);
|
|
--background-modifier-selected: rgba(79, 84, 92, 0.32);
|
|
--background-modifier-accent: hsla(0, 0%, 100%, 0.06);
|
|
--info-positive-text: #fff;
|
|
--info-warning-text: #fff;
|
|
--info-danger-text: #fff;
|
|
--info-help-background: hsla(197, calc(var(--saturation-factor, 1)*100%), 47.8%, 0.1);
|
|
--info-help-foreground: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%);
|
|
--info-help-text: #fff;
|
|
--status-warning-text: #000;
|
|
--scrollbar-thin-thumb: #202225;
|
|
--scrollbar-thin-track: transparent;
|
|
--scrollbar-auto-thumb: #202225;
|
|
--scrollbar-auto-track: hsl(210, calc(var(--saturation-factor, 1)*9.8%), 20%);
|
|
--scrollbar-auto-scrollbar-color-thumb: #202225;
|
|
--scrollbar-auto-scrollbar-color-track: #2f3136;
|
|
--elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15);
|
|
--elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
|
|
--elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16);
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
|
|
--logo-primary: #fff;
|
|
--control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
|
|
--control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
|
|
--background-mentioned: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
|
|
--background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.08);
|
|
--background-message-hover: rgba(4, 4, 5, 0.07);
|
|
--channels-default: #8e9297;
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
|
|
--channeltextarea-background: #40444b;
|
|
--activity-card-background: #202225;
|
|
--textbox-markdown-syntax: #8e9297;
|
|
--spoiler-revealed-background: #292b2f;
|
|
--spoiler-hidden-background: #202225;
|
|
--deprecated-card-bg: rgba(32, 34, 37, 0.6);
|
|
--deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
|
|
--deprecated-store-bg: #36393f;
|
|
--deprecated-quickswitcher-input-background: #72767d;
|
|
--deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
|
|
--deprecated-text-input-bg: rgba(0, 0, 0, 0.1);
|
|
--deprecated-text-input-border: rgba(0, 0, 0, 0.3);
|
|
--deprecated-text-input-border-hover: #040405;
|
|
--deprecated-text-input-border-disabled: #202225;
|
|
--deprecated-text-input-prefix: #dcddde
|
|
}
|
|
|
|
.theme-dark,
|
|
.theme-light {
|
|
--info-positive-background: hsla(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%, 0.1);
|
|
--info-positive-foreground: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
|
|
--info-warning-background: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
|
|
--info-warning-foreground: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
|
|
--info-danger-background: hsla(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%, 0.1);
|
|
--info-danger-foreground: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
|
|
--status-positive-background: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
|
|
--status-positive-text: #fff;
|
|
--status-warning-background: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
|
|
--status-danger-background: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
|
|
--status-danger-text: #fff;
|
|
--focus-primary: hsl(197, calc(var(--saturation-factor, 1)*100%), 47.8%)
|
|
}
|
|
|
|
.theme-light {
|
|
--header-primary: #060607;
|
|
--header-secondary: #4f5660;
|
|
--text-normal: #2e3338;
|
|
--text-muted: #747f8d;
|
|
--text-link: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
|
|
--text-link-low-saturation: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
|
|
--text-positive: hsl(139, calc(var(--saturation-factor, 1)*47.3%), 43.9%);
|
|
--text-warning: hsl(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%);
|
|
--text-danger: hsl(359, calc(var(--saturation-factor, 1)*82.6%), 59.4%);
|
|
--text-brand: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
|
|
--interactive-normal: #4f5660;
|
|
--interactive-hover: #2e3338;
|
|
--interactive-active: #060607;
|
|
--interactive-muted: #c7ccd1;
|
|
--background-primary: #fff;
|
|
--background-secondary: #f2f3f5;
|
|
--background-secondary-alt: #ebedef;
|
|
--background-tertiary: #e3e5e8;
|
|
--background-accent: #747f8d;
|
|
--background-floating: #fff;
|
|
--background-nested-floating: #fff;
|
|
--background-mobile-primary: #f8f9f9;
|
|
--background-mobile-secondary: #fff;
|
|
--background-modifier-hover: rgba(116, 127, 141, 0.08);
|
|
--background-modifier-active: rgba(116, 127, 141, 0.16);
|
|
--background-modifier-selected: rgba(116, 127, 141, 0.24);
|
|
--background-modifier-accent: rgba(6, 6, 7, 0.08);
|
|
--info-positive-text: #000;
|
|
--info-warning-text: #000;
|
|
--info-danger-text: #000;
|
|
--info-help-background: hsla(212, calc(var(--saturation-factor, 1)*100%), 43.9%, 0.1);
|
|
--info-help-foreground: hsl(212, calc(var(--saturation-factor, 1)*100%), 43.9%);
|
|
--info-help-text: #000;
|
|
--status-warning-text: #fff;
|
|
--scrollbar-thin-thumb: rgba(79, 84, 92, 0.3);
|
|
--scrollbar-thin-track: transparent;
|
|
--scrollbar-auto-thumb: #ccc;
|
|
--scrollbar-auto-track: #f2f2f2;
|
|
--scrollbar-auto-scrollbar-color-thumb: #e3e5e8;
|
|
--scrollbar-auto-scrollbar-color-track: #f2f3f5;
|
|
--elevation-stroke: 0 0 0 1px rgba(6, 6, 7, 0.08);
|
|
--elevation-low: 0 1px 0 rgba(6, 6, 7, 0.1),
|
|
0 1.5px 0 rgba(6, 6, 7, 0.025),
|
|
0 2px 0 rgba(6, 6, 7, 0.025);
|
|
--elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.08);
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.16);
|
|
--logo-primary: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
|
|
--control-brand-foreground: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
|
|
--control-brand-foreground-new: hsl(235, calc(var(--saturation-factor, 1)*85.6%), 64.7%);
|
|
--background-mentioned: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
|
|
--background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.2);
|
|
--background-message-hover: rgba(6, 6, 7, 0.02);
|
|
--channels-default: #6a7480;
|
|
--guild-header-text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.4);
|
|
--channeltextarea-background: #ebedef;
|
|
--activity-card-background: #fff;
|
|
--textbox-markdown-syntax: #6a7480;
|
|
--spoiler-revealed-background: #ebedef;
|
|
--spoiler-hidden-background: #e3e5e8;
|
|
--deprecated-card-bg: #f8f9f9;
|
|
--deprecated-card-editable-bg: rgba(246, 246, 247, 0.6);
|
|
--deprecated-store-bg: #f8f9f9;
|
|
--deprecated-quickswitcher-input-background: #fff;
|
|
--deprecated-quickswitcher-input-placeholder: rgba(79, 84, 92, 0.3);
|
|
--deprecated-text-input-bg: rgba(79, 84, 92, 0.02);
|
|
--deprecated-text-input-border: rgba(79, 84, 92, 0.3);
|
|
--deprecated-text-input-border-hover: #b9bbbe;
|
|
--deprecated-text-input-border-disabled: #dcddde;
|
|
--deprecated-text-input-prefix: #b9bbbe
|
|
} |