Something went wrong. Try again.
LLM-ported KDE Breeze theme for Vencord
Something went wrong. Try again.
21 kB · 530 lines · Created 1mo ago CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530/* ============================================================ * KDE Breeze palette * ============================================================ */
:root { --breeze-accent: #3daee9; /* DecorationFocus / selection */ --breeze-accent-hover: #3daee9; --breeze-positive: #27ae60; --breeze-warning: #f67400; --breeze-negative: #da4453; --breeze-visited: #9b59b6;}
/* ============================================================ * DARK theme (Breeze Dark) * Covers all Discord dark variants: dark, darker, midnight, AMOLED. * ============================================================ */
.theme-dark,.visual-refresh .theme-dark,.theme-darker,.visual-refresh .theme-darker,.theme-midnight,.visual-refresh .theme-midnight,.visual-refresh.theme-dark,.visual-refresh.theme-darker,.visual-refresh.theme-midnight { /* --- Modern text variables --- */ --text-default: #fcfcfc; /* ForegroundNormal */ --text-muted: #a1a9b1; /* ForegroundInactive */ --text-subtle: #a1a9b1; --text-strong: #fcfcfc; --text-link: #1d99f3; /* ForegroundLink */ --text-brand: #3daee9; /* ForegroundActive */ --text-feedback-positive: #27ae60; --text-feedback-warning: #f67400; --text-feedback-critical: #da4453; --text-feedback-info: #1d99f3;
/* --- Modern background layers --- */ --background-base-lowest: #141618; /* View BackgroundNormal */ --background-base-lower: #292c30; /* Button BackgroundNormal */ --background-base-low: #202326; /* Window BackgroundNormal */ --background-surface-high: #202326; --background-surface-higher: #292c30; --background-surface-highest: #141618; --bg-surface-raised: #292c30; --background-gradient-highest: #292c30; --background-secondary-alt: #292c30; --background-accent: #3daee9; --card-background-default: #292c30; --chat-background: #202326; --chat-background-default: #202326; --chat-border: #141618; --chat-text-muted: #a1a9b1; --home-background: #202326; --app-frame-background: #202326; --__header-bar-background: #292c30 !important; --bg-overlay: #292c30; --bg-overlay-chat: #292c30; --titlebar-overlay-background: #292c30; --channel-members-bg: #202326; --custom-channel-members-bg: #202326; --custom-status-bubble-background: #292c30; --custom-status-bubble-background-color: #292c30;
/* --- Modern borders and modifiers --- */ --border-muted: #292c30; --border-normal: #141618; --border-strong: #292c30; --border-subtle: #202326; --background-mod-subtle: rgba(252, 252, 252, 0.05); --background-mod-normal: rgba(252, 252, 252, 0.1); --background-mod-strong: rgba(252, 252, 252, 0.16);
/* --- Modern brand (accent) scale, built around #3daee9 --- */ --brand-500: #3daee9; --brand-530: #338fc9; --brand-560: #2f80b4; --brand-600: #2a71a0; --brand-630: #23608a; --brand-660: #1d5073; --brand-05a: rgba(61, 174, 233, 0.05); --brand-10a: rgba(61, 174, 233, 0.1); --brand-15a: rgba(61, 174, 233, 0.15); --brand-25a: rgba(61, 174, 233, 0.25); --brand-30a: rgba(61, 174, 233, 0.3); --brand-45a: rgba(61, 174, 233, 0.45); --blurple-50: #3daee9; --blurple-60: #2f80b4; --opacity-blurple-8: rgba(61, 174, 233, 0.08); --opacity-blurple-16: rgba(61, 174, 233, 0.16); --opacity-blurple-24: rgba(61, 174, 233, 0.24); --opacity-blurple-32: rgba(61, 174, 233, 0.32); --opacity-blurple-60: rgba(61, 174, 233, 0.6);
/* --- Foreground on accent fills: white, per Breeze Selection --- */ --white: #fcfcfc; --white-500: #fcfcfc; --black-500: #fcfcfc;
/* --- Status / feedback --- */ --status-positive: #27ae60; --status-positive-background: #27ae60; --status-positive-text: #fcfcfc; --status-warning: #f67400; --status-warning-background: #f67400; --status-warning-text: #fcfcfc; --status-danger: #da4453; --status-danger-background: #da4453; --status-danger-text: #fcfcfc; --status-idle: #f67400; --badge-notification-background: #da4453; --background-feedback-notification: #da4453; --background-feedback-positive: rgba(39, 174, 96, 0.15); --background-feedback-warning: rgba(246, 116, 0, 0.15); --background-feedback-critical: rgba(218, 68, 83, 0.15); --background-feedback-info: rgba(61, 174, 233, 0.15); --icon-feedback-positive: #27ae60; --icon-feedback-warning: #f67400; --icon-feedback-critical: #da4453; --icon-feedback-info: #1d99f3; --message-reacted-background-default: rgba(61, 174, 233, 0.3); --message-reacted-text-default: #3daee9; --checkbox-icon-active: #fcfcfc; --checkbox-border-default: #a1a9b1; --radio-thumb-background-active: #fcfcfc; --green-360: #27ae60; --green-300: #27ae60; --yellow-360: #f67400; --yellow-300: #f67400; --red-400: #da4453; --red-500: #da4453; --red-430: #b03745; /* Selection ForegroundNegative */
/* --- Legacy variables --- */ --background-primary: #202326; /* Window */ --background-secondary: #292c30; /* Button / window alternate */ --background-secondary-alt: #292c30; --background-tertiary: #141618; /* View */ --background-floating: #292c30; /* Tooltip */ --background-elevated: #292c30; --background-nested-floating: #141618; --channeltextarea-background: #292c30; --activity-card-background: #292c30; --background-modifier-hover: rgba(252, 252, 252, 0.04); --background-modifier-active: rgba(252, 252, 252, 0.07); --background-modifier-selected: rgba(61, 174, 233, 0.15); --background-modifier-accent: rgba(252, 252, 252, 0.06); --text-normal: #fcfcfc; --text-muted: #a1a9b1; --text-link: #1d99f3; --text-positive: #27ae60; --text-warning: #f67400; --text-danger: #da4453; --header-primary: #fcfcfc; --header-secondary: #a1a9b1; --channels-default: #a1a9b1; --interactive-normal: #fcfcfc; --interactive-hover: #fcfcfc; --interactive-active: #fcfcfc; --interactive-muted: #a1a9b1; --mention-background: rgba(61, 174, 233, 0.15); --mention-foreground: #3daee9; --input-background: #141618; --scrollbar-thin-thumb: #292c30; --scrollbar-auto-thumb: #292c30; --scrollbar-auto-track: #202326; --tooltip-background: #292c30; --text-selection: #3daee9;
/* --- Dark variant scales (used by AMOLED / darker / midnight) --- */ --primary-100: #fcfcfc; --primary-200: #a1a9b1; --primary-300: #fcfcfc; --primary-400: #fcfcfc; --primary-500: #a1a9b1; --primary-600: #292c30; --primary-630: #292c30; --primary-645: #202326; --primary-660: #202326; --primary-700: #141618; --primary-730: #141618; --primary-800: #141618; --icon-tertiary: #a1a9b1; --icon-secondary: #fcfcfc; --icon-primary: #fcfcfc; --bg-base-primary: #202326; --bg-base-secondary: #292c30; --bg-base-tertiary: #141618; --control-secondary-background-default: #292c30; --channel-border: #141618;
/* --- Profile card (old and new variable sets) --- */ --profile-body-background-color: #202326; --profile-body-background-hover: #292c30; --profile-body-background-active: #292c30; --profile-body-border: #141618; --profile-note-background: #292c30; --profile-message-input-border: #292c30; --profile-gradient-primary-color: #202326; --profile-gradient-secondary-color: #292c30; --user-profile-overlay: #202326; --profile-overlay: #202326; --user-profile-overlay-background: #202326; --user-profile-overlay-background-hover: #292c30;
/* --- Missing functional groups (dark) --- */ --message-background-hover: rgba(252, 252, 252, 0.03); --message-highlight-background-default: rgba(61, 174, 233, 0.1); --message-highlight-background-hover: rgba(61, 174, 233, 0.16); --message-mentioned-background-default: rgba(61, 174, 233, 0.12); --message-mentioned-background-hover: rgba(61, 174, 233, 0.18); --message-automod-background-default: rgba(246, 116, 0, 0.1); --message-automod-background-hover: rgba(246, 116, 0, 0.16); --notice-background-info: #1d99f3; --notice-text-info: #fcfcfc; --notice-background-positive: #27ae60; --notice-text-positive: #fcfcfc; --notice-background-warning: #f67400; --notice-text-warning: #fcfcfc; --notice-background-critical: #da4453; --notice-text-critical: #fcfcfc; --modal-background: #292c30; --modal-footer-background: #202326; --interactive-background-hover: rgba(252, 252, 252, 0.05); --interactive-background-active: rgba(252, 252, 252, 0.08); --interactive-background-selected: rgba(61, 174, 233, 0.15); --interactive-icon-default: #a1a9b1; --interactive-icon-hover: #fcfcfc; --interactive-icon-active: #fcfcfc; --interactive-text-default: #fcfcfc; --interactive-text-hover: #fcfcfc; --interactive-text-active: #fcfcfc; --input-background-default: #141618; --input-border-default: #292c30; --input-text-default: #fcfcfc; --input-placeholder-text-default: #a1a9b1; --background-code: #292c30; --textbox-markdown-syntax: #a1a9b1; --spoiler-hidden-background: #141618; --spoiler-revealed-background: #292c30; --channel-icon: #a1a9b1; --logo-primary: #fcfcfc; --scrollbar-thin-track: #202326; --scrollbar-auto-track: #202326; --scrollbar-auto-scrollbar-color-thumb: #292c30; --scrollbar-auto-scrollbar-color-track: #202326; --text-status-online: #27ae60; --text-status-idle: #f67400; --text-status-dnd: #da4453; --text-status-offline: #a1a9b1; --icon-status-online: #27ae60; --icon-status-idle: #f67400; --icon-status-dnd: #da4453; --icon-status-offline: #a1a9b1; --icon-default: #a1a9b1; --icon-subtle: #a1a9b1; --icon-strong: #fcfcfc; --icon-muted: #a1a9b1; --control-brand-foreground: #3daee9; --control-brand-foreground-new: #3daee9; --control-primary-background-default: #3daee9; --control-primary-background-hover: #45b1ea; --control-primary-background-active: #338fc9; --button-outline-brand-border-active: #3daee9; --button-outline-brand-background-hover: rgba(61, 174, 233, 0.1); --badge-text-brand: #fcfcfc;}
/* ============================================================ * LIGHT theme (Breeze Light) * ============================================================ */
.theme-light,.visual-refresh .theme-light { /* --- Modern text variables --- */ --text-default: #232629; /* ForegroundNormal */ --text-muted: #707d8a; /* ForegroundInactive */ --text-subtle: #707d8a; --text-strong: #232629; --text-link: #2980b9; /* ForegroundLink */ --text-brand: #3daee9; /* ForegroundActive */ --text-feedback-positive: #27ae60; --text-feedback-warning: #f67400; --text-feedback-critical: #da4453; --text-feedback-info: #2980b9;
/* --- Modern background layers --- */ --background-base-lowest: #dee0e2; /* Header BackgroundNormal */ --background-base-lower: #e3e5e7; /* Window BackgroundAlternate */ --background-base-low: #eff0f1; /* Window BackgroundNormal */ --background-surface-high: #ffffff; /* View BackgroundNormal */ --background-surface-higher: #eff0f1; --background-surface-highest: #dee0e2; --bg-surface-raised: #fcfcfc; /* Button BackgroundNormal */ --background-gradient-highest: #eff0f1; --background-secondary-alt: #eff0f1; --background-accent: #3daee9; --card-background-default: #fcfcfc; --chat-background: #eff0f1; --chat-background-default: #eff0f1; --chat-border: #dee0e2; --chat-text-muted: #707d8a; --home-background: #eff0f1; --app-frame-background: #eff0f1; --__header-bar-background: #dee0e2; --channel-members-bg: #eff0f1; --custom-channel-members-bg: #eff0f1; --custom-status-bubble-background: #fcfcfc; --custom-status-bubble-background-color: #fcfcfc;
/* --- Modern borders and modifiers --- */ --border-muted: #e3e5e7; --border-normal: #dee0e2; --border-strong: #e3e5e7; --border-subtle: #ffffff; --background-mod-subtle: rgba(0, 0, 0, 0.04); --background-mod-normal: rgba(0, 0, 0, 0.08); --background-mod-strong: rgba(0, 0, 0, 0.12);
/* --- Modern brand scale, built around #3daee9 --- */ --brand-500: #3daee9; --brand-530: #338fc9; --brand-560: #2f80b4; --brand-600: #2a71a0; --brand-630: #23608a; --brand-660: #1d5073; --brand-05a: rgba(61, 174, 233, 0.05); --brand-10a: rgba(61, 174, 233, 0.1); --brand-15a: rgba(61, 174, 233, 0.15); --brand-25a: rgba(61, 174, 233, 0.25); --brand-30a: rgba(61, 174, 233, 0.3); --brand-45a: rgba(61, 174, 233, 0.45); --blurple-50: #3daee9; --blurple-60: #2f80b4; --opacity-blurple-8: rgba(61, 174, 233, 0.08); --opacity-blurple-16: rgba(61, 174, 233, 0.16); --opacity-blurple-24: rgba(61, 174, 233, 0.24); --opacity-blurple-32: rgba(61, 174, 233, 0.32); --opacity-blurple-60: rgba(61, 174, 233, 0.6);
/* --- Foreground on accent fills: white, per Breeze Selection --- */ --white: #fcfcfc; --white-500: #fcfcfc; --black-500: #232629;
/* --- Status / feedback --- */ --status-positive: #27ae60; --status-positive-background: #27ae60; --status-positive-text: #fcfcfc; --status-warning: #f67400; --status-warning-background: #f67400; --status-warning-text: #fcfcfc; --status-danger: #da4453; --status-danger-background: #da4453; --status-danger-text: #fcfcfc; --status-idle: #f67400; --badge-notification-background: #da4453; --background-feedback-notification: #da4453; --background-feedback-positive: rgba(39, 174, 96, 0.15); --background-feedback-warning: rgba(246, 116, 0, 0.15); --background-feedback-critical: rgba(218, 68, 83, 0.15); --background-feedback-info: rgba(61, 174, 233, 0.15); --icon-feedback-positive: #27ae60; --icon-feedback-warning: #f67400; --icon-feedback-critical: #da4453; --icon-feedback-info: #2980b9; --message-reacted-background-default: rgba(61, 174, 233, 0.3); --message-reacted-text-default: #2980b9; --checkbox-icon-active: #fcfcfc; --checkbox-border-default: #707d8a; --radio-thumb-background-active: #fcfcfc; --green-360: #27ae60; --green-300: #27ae60; --yellow-360: #f67400; --yellow-300: #f67400; --red-400: #da4453; --red-500: #da4453; --red-430: #b03745;
/* --- Legacy variables --- */ --background-primary: #eff0f1; /* Window */ --background-secondary: #e3e5e7; /* Window alternate */ --background-secondary-alt: #e3e5e7; --background-tertiary: #dee0e2; /* Header */ --background-floating: #fcfcfc; /* Button / view */ --background-elevated: #fcfcfc; --background-nested-floating: #f7f7f7; --channeltextarea-background: #fcfcfc; --activity-card-background: #fcfcfc; --background-modifier-hover: rgba(0, 0, 0, 0.04); --background-modifier-active: rgba(0, 0, 0, 0.07); --background-modifier-selected: rgba(61, 174, 233, 0.2); --background-modifier-accent: rgba(0, 0, 0, 0.06); --text-normal: #232629; --text-muted: #707d8a; --text-link: #2980b9; --text-positive: #27ae60; --text-warning: #f67400; --text-danger: #da4453; --header-primary: #232629; --header-secondary: #707d8a; --channels-default: #707d8a; --interactive-normal: #232629; --interactive-hover: #232629; --interactive-active: #232629; --interactive-muted: #707d8a; --mention-background: rgba(61, 174, 233, 0.2); --mention-foreground: #2980b9; --input-background: #fcfcfc; --scrollbar-thin-thumb: #e3e5e7; --scrollbar-auto-thumb: #e3e5e7; --scrollbar-auto-track: #eff0f1; --tooltip-background: #f7f7f7; --text-selection: #3daee9;
/* --- Profile card (old and new variable sets) --- */ --profile-body-background-color: #ffffff; --profile-body-background-hover: #eff0f1; --profile-body-background-active: #eff0f1; --profile-body-border: #dee0e2; --profile-note-background: #eff0f1; --profile-message-input-border: #dee0e2; --profile-gradient-primary-color: #ffffff; --profile-gradient-secondary-color: #eff0f1; --user-profile-overlay: #ffffff; --profile-overlay: #ffffff; --user-profile-overlay-background: #ffffff; --user-profile-overlay-background-hover: #eff0f1;
/* --- Missing functional groups (light) --- */ --message-background-hover: rgba(0, 0, 0, 0.03); --message-highlight-background-default: rgba(61, 174, 233, 0.1); --message-highlight-background-hover: rgba(61, 174, 233, 0.16); --message-mentioned-background-default: rgba(61, 174, 233, 0.12); --message-mentioned-background-hover: rgba(61, 174, 233, 0.18); --message-automod-background-default: rgba(246, 116, 0, 0.1); --message-automod-background-hover: rgba(246, 116, 0, 0.16); --notice-background-info: #2980b9; --notice-text-info: #fcfcfc; --notice-background-positive: #27ae60; --notice-text-positive: #fcfcfc; --notice-background-warning: #f67400; --notice-text-warning: #fcfcfc; --notice-background-critical: #da4453; --notice-text-critical: #fcfcfc; --modal-background: #fcfcfc; --modal-footer-background: #eff0f1; --interactive-background-hover: rgba(0, 0, 0, 0.04); --interactive-background-active: rgba(0, 0, 0, 0.07); --interactive-background-selected: rgba(61, 174, 233, 0.2); --interactive-icon-default: #707d8a; --interactive-icon-hover: #232629; --interactive-icon-active: #232629; --interactive-text-default: #232629; --interactive-text-hover: #232629; --interactive-text-active: #232629; --input-background-default: #ffffff; --input-border-default: #dee0e2; --input-text-default: #232629; --input-placeholder-text-default: #707d8a; --background-code: #eff0f1; --textbox-markdown-syntax: #707d8a; --spoiler-hidden-background: #dee0e2; --spoiler-revealed-background: #eff0f1; --channel-icon: #707d8a; --logo-primary: #232629; --scrollbar-thin-track: #eff0f1; --scrollbar-auto-track: #eff0f1; --scrollbar-auto-scrollbar-color-thumb: #bdc3c7; --scrollbar-auto-scrollbar-color-track: #eff0f1; --text-status-online: #1e8e4e; --text-status-idle: #f67400; --text-status-dnd: #da4453; --text-status-offline: #707d8a; --icon-status-online: #1e8e4e; --icon-status-idle: #f67400; --icon-status-dnd: #da4453; --icon-status-offline: #707d8a; --icon-default: #707d8a; --icon-subtle: #707d8a; --icon-strong: #232629; --icon-muted: #707d8a; --control-brand-foreground: #2980b9; --control-brand-foreground-new: #2980b9; --control-primary-background-default: #3daee9; --control-primary-background-hover: #45b1ea; --control-primary-background-active: #338fc9; --button-outline-brand-border-active: #2980b9; --button-outline-brand-background-hover: rgba(61, 174, 233, 0.1); --badge-text-brand: #fcfcfc;}
/* ============================================================ * Shared polish * ============================================================ */
/* Filled brand buttons: Breeze selection = accent with white text */.theme-dark button[class*="lookFilled_"][class*="colorBrand_"]:not(:has(> div > div[class*="buttonIcon_"])),.visual-refresh .theme-dark button[class*="lookFilled_"][class*="colorBrand_"]:not(:has(> div > div[class*="buttonIcon_"])),.theme-light button[class*="lookFilled_"][class*="colorBrand_"]:not(:has(> div > div[class*="buttonIcon_"])),.visual-refresh .theme-light button[class*="lookFilled_"][class*="colorBrand_"]:not(:has(> div > div[class*="buttonIcon_"])) { color: #fcfcfc !important;}
/* Unread pill: accent with white text */span[class^="unreadPill_"] { color: #fcfcfc;}
/* Title bar (visual refresh): force the Breeze button color */.visual-refresh div[class^="bar_"]:has(> [class^="trailing_"]),.visual-refresh .theme-dark div[class^="bar_"]:has(> [class^="trailing_"]) { background: var(--__header-bar-background, #292c30) !important;}
/* Vencord primary buttons follow the accent */button.vc-btn-primary { color: #fcfcfc !important; background-color: var(--breeze-accent) !important;}
/* Code blocks use the Breeze view background */.markup pre,.markup code,[class^="codeBlockText_"] pre,[class^="codeBlock_"] pre { background: var(--background-base-lower, var(--background-floating)) !important;}