Created
December 16, 2023 15:56
-
-
Save qtlunya/dce7816defdc611c90f136365e51d9f9 to your computer and use it in GitHub Desktop.
Restore Discord OLED Theme on Desktop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .theme-dark .background_cb0a80 { | |
| background-color: var(--home-background); | |
| } | |
| .theme-dark .background_e80d5a { | |
| background-color: var(--home-background); | |
| } | |
| .theme-dark { | |
| --action-sheet-gradient-bg: var(--black-500); | |
| --activity-card-background: var(--primary-700); | |
| --alert-bg: var(--black-500); | |
| --android-navigation-bar-background: var(--plum-24); | |
| --android-navigation-scrim-background: hsl(var(--plum-24-hsl) / 0.5); | |
| --android-ripple: hsl(var(--white-500-hsl) / 0.07); | |
| --background-accent: var(--plum-17); | |
| --background-floating: var(--plum-23); | |
| --background-mentioned: hsl(var(--yellow-260-hsl) / 0.08); | |
| --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.08); | |
| --background-message-automod: hsl(var(--red-345-hsl) / 0.08); | |
| --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1); | |
| --background-message-highlight: hsl(var(--brand-360-hsl) / 0.08); | |
| --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.06); | |
| --background-message-hover: var(--plum-21); | |
| --background-mobile-primary: var(--black-500); | |
| --background-mobile-secondary: var(--black-500); | |
| --background-modifier-accent: hsl(var(--plum-23-alpha-hsl) / 0.09); | |
| --background-modifier-accent-2: hsl(var(--plum-11-hsl) / 0.32); | |
| --background-modifier-active: hsl(var(--plum-13-hsl) / 0.48); | |
| --background-modifier-hover: hsl(var(--plum-13-hsl) / 0.3); | |
| --background-modifier-selected: hsl(var(--plum-13-hsl) / 0.6); | |
| --background-nested-floating: var(--black-500); | |
| --background-primary: var(--black-500); | |
| --background-secondary: var(--plum-23); | |
| --background-secondary-alt: var(--plum-17); | |
| --background-tertiary: var(--plum-19); | |
| --bg-backdrop: hsl(var(--plum-19-hsl) / 0.75); | |
| --bg-backdrop-no-opacity: var(--plum-19); | |
| --bg-base-primary: var(--black-500); | |
| --bg-base-secondary: var(--black-500); | |
| --bg-base-tertiary: var(--black-500); | |
| --bg-mod-faint: hsl(var(--plum-11-hsl) / 0.08); | |
| --bg-mod-strong: hsl(var(--plum-11-hsl) / 0.18); | |
| --bg-mod-subtle: hsl(var(--plum-11-hsl) / 0.12); | |
| --bg-surface-overlay: var(--plum-19); | |
| --bg-surface-overlay-tmp: var(--plum-21); | |
| --bg-surface-raised: var(--plum-23); | |
| --black: var(--black-500); | |
| --blur-fallback: hsl(var(--plum-19-hsl) / 0.96); | |
| --blur-fallback-pressed: hsl(var(--plum-20-hsl) / 0.96); | |
| --border-faint: hsl(var(--plum-11-hsl) / 0.06); | |
| --border-strong: hsl(var(--plum-11-hsl) / 0.24); | |
| --border-subtle: hsl(var(--plum-11-hsl) / 0.12); | |
| --bug-reporter-modal-submitting-background: hsl(var(--plum-23-hsl) / 0.6); | |
| --button-creator-revenue-background: var(--teal-430); | |
| --button-danger-background: var(--red-430); | |
| --button-danger-background-active: var(--red-530); | |
| --button-danger-background-disabled: var(--red-430); | |
| --button-danger-background-hover: var(--red-500); | |
| --button-outline-brand-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-brand-background-active: var(--brand-560); | |
| --button-outline-brand-background-hover: var(--brand-500); | |
| --button-outline-brand-border: var(--brand-500); | |
| --button-outline-brand-border-active: var(--brand-560); | |
| --button-outline-brand-border-hover: var(--brand-500); | |
| --button-outline-brand-text: var(--white-500); | |
| --button-outline-brand-text-active: var(--white-500); | |
| --button-outline-brand-text-hover: var(--white-500); | |
| --button-outline-danger-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-danger-background-active: var(--red-460); | |
| --button-outline-danger-background-hover: var(--red-430); | |
| --button-outline-danger-border: var(--red-400); | |
| --button-outline-danger-border-active: var(--red-430); | |
| --button-outline-danger-border-hover: var(--red-430); | |
| --button-outline-danger-text: var(--white-500); | |
| --button-outline-danger-text-active: var(--white-500); | |
| --button-outline-danger-text-hover: var(--white-500); | |
| --button-outline-positive-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-positive-background-active: var(--green-530); | |
| --button-outline-positive-background-hover: var(--green-430); | |
| --button-outline-positive-border: var(--green-360); | |
| --button-outline-positive-border-active: var(--green-530); | |
| --button-outline-positive-border-hover: var(--green-430); | |
| --button-outline-positive-text: var(--white-500); | |
| --button-outline-positive-text-active: var(--white-500); | |
| --button-outline-positive-text-hover: var(--white-500); | |
| --button-outline-primary-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-primary-background-active: var(--plum-11); | |
| --button-outline-primary-background-hover: var(--plum-13); | |
| --button-outline-primary-border: var(--primary-500); | |
| --button-outline-primary-border-active: var(--plum-11); | |
| --button-outline-primary-border-hover: var(--plum-13); | |
| --button-outline-primary-text: var(--white-500); | |
| --button-outline-primary-text-active: var(--white-500); | |
| --button-outline-primary-text-hover: var(--white-500); | |
| --button-positive-background: var(--green-430); | |
| --button-positive-background-active: var(--green-530); | |
| --button-positive-background-disabled: var(--green-430); | |
| --button-positive-background-hover: var(--green-530); | |
| --button-secondary-background: var(--plum-13); | |
| --button-secondary-background-active: var(--plum-10); | |
| --button-secondary-background-disabled: var(--plum-13); | |
| --button-secondary-background-hover: var(--plum-11); | |
| --card-gradient-bg: hsl(var(--black-500-hsl) / 0.4); | |
| --card-gradient-pressed-bg: hsl(var(--black-500-hsl) / 0.5); | |
| --card-primary-bg: var(--plum-23); | |
| --card-primary-pressed-bg: var(--plum-25); | |
| --card-secondary-bg: var(--plum-25); | |
| --card-secondary-pressed-bg: var(--plum-26); | |
| --channel-icon: var(--plum-10); | |
| --channel-text-area-placeholder: var(--plum-11); | |
| --channels-default: var(--plum-9); | |
| --channeltextarea-background: var(--plum-23); | |
| --chat-background: var(--black-500); | |
| --chat-banner-bg: var(--black-500); | |
| --chat-border: var(--plum-20); | |
| --chat-input-container-background: var(--plum-16); | |
| --chat-swipe-to-reply-background: var(--plum-22); | |
| --chat-swipe-to-reply-gradient-background: hsl(var(--black-500-hsl) / 0.1); | |
| --control-brand-foreground: var(--brand-360); | |
| --control-brand-foreground-new: var(--brand-360); | |
| --creator-revenue-icon-gradient-end: var(--teal-430); | |
| --creator-revenue-icon-gradient-start: var(--teal-360); | |
| --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1); | |
| --creator-revenue-info-box-border: var(--teal-400); | |
| --creator-revenue-locked-channel-icon: var(--teal-345); | |
| --creator-revenue-progress-bar: var(--teal-400); | |
| --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6); | |
| --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3); | |
| --deprecated-quickswitcher-input-background: var(--primary-400); | |
| --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl) / 0.3); | |
| --deprecated-store-bg: var(--primary-600); | |
| --deprecated-text-input-bg: var(--primary-700); | |
| --deprecated-text-input-border: hsl(var(--black-500-hsl) / 0.3); | |
| --deprecated-text-input-border-disabled: var(--primary-700); | |
| --deprecated-text-input-border-hover: var(--primary-900); | |
| --deprecated-text-input-prefix: var(--primary-200); | |
| --display-banner-overflow-background: hsl(var(--plum-20-hsl) / 0.5); | |
| --divider-strong: hsl(var(--plum-11-hsl) / 0.24); | |
| --divider-subtle: hsl(var(--plum-11-hsl) / 0.12); | |
| --expression-picker-bg: var(--black-500); | |
| --focus-primary: var(--blue-345); | |
| --forum-post-extra-media-count-container-background: hsl( | |
| var(--plum-19-hsl) / 0.8 | |
| ); | |
| --forum-post-tag-background: hsl(var(--plum-19-hsl) / 0.9); | |
| --guild-icon-inactive-bg: var(--black-500); | |
| --guild-icon-inactive-nested-bg: var(--black-500); | |
| --guild-notifications-bottom-sheet-pill-background: var(--primary-700); | |
| --header-muted: var(--plum-10); | |
| --header-primary: var(--plum-2); | |
| --header-secondary: var(--plum-8); | |
| --home-background: var(--plum-18); | |
| --home-card-resting-border: hsl(var(--transparent-hsl) / 0); | |
| --icon-muted: var(--plum-12); | |
| --icon-primary: var(--plum-5); | |
| --icon-secondary: var(--plum-9); | |
| --icon-transparent: hsl(var(--transparent-hsl) / 0); | |
| --info-box-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-danger-background: hsl(var(--red-400-hsl) / 0.1); | |
| --info-danger-foreground: var(--red-400); | |
| --info-danger-text: var(--white-500); | |
| --info-help-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-help-foreground: var(--blue-345); | |
| --info-help-text: var(--white-500); | |
| --info-positive-background: hsl(var(--green-360-hsl) / 0.1); | |
| --info-positive-foreground: var(--green-360); | |
| --info-positive-text: var(--white-500); | |
| --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1); | |
| --info-warning-foreground: var(--yellow-300); | |
| --info-warning-text: var(--white-500); | |
| --input-background: hsl(var(--plum-23-alpha-hsl) / 0.09); | |
| --input-focused-border: hsl(var(--plum-11-hsl) / 0.24); | |
| --input-placeholder-text: var(--plum-9); | |
| --interactive-active: var(--plum-3); | |
| --interactive-hover: var(--plum-4); | |
| --interactive-muted: var(--plum-13); | |
| --interactive-normal: var(--plum-6); | |
| --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5); | |
| --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-500-hsl) / 0.025); | |
| --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975); | |
| --legacy-blur-fallback-ultra-thin: hsl(var(--black-500-hsl) / 0.95); | |
| --live-stage-tile-border: hsl(var(--plum-13-hsl) / 0.6); | |
| --logo-primary: var(--white-500); | |
| --mention-background: hsl(var(--brand-500-hsl) / 0.5); | |
| --mention-foreground: var(--brand-230); | |
| --modal-background: var(--plum-16); | |
| --modal-footer-background: var(--plum-17); | |
| --navigator-header-tint: var(--white-500); | |
| --panel-bg: var(--plum-24); | |
| --polls-embed-background: hsl(var(--brand-360-hsl) / 0.08); | |
| --polls-embed-border: hsl(var(--primary-630-hsl) / 0.5); | |
| --polls-image-normal-border: hsl(var(--black-430-hsl) / 0.9); | |
| --polls-normal-border: var(--primary-700); | |
| --polls-normal-confetti: var(--brand-500); | |
| --polls-normal-fill: var(--primary-530); | |
| --polls-normal-label: var(--white-500); | |
| --polls-victor-border: var(--yellow-300); | |
| --polls-victor-fill: var(--yellow-200); | |
| --polls-victor-label: var(--primary-600); | |
| --polls-voted-border: var(--green-330); | |
| --polls-voted-fill: var(--green-160); | |
| --polls-voted-label: var(--primary-600); | |
| --profile-gradient-card-background: hsl(var(--black-500-hsl) / 0.7); | |
| --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48); | |
| --profile-gradient-note-background: hsl(var(--black-500-hsl) / 0.3); | |
| --profile-gradient-overlay: hsl(var(--black-500-hsl) / 0.6); | |
| --profile-gradient-overlay-synced-with-user-theme: hsl( | |
| var(--black-500-hsl) / 0.8 | |
| ); | |
| --profile-gradient-profile-body-background-hover: hsl( | |
| var(--white-500-hsl) / 0.16 | |
| ); | |
| --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5); | |
| --profile-gradient-role-pill-border: hsl(var(--white-500-hsl) / 0.2); | |
| --profile-gradient-section-box: hsl(var(--black-500-hsl) / 0.45); | |
| --redesign-activity-card-background: var(--primary-560); | |
| --redesign-activity-card-background-pressed: var(--primary-630); | |
| --redesign-activity-card-badge-icon: var(--plum-11); | |
| --redesign-activity-card-border: hsl(var(--plum-11-hsl) / 0.12); | |
| --redesign-activity-card-overflow-background: var(--primary-630); | |
| --redesign-button-danger-background: var(--red-430); | |
| --redesign-button-danger-pressed-background: var(--red-460); | |
| --redesign-button-danger-text: var(--white-500); | |
| --redesign-button-overlay-alpha-background: hsl(var(--black-500-hsl) / 0.54); | |
| --redesign-button-overlay-alpha-pressed-background: hsl( | |
| var(--black-500-hsl) / 0.64 | |
| ); | |
| --redesign-button-overlay-alpha-text: var(--white-500); | |
| --redesign-button-overlay-background: var(--white-500); | |
| --redesign-button-overlay-pressed-background: var(--plum-4); | |
| --redesign-button-overlay-text: var(--plum-25); | |
| --redesign-button-positive-background: var(--green-430); | |
| --redesign-button-positive-pressed-background: var(--green-460); | |
| --redesign-button-positive-text: var(--white-500); | |
| --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0); | |
| --redesign-button-primary-alt-border: var(--brand-400); | |
| --redesign-button-primary-alt-on-blurple-background: hsl( | |
| var(--brand-530-hsl) / 0 | |
| ); | |
| --redesign-button-primary-alt-on-blurple-border: var(--white-500); | |
| --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530); | |
| --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360); | |
| --redesign-button-primary-alt-on-blurple-text: var(--white-500); | |
| --redesign-button-primary-alt-pressed-background: hsl( | |
| var(--brand-700-hsl) / 0.16 | |
| ); | |
| --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5); | |
| --redesign-button-primary-alt-pressed-text: var(--brand-360); | |
| --redesign-button-primary-alt-text: var(--brand-400); | |
| --redesign-button-primary-background: var(--brand-500); | |
| --redesign-button-primary-on-blurple-background: var(--white-500); | |
| --redesign-button-primary-on-blurple-pressed-background: var(--brand-200); | |
| --redesign-button-primary-on-blurple-pressed-text: var(--brand-530); | |
| --redesign-button-primary-on-blurple-text: var(--brand-500); | |
| --redesign-button-primary-pressed-background: var(--brand-560); | |
| --redesign-button-primary-text: var(--white-500); | |
| --redesign-button-secondary-alt-background: hsl( | |
| var(--plum-23-alpha-hsl) / 0.09 | |
| ); | |
| --redesign-button-secondary-alt-pressed-background: hsl( | |
| var(--plum-11-hsl) / 0.2 | |
| ); | |
| --redesign-button-secondary-alt-pressed-text: var(--plum-8); | |
| --redesign-button-secondary-alt-text: var(--plum-4); | |
| --redesign-button-secondary-background: var(--plum-17); | |
| --redesign-button-secondary-border: hsl(var(--plum-11-hsl) / 0.12); | |
| --redesign-button-secondary-pressed-background: var(--plum-15); | |
| --redesign-button-secondary-pressed-border: hsl(var(--plum-11-hsl) / 0.06); | |
| --redesign-button-secondary-text: var(--plum-4); | |
| --redesign-channel-category-name-text: var(--plum-8); | |
| --redesign-channel-message-preview-text: var(--plum-10); | |
| --redesign-channel-name-muted-text: var(--plum-10); | |
| --redesign-channel-name-text: var(--plum-2); | |
| --redesign-chat-input-background: hsl(var(--plum-23-alpha-hsl) / 0.09); | |
| --redesign-input-control-active-bg: var(--plum-17); | |
| --redesign-input-control-selected: var(--brand-500); | |
| --redesign-only-background-active: var(--primary-530); | |
| --redesign-only-background-default: var(--primary-600); | |
| --redesign-only-background-overlay: var(--primary-645); | |
| --redesign-only-background-raised: var(--primary-630); | |
| --redesign-only-background-sunken: var(--primary-660); | |
| --scrollbar-auto-scrollbar-color-thumb: var(--plum-20); | |
| --scrollbar-auto-scrollbar-color-track: var(--plum-17); | |
| --scrollbar-auto-thumb: var(--plum-16); | |
| --scrollbar-auto-track: var(--plum-25); | |
| --scrollbar-thin-thumb: var(--plum-20); | |
| --scrollbar-thin-track: hsl(var(--black-500-hsl) / 0); | |
| --spoiler-hidden-background: var(--plum-14); | |
| --spoiler-revealed-background: hsl(var(--plum-11-hsl) / 0.16); | |
| --status-danger: var(--red-400); | |
| --status-danger-background: var(--red-400); | |
| --status-danger-text: var(--white-500); | |
| --status-dnd: var(--red-400); | |
| --status-idle: var(--yellow-300); | |
| --status-offline: var(--plum-9); | |
| --status-online: var(--green-360); | |
| --status-positive: var(--green-360); | |
| --status-positive-background: var(--green-430); | |
| --status-positive-text: var(--white-500); | |
| --status-speaking: var(--green-360); | |
| --status-warning: var(--yellow-300); | |
| --status-warning-background: var(--yellow-300); | |
| --status-warning-text: var(--black-500); | |
| --text-brand: var(--brand-400); | |
| --text-danger: var(--red-345); | |
| --text-link: var(--blue-345); | |
| --text-link-low-saturation: var(--blue-330); | |
| --text-low-contrast: var(--plum-12); | |
| --text-message-preview-low-sat: var(--plum-9); | |
| --text-muted: var(--plum-10); | |
| --text-muted-on-default: var(--primary-330); | |
| --text-normal: var(--plum-4); | |
| --text-positive: var(--green-330); | |
| --text-primary: var(--plum-4); | |
| --text-secondary: var(--plum-8); | |
| --text-warning: var(--yellow-300); | |
| --textbox-markdown-syntax: var(--plum-9); | |
| --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96); | |
| --toast-bg: var(--plum-19); | |
| --typing-indicator-bg: var(--black-500); | |
| --user-profile-header-overflow-background: hsl(var(--plum-20-hsl) / 0.5); | |
| --voice-video-tile-blur-fallback: hsl(var(--plum-20-hsl) / 0.5); | |
| --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); | |
| --white: var(--white-500); | |
| } | |
| .theme-darker { | |
| --action-sheet-gradient-bg: var(--plum-20); | |
| --activity-card-background: var(--primary-700); | |
| --alert-bg: var(--plum-20); | |
| --android-navigation-bar-background: var(--plum-24); | |
| --android-navigation-scrim-background: hsl(var(--plum-24-hsl) / 0.5); | |
| --android-ripple: hsl(var(--white-500-hsl) / 0.07); | |
| --background-accent: var(--plum-15); | |
| --background-floating: var(--plum-18); | |
| --background-mentioned: hsl(var(--yellow-260-hsl) / 0.08); | |
| --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.08); | |
| --background-message-automod: hsl(var(--red-345-hsl) / 0.08); | |
| --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1); | |
| --background-message-highlight: hsl(var(--brand-360-hsl) / 0.08); | |
| --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.06); | |
| --background-message-hover: var(--plum-21); | |
| --background-mobile-primary: var(--plum-20); | |
| --background-mobile-secondary: var(--plum-20); | |
| --background-modifier-accent: hsl(var(--plum-11-hsl) / 0.12); | |
| --background-modifier-accent-2: hsl(var(--plum-11-hsl) / 0.24); | |
| --background-modifier-active: hsl(var(--plum-13-hsl) / 0.48); | |
| --background-modifier-hover: hsl(var(--plum-13-hsl) / 0.3); | |
| --background-modifier-selected: hsl(var(--plum-13-hsl) / 0.6); | |
| --background-nested-floating: var(--plum-22); | |
| --background-primary: var(--plum-20); | |
| --background-secondary: var(--plum-18); | |
| --background-secondary-alt: var(--plum-15); | |
| --background-tertiary: var(--plum-16); | |
| --bg-backdrop: hsl(var(--black-500-hsl) / 0.7); | |
| --bg-backdrop-no-opacity: var(--black-500); | |
| --bg-base-primary: var(--plum-20); | |
| --bg-base-secondary: var(--plum-20); | |
| --bg-base-tertiary: var(--plum-23); | |
| --bg-mod-faint: hsl(var(--plum-11-hsl) / 0.12); | |
| --bg-mod-strong: hsl(var(--plum-11-hsl) / 0.24); | |
| --bg-mod-subtle: hsl(var(--plum-11-hsl) / 0.16); | |
| --bg-surface-overlay: var(--plum-17); | |
| --bg-surface-overlay-tmp: var(--plum-17); | |
| --bg-surface-raised: var(--plum-18); | |
| --black: var(--black-500); | |
| --blur-fallback: hsl(var(--plum-17-hsl) / 0.96); | |
| --blur-fallback-pressed: hsl(var(--plum-18-hsl) / 0.96); | |
| --border-faint: hsl(var(--plum-11-hsl) / 0.06); | |
| --border-strong: hsl(var(--plum-11-hsl) / 0.22); | |
| --border-subtle: hsl(var(--plum-11-hsl) / 0.12); | |
| --bug-reporter-modal-submitting-background: hsl(var(--plum-23-hsl) / 0.6); | |
| --button-creator-revenue-background: var(--teal-430); | |
| --button-danger-background: var(--red-430); | |
| --button-danger-background-active: var(--red-530); | |
| --button-danger-background-disabled: var(--red-430); | |
| --button-danger-background-hover: var(--red-500); | |
| --button-outline-brand-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-brand-background-active: var(--brand-560); | |
| --button-outline-brand-background-hover: var(--brand-500); | |
| --button-outline-brand-border: var(--brand-500); | |
| --button-outline-brand-border-active: var(--brand-560); | |
| --button-outline-brand-border-hover: var(--brand-500); | |
| --button-outline-brand-text: var(--white-500); | |
| --button-outline-brand-text-active: var(--white-500); | |
| --button-outline-brand-text-hover: var(--white-500); | |
| --button-outline-danger-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-danger-background-active: var(--red-460); | |
| --button-outline-danger-background-hover: var(--red-430); | |
| --button-outline-danger-border: var(--red-400); | |
| --button-outline-danger-border-active: var(--red-430); | |
| --button-outline-danger-border-hover: var(--red-430); | |
| --button-outline-danger-text: var(--white-500); | |
| --button-outline-danger-text-active: var(--white-500); | |
| --button-outline-danger-text-hover: var(--white-500); | |
| --button-outline-positive-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-positive-background-active: var(--green-530); | |
| --button-outline-positive-background-hover: var(--green-430); | |
| --button-outline-positive-border: var(--green-360); | |
| --button-outline-positive-border-active: var(--green-530); | |
| --button-outline-positive-border-hover: var(--green-430); | |
| --button-outline-positive-text: var(--white-500); | |
| --button-outline-positive-text-active: var(--white-500); | |
| --button-outline-positive-text-hover: var(--white-500); | |
| --button-outline-primary-background: hsl(var(--white-500-hsl) / 0); | |
| --button-outline-primary-background-active: var(--plum-11); | |
| --button-outline-primary-background-hover: var(--plum-13); | |
| --button-outline-primary-border: var(--primary-500); | |
| --button-outline-primary-border-active: var(--plum-11); | |
| --button-outline-primary-border-hover: var(--plum-13); | |
| --button-outline-primary-text: var(--white-500); | |
| --button-outline-primary-text-active: var(--white-500); | |
| --button-outline-primary-text-hover: var(--white-500); | |
| --button-positive-background: var(--green-430); | |
| --button-positive-background-active: var(--green-530); | |
| --button-positive-background-disabled: var(--green-430); | |
| --button-positive-background-hover: var(--green-500); | |
| --button-secondary-background: var(--plum-13); | |
| --button-secondary-background-active: var(--plum-10); | |
| --button-secondary-background-disabled: var(--plum-13); | |
| --button-secondary-background-hover: var(--plum-11); | |
| --card-gradient-bg: hsl(var(--black-500-hsl) / 0.4); | |
| --card-gradient-pressed-bg: hsl(var(--black-500-hsl) / 0.5); | |
| --card-primary-bg: var(--plum-18); | |
| --card-primary-pressed-bg: var(--plum-19); | |
| --card-secondary-bg: var(--plum-19); | |
| --card-secondary-pressed-bg: var(--plum-21); | |
| --channel-icon: var(--plum-10); | |
| --channel-text-area-placeholder: var(--plum-11); | |
| --channels-default: var(--plum-9); | |
| --channeltextarea-background: var(--plum-15); | |
| --chat-background: var(--plum-16); | |
| --chat-banner-bg: var(--plum-20); | |
| --chat-border: var(--plum-20); | |
| --chat-input-container-background: var(--plum-16); | |
| --chat-swipe-to-reply-background: var(--plum-22); | |
| --chat-swipe-to-reply-gradient-background: hsl(var(--black-500-hsl) / 0.1); | |
| --control-brand-foreground: var(--brand-360); | |
| --control-brand-foreground-new: var(--brand-360); | |
| --creator-revenue-icon-gradient-end: var(--teal-430); | |
| --creator-revenue-icon-gradient-start: var(--teal-360); | |
| --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1); | |
| --creator-revenue-info-box-border: var(--teal-400); | |
| --creator-revenue-locked-channel-icon: var(--teal-345); | |
| --creator-revenue-progress-bar: var(--teal-400); | |
| --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6); | |
| --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3); | |
| --deprecated-quickswitcher-input-background: var(--primary-400); | |
| --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl) / 0.3); | |
| --deprecated-store-bg: var(--primary-600); | |
| --deprecated-text-input-bg: var(--primary-700); | |
| --deprecated-text-input-border: hsl(var(--black-500-hsl) / 0.3); | |
| --deprecated-text-input-border-disabled: var(--primary-700); | |
| --deprecated-text-input-border-hover: var(--primary-900); | |
| --deprecated-text-input-prefix: var(--primary-200); | |
| --display-banner-overflow-background: hsl(var(--plum-20-hsl) / 0.5); | |
| --divider-strong: hsl(var(--plum-11-hsl) / 0.22); | |
| --divider-subtle: hsl(var(--plum-11-hsl) / 0.12); | |
| --expression-picker-bg: var(--plum-20); | |
| --focus-primary: var(--blue-345); | |
| --forum-post-extra-media-count-container-background: hsl( | |
| var(--plum-19-hsl) / 0.8 | |
| ); | |
| --forum-post-tag-background: hsl(var(--plum-19-hsl) / 0.9); | |
| --guild-icon-inactive-bg: var(--plum-20); | |
| --guild-icon-inactive-nested-bg: var(--plum-20); | |
| --guild-notifications-bottom-sheet-pill-background: var(--primary-700); | |
| --header-muted: var(--plum-10); | |
| --header-primary: var(--plum-1); | |
| --header-secondary: var(--plum-9); | |
| --home-background: var(--plum-18); | |
| --home-card-resting-border: hsl(var(--transparent-hsl) / 0); | |
| --icon-muted: var(--plum-11); | |
| --icon-primary: var(--plum-4); | |
| --icon-secondary: var(--plum-9); | |
| --icon-transparent: hsl(var(--transparent-hsl) / 0); | |
| --info-box-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-danger-background: hsl(var(--red-400-hsl) / 0.1); | |
| --info-danger-foreground: var(--red-400); | |
| --info-danger-text: var(--white-500); | |
| --info-help-background: hsl(var(--blue-345-hsl) / 0.1); | |
| --info-help-foreground: var(--blue-345); | |
| --info-help-text: var(--white-500); | |
| --info-positive-background: hsl(var(--green-360-hsl) / 0.1); | |
| --info-positive-foreground: var(--green-360); | |
| --info-positive-text: var(--white-500); | |
| --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1); | |
| --info-warning-foreground: var(--yellow-300); | |
| --info-warning-text: var(--white-500); | |
| --input-background: hsl(var(--plum-24-hsl) / 0.85); | |
| --input-focused-border: hsl(var(--plum-11-hsl) / 0.32); | |
| --input-placeholder-text: var(--plum-10); | |
| --interactive-active: var(--plum-1); | |
| --interactive-hover: var(--plum-4); | |
| --interactive-muted: var(--plum-13); | |
| --interactive-normal: var(--plum-6); | |
| --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5); | |
| --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-500-hsl) / 0.025); | |
| --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975); | |
| --legacy-blur-fallback-ultra-thin: hsl(var(--black-500-hsl) / 0.95); | |
| --live-stage-tile-border: hsl(var(--plum-13-hsl) / 0.6); | |
| --logo-primary: var(--white-500); | |
| --mention-background: hsl(var(--brand-500-hsl) / 0.5); | |
| --mention-foreground: var(--brand-230); | |
| --modal-background: var(--plum-16); | |
| --modal-footer-background: var(--plum-17); | |
| --navigator-header-tint: var(--white-500); | |
| --panel-bg: var(--plum-20); | |
| --polls-embed-background: hsl(var(--brand-360-hsl) / 0.08); | |
| --polls-embed-border: hsl(var(--primary-630-hsl) / 0.5); | |
| --polls-image-normal-border: hsl(var(--black-430-hsl) / 0.9); | |
| --polls-normal-border: var(--primary-700); | |
| --polls-normal-confetti: var(--brand-500); | |
| --polls-normal-fill: var(--primary-530); | |
| --polls-normal-label: var(--white-500); | |
| --polls-victor-border: var(--yellow-300); | |
| --polls-victor-fill: var(--yellow-200); | |
| --polls-victor-label: var(--primary-600); | |
| --polls-voted-border: var(--green-330); | |
| --polls-voted-fill: var(--green-160); | |
| --polls-voted-label: var(--primary-600); | |
| --profile-gradient-card-background: hsl(var(--black-500-hsl) / 0.7); | |
| --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48); | |
| --profile-gradient-note-background: hsl(var(--black-500-hsl) / 0.3); | |
| --profile-gradient-overlay: hsl(var(--black-500-hsl) / 0.6); | |
| --profile-gradient-overlay-synced-with-user-theme: hsl( | |
| var(--black-500-hsl) / 0.8 | |
| ); | |
| --profile-gradient-profile-body-background-hover: hsl( | |
| var(--white-500-hsl) / 0.16 | |
| ); | |
| --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5); | |
| --profile-gradient-role-pill-border: hsl(var(--white-500-hsl) / 0.2); | |
| --profile-gradient-section-box: hsl(var(--black-500-hsl) / 0.45); | |
| --redesign-activity-card-background: var(--primary-560); | |
| --redesign-activity-card-background-pressed: var(--primary-630); | |
| --redesign-activity-card-badge-icon: var(--plum-10); | |
| --redesign-activity-card-border: hsl(var(--plum-11-hsl) / 0.06); | |
| --redesign-activity-card-overflow-background: var(--plum-17); | |
| --redesign-button-danger-background: var(--red-430); | |
| --redesign-button-danger-pressed-background: var(--red-460); | |
| --redesign-button-danger-text: var(--white-500); | |
| --redesign-button-overlay-alpha-background: hsl(var(--black-500-hsl) / 0.54); | |
| --redesign-button-overlay-alpha-pressed-background: hsl( | |
| var(--black-500-hsl) / 0.64 | |
| ); | |
| --redesign-button-overlay-alpha-text: var(--white-500); | |
| --redesign-button-overlay-background: var(--white-500); | |
| --redesign-button-overlay-pressed-background: var(--plum-4); | |
| --redesign-button-overlay-text: var(--plum-25); | |
| --redesign-button-positive-background: var(--green-430); | |
| --redesign-button-positive-pressed-background: var(--green-460); | |
| --redesign-button-positive-text: var(--white-500); | |
| --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0); | |
| --redesign-button-primary-alt-border: var(--brand-360); | |
| --redesign-button-primary-alt-on-blurple-background: hsl( | |
| var(--brand-530-hsl) / 0 | |
| ); | |
| --redesign-button-primary-alt-on-blurple-border: var(--white-500); | |
| --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530); | |
| --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360); | |
| --redesign-button-primary-alt-on-blurple-text: var(--white-500); | |
| --redesign-button-primary-alt-pressed-background: hsl( | |
| var(--brand-700-hsl) / 0.16 | |
| ); | |
| --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5); | |
| --redesign-button-primary-alt-pressed-text: var(--brand-360); | |
| --redesign-button-primary-alt-text: var(--brand-360); | |
| --redesign-button-primary-background: var(--brand-500); | |
| --redesign-button-primary-on-blurple-background: var(--white-500); | |
| --redesign-button-primary-on-blurple-pressed-background: var(--brand-200); | |
| --redesign-button-primary-on-blurple-pressed-text: var(--brand-530); | |
| --redesign-button-primary-on-blurple-text: var(--brand-500); | |
| --redesign-button-primary-pressed-background: var(--brand-560); | |
| --redesign-button-primary-text: var(--white-500); | |
| --redesign-button-secondary-alt-background: hsl(var(--plum-11-hsl) / 0.12); | |
| --redesign-button-secondary-alt-pressed-background: hsl( | |
| var(--plum-11-hsl) / 0.2 | |
| ); | |
| --redesign-button-secondary-alt-pressed-text: var(--plum-9); | |
| --redesign-button-secondary-alt-text: var(--plum-3); | |
| --redesign-button-secondary-background: var(--plum-15); | |
| --redesign-button-secondary-border: hsl(var(--plum-11-hsl) / 0.12); | |
| --redesign-button-secondary-pressed-background: var(--plum-13); | |
| --redesign-button-secondary-pressed-border: hsl(var(--plum-11-hsl) / 0.06); | |
| --redesign-button-secondary-text: var(--plum-3); | |
| --redesign-channel-category-name-text: var(--plum-9); | |
| --redesign-channel-message-preview-text: var(--plum-10); | |
| --redesign-channel-name-muted-text: var(--plum-10); | |
| --redesign-channel-name-text: var(--plum-1); | |
| --redesign-chat-input-background: hsl(var(--plum-11-hsl) / 0.12); | |
| --redesign-input-control-active-bg: var(--plum-16); | |
| --redesign-input-control-selected: var(--brand-500); | |
| --redesign-only-background-active: var(--primary-530); | |
| --redesign-only-background-default: var(--primary-600); | |
| --redesign-only-background-overlay: var(--primary-645); | |
| --redesign-only-background-raised: var(--primary-630); | |
| --redesign-only-background-sunken: var(--primary-660); | |
| --scrollbar-auto-scrollbar-color-thumb: var(--plum-21); | |
| --scrollbar-auto-scrollbar-color-track: var(--plum-17); | |
| --scrollbar-auto-thumb: var(--plum-21); | |
| --scrollbar-auto-track: var(--plum-17); | |
| --scrollbar-thin-thumb: var(--plum-21); | |
| --scrollbar-thin-track: hsl(var(--black-500-hsl) / 0); | |
| --spoiler-hidden-background: var(--plum-14); | |
| --spoiler-revealed-background: hsl(var(--plum-11-hsl) / 0.16); | |
| --status-danger: var(--red-400); | |
| --status-danger-background: var(--red-400); | |
| --status-danger-text: var(--white-500); | |
| --status-dnd: var(--red-400); | |
| --status-idle: var(--yellow-300); | |
| --status-offline: var(--plum-9); | |
| --status-online: var(--green-360); | |
| --status-positive: var(--green-360); | |
| --status-positive-background: var(--green-430); | |
| --status-positive-text: var(--white-500); | |
| --status-speaking: var(--green-360); | |
| --status-warning: var(--yellow-300); | |
| --status-warning-background: var(--yellow-300); | |
| --status-warning-text: var(--black-500); | |
| --text-brand: var(--brand-360); | |
| --text-danger: var(--red-345); | |
| --text-link: var(--blue-345); | |
| --text-link-low-saturation: var(--blue-330); | |
| --text-low-contrast: var(--plum-11); | |
| --text-message-preview-low-sat: var(--plum-11); | |
| --text-muted: var(--plum-10); | |
| --text-muted-on-default: var(--primary-330); | |
| --text-normal: var(--plum-3); | |
| --text-positive: var(--green-330); | |
| --text-primary: var(--plum-3); | |
| --text-secondary: var(--plum-9); | |
| --text-warning: var(--yellow-300); | |
| --textbox-markdown-syntax: var(--plum-9); | |
| --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96); | |
| --toast-bg: var(--plum-17); | |
| --typing-indicator-bg: var(--plum-20); | |
| --user-profile-header-overflow-background: hsl(var(--plum-20-hsl) / 0.5); | |
| --voice-video-tile-blur-fallback: hsl(var(--plum-20-hsl) / 0.5); | |
| --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); | |
| --white: var(--white-500); | |
| } | |
| .theme-dark { | |
| --shadow-border: 0 0 0 1px hsla(0, 0%, 100%, 0.08); | |
| --shadow-border-filter: drop-shadow(0 0 1px hsla(0, 0%, 100%, 0.08)); | |
| --shadow-button-overlay: 0 12px 24px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-button-overlay-filter: drop-shadow( | |
| 0 12px 24px hsla(0, 0%, 0%, 0.24) | |
| ); | |
| --shadow-high: 0 12px 24px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-high-filter: drop-shadow(0 12px 24px hsla(0, 0%, 0%, 0.24)); | |
| --shadow-ledge: 0 2px 0 0 hsla(0, 0%, 0%, 0.05), | |
| 0 1.5px 0 0 hsla(0, 0%, 0%, 0.05), 0 1px 0 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsla(0, 0%, 0%, 0.24)); | |
| --shadow-low: 0 1px 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-filter: drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-low-active: 0 0 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-active-filter: drop-shadow(0 0 4px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-low-hover: 0 4px 10px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-hover-filter: drop-shadow(0 4px 10px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-medium: 0 4px 8px 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-medium-filter: drop-shadow(0 4px 8px hsla(0, 0%, 0%, 0.16)); | |
| --shadow-mobile-navigator-x: 0 0 10px 0 hsla(0, 0%, 0%, 0.22); | |
| --shadow-mobile-navigator-x-filter: drop-shadow( | |
| 0 0 10px hsla(0, 0%, 0%, 0.22) | |
| ); | |
| --shadow-top-high: 0 -12px 32px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-top-high-filter: drop-shadow(0 -12px 32px hsla(0, 0%, 0%, 0.24)); | |
| --shadow-top-ledge: 0 -2px 0 0 hsla(0, 0%, 0%, 0.05), | |
| 0 -1.5px 0 0 hsla(0, 0%, 0%, 0.05), 0 -1px 0 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsla(0, 0%, 0%, 0.24)); | |
| --shadow-top-low: 0 -1px 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-top-low-filter: drop-shadow(0 -1px 4px hsla(0, 0%, 0%, 0.14)); | |
| } | |
| .theme-dark, | |
| .theme-darker { | |
| --shadow-border: 0 0 0 1px hsla(0, 0%, 100%, 0.08); | |
| --shadow-border-filter: drop-shadow(0 0 1px hsla(0, 0%, 100%, 0.08)); | |
| --shadow-button-overlay: 0 12px 24px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-button-overlay-filter: drop-shadow( | |
| 0 12px 24px hsla(0, 0%, 0%, 0.24) | |
| ); | |
| --shadow-high: 0 12px 24px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-high-filter: drop-shadow(0 12px 24px hsla(0, 0%, 0%, 0.24)); | |
| --shadow-ledge: 0 2px 0 0 hsla(0, 0%, 0%, 0.05), | |
| 0 1.5px 0 0 hsla(0, 0%, 0%, 0.05), 0 1px 0 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsla(0, 0%, 0%, 0.24)); | |
| --shadow-low: 0 1px 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-filter: drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-low-active: 0 0 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-active-filter: drop-shadow(0 0 4px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-low-hover: 0 4px 10px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-low-hover-filter: drop-shadow(0 4px 10px hsla(0, 0%, 0%, 0.14)); | |
| --shadow-medium: 0 4px 8px 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-medium-filter: drop-shadow(0 4px 8px hsla(0, 0%, 0%, 0.16)); | |
| --shadow-mobile-navigator-x: 0 0 10px 0 hsla(0, 0%, 0%, 0.22); | |
| --shadow-mobile-navigator-x-filter: drop-shadow( | |
| 0 0 10px hsla(0, 0%, 0%, 0.22) | |
| ); | |
| --shadow-top-high: 0 -12px 32px 0 hsla(0, 0%, 0%, 0.24); | |
| --shadow-top-high-filter: drop-shadow(0 -12px 32px hsla(0, 0%, 0%, 0.24)); | |
| --shadow-top-ledge: 0 -2px 0 0 hsla(0, 0%, 0%, 0.05), | |
| 0 -1.5px 0 0 hsla(0, 0%, 0%, 0.05), 0 -1px 0 0 hsla(0, 0%, 0%, 0.16); | |
| --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsla(0, 0%, 0%, 0.24)); | |
| --shadow-top-low: 0 -1px 4px 0 hsla(0, 0%, 0%, 0.14); | |
| --shadow-top-low-filter: drop-shadow(0 -1px 4px hsla(0, 0%, 0%, 0.14)); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment