use template from stylix
This commit is contained in:
parent
72b07f4f82
commit
67cd0ac4c1
306 changed files with 54774 additions and 17748 deletions
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #262427;
|
||||
--background-base-lowest: #262427 !important;
|
||||
--background-base-lower: #3b393c !important;
|
||||
--background-surface-high: #262427 !important;
|
||||
--chat-background: #262427;
|
||||
--home-background: #262427;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #3b393c !important;
|
||||
--background-surface-highest: #514f52 !important;
|
||||
--background-accent: #514f52 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #fcfcfc;
|
||||
--text-strong: #fcfcfc !important;
|
||||
--text-muted: #7c7b7d !important;
|
||||
--text-subtle: #676567;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #eae9eb !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #eae9eb;
|
||||
--control-brand-foreground: #eae9eb;
|
||||
--text-link: #49cae4 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #bcdf59;
|
||||
--status-warning: #ffca58;
|
||||
--status-danger: #ff7272;
|
||||
--icon-voice-muted: #ff7272;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #eae9eb;
|
||||
--scrollbar-auto-thumb: #eae9eb;
|
||||
:root {
|
||||
--base00: #262427; /* Black */
|
||||
--base01: #3b393c; /* Bright Black */
|
||||
--base02: #514f52; /* Grey */
|
||||
--base03: #676567; /* Brighter Grey */
|
||||
--base04: #7c7b7d; /* Bright Grey */
|
||||
--base05: #fcfcfc; /* White */
|
||||
--base06: #eae9eb; /* Brighter White */
|
||||
--base07: #fcfcfc; /* Bright White */
|
||||
--base08: #ff7272; /* Red */
|
||||
--base09: #fc9d6f; /* Orange */
|
||||
--base0A: #ffca58; /* Yellow */
|
||||
--base0B: #bcdf59; /* Green */
|
||||
--base0C: #aee8f4; /* Cyan */
|
||||
--base0D: #49cae4; /* Blue */
|
||||
--base0E: #a093e2; /* Purple */
|
||||
--base0F: #ff8787; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #262427 !important;
|
||||
background-color: #eae9eb !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #fcfcfc;
|
||||
background: #262427;
|
||||
}
|
||||
.hljs-keyword { color: #a093e2; }
|
||||
.hljs-string { color: #bcdf59; }
|
||||
.hljs-number { color: #fc9d6f; }
|
||||
.hljs-comment { color: #676567; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #090300;
|
||||
--background-base-lowest: #090300 !important;
|
||||
--background-base-lower: #3a3432 !important;
|
||||
--background-surface-high: #090300 !important;
|
||||
--chat-background: #090300;
|
||||
--home-background: #090300;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #3a3432 !important;
|
||||
--background-surface-highest: #4a4543 !important;
|
||||
--background-accent: #4a4543 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a5a2a2;
|
||||
--text-strong: #a5a2a2 !important;
|
||||
--text-muted: #807d7c !important;
|
||||
--text-subtle: #5c5855;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #d6d5d4 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #d6d5d4;
|
||||
--control-brand-foreground: #d6d5d4;
|
||||
--text-link: #01a0e4 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #01a252;
|
||||
--status-warning: #fded02;
|
||||
--status-danger: #db2d20;
|
||||
--icon-voice-muted: #db2d20;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #d6d5d4;
|
||||
--scrollbar-auto-thumb: #d6d5d4;
|
||||
:root {
|
||||
--base00: #090300; /* Black */
|
||||
--base01: #3a3432; /* Bright Black */
|
||||
--base02: #4a4543; /* Grey */
|
||||
--base03: #5c5855; /* Brighter Grey */
|
||||
--base04: #807d7c; /* Bright Grey */
|
||||
--base05: #a5a2a2; /* White */
|
||||
--base06: #d6d5d4; /* Brighter White */
|
||||
--base07: #f7f7f7; /* Bright White */
|
||||
--base08: #db2d20; /* Red */
|
||||
--base09: #e8bbd0; /* Orange */
|
||||
--base0A: #fded02; /* Yellow */
|
||||
--base0B: #01a252; /* Green */
|
||||
--base0C: #b5e4f4; /* Cyan */
|
||||
--base0D: #01a0e4; /* Blue */
|
||||
--base0E: #a16a94; /* Purple */
|
||||
--base0F: #cdab53; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #090300 !important;
|
||||
background-color: #d6d5d4 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a5a2a2;
|
||||
background: #090300;
|
||||
}
|
||||
.hljs-keyword { color: #a16a94; }
|
||||
.hljs-string { color: #01a252; }
|
||||
.hljs-number { color: #e8bbd0; }
|
||||
.hljs-comment { color: #5c5855; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #031a16;
|
||||
--background-base-lowest: #031a16 !important;
|
||||
--background-base-lower: #0b342d !important;
|
||||
--background-surface-high: #031a16 !important;
|
||||
--chat-background: #031a16;
|
||||
--home-background: #031a16;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #0b342d !important;
|
||||
--background-surface-highest: #184e45 !important;
|
||||
--background-accent: #184e45 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #81b5ac;
|
||||
--text-strong: #81b5ac !important;
|
||||
--text-muted: #5f9c92 !important;
|
||||
--text-subtle: #2b685e;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #a7cec8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #a7cec8;
|
||||
--control-brand-foreground: #a7cec8;
|
||||
--text-link: #96883e !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #883e96;
|
||||
--status-warning: #3e4c96;
|
||||
--status-danger: #3e9688;
|
||||
--icon-voice-muted: #3e9688;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #a7cec8;
|
||||
--scrollbar-auto-thumb: #a7cec8;
|
||||
:root {
|
||||
--base00: #031a16; /* Black */
|
||||
--base01: #0b342d; /* Bright Black */
|
||||
--base02: #184e45; /* Grey */
|
||||
--base03: #2b685e; /* Brighter Grey */
|
||||
--base04: #5f9c92; /* Bright Grey */
|
||||
--base05: #81b5ac; /* White */
|
||||
--base06: #a7cec8; /* Brighter White */
|
||||
--base07: #d2e7e4; /* Bright White */
|
||||
--base08: #3e9688; /* Red */
|
||||
--base09: #3e7996; /* Orange */
|
||||
--base0A: #3e4c96; /* Yellow */
|
||||
--base0B: #883e96; /* Green */
|
||||
--base0C: #963e4c; /* Cyan */
|
||||
--base0D: #96883e; /* Blue */
|
||||
--base0E: #4c963e; /* Purple */
|
||||
--base0F: #3e965b; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #031a16 !important;
|
||||
background-color: #a7cec8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #81b5ac;
|
||||
background: #031a16;
|
||||
}
|
||||
.hljs-keyword { color: #4c963e; }
|
||||
.hljs-string { color: #883e96; }
|
||||
.hljs-number { color: #3e7996; }
|
||||
.hljs-comment { color: #2b685e; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #262626;
|
||||
--background-base-lowest: #262626 !important;
|
||||
--background-base-lower: #af5f5f !important;
|
||||
--background-surface-high: #262626 !important;
|
||||
--chat-background: #262626;
|
||||
--home-background: #262626;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #af5f5f !important;
|
||||
--background-surface-highest: #5f875f !important;
|
||||
--background-accent: #5f875f !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5f5f87;
|
||||
--text-strong: #5f5f87 !important;
|
||||
--text-muted: #5f87af !important;
|
||||
--text-subtle: #87875f;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #5f8787 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #5f8787;
|
||||
--control-brand-foreground: #5f8787;
|
||||
--text-link: #8787af !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #ffffaf;
|
||||
--status-warning: #87af87;
|
||||
--status-danger: #444444;
|
||||
--icon-voice-muted: #444444;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #5f8787;
|
||||
--scrollbar-auto-thumb: #5f8787;
|
||||
:root {
|
||||
--base00: #262626; /* Black */
|
||||
--base01: #af5f5f; /* Bright Black */
|
||||
--base02: #5f875f; /* Grey */
|
||||
--base03: #87875f; /* Brighter Grey */
|
||||
--base04: #5f87af; /* Bright Grey */
|
||||
--base05: #5f5f87; /* White */
|
||||
--base06: #5f8787; /* Brighter White */
|
||||
--base07: #6c6c6c; /* Bright White */
|
||||
--base08: #444444; /* Red */
|
||||
--base09: #ff8700; /* Orange */
|
||||
--base0A: #87af87; /* Yellow */
|
||||
--base0B: #ffffaf; /* Green */
|
||||
--base0C: #87afd7; /* Cyan */
|
||||
--base0D: #8787af; /* Blue */
|
||||
--base0E: #5fafaf; /* Purple */
|
||||
--base0F: #bcbcbc; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #262626 !important;
|
||||
background-color: #5f8787 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5f5f87;
|
||||
background: #262626;
|
||||
}
|
||||
.hljs-keyword { color: #5fafaf; }
|
||||
.hljs-string { color: #ffffaf; }
|
||||
.hljs-number { color: #ff8700; }
|
||||
.hljs-comment { color: #87875f; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #282828;
|
||||
--background-base-lowest: #282828 !important;
|
||||
--background-base-lower: #212f3d !important;
|
||||
--background-surface-high: #282828 !important;
|
||||
--chat-background: #282828;
|
||||
--home-background: #282828;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #212f3d !important;
|
||||
--background-surface-highest: #504945 !important;
|
||||
--background-accent: #504945 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d5c7a1;
|
||||
--text-strong: #d5c7a1 !important;
|
||||
--text-muted: #bdae93 !important;
|
||||
--text-subtle: #928374;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ebdbb2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ebdbb2;
|
||||
--control-brand-foreground: #ebdbb2;
|
||||
--text-link: #458588 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #b8bb26;
|
||||
--status-warning: #ffcc1b;
|
||||
--status-danger: #d05000;
|
||||
--icon-voice-muted: #d05000;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ebdbb2;
|
||||
--scrollbar-auto-thumb: #ebdbb2;
|
||||
:root {
|
||||
--base00: #282828; /* Black */
|
||||
--base01: #212f3d; /* Bright Black */
|
||||
--base02: #504945; /* Grey */
|
||||
--base03: #928374; /* Brighter Grey */
|
||||
--base04: #bdae93; /* Bright Grey */
|
||||
--base05: #d5c7a1; /* White */
|
||||
--base06: #ebdbb2; /* Brighter White */
|
||||
--base07: #fbf1c7; /* Bright White */
|
||||
--base08: #d05000; /* Red */
|
||||
--base09: #fe8019; /* Orange */
|
||||
--base0A: #ffcc1b; /* Yellow */
|
||||
--base0B: #b8bb26; /* Green */
|
||||
--base0C: #8f3f71; /* Cyan */
|
||||
--base0D: #458588; /* Blue */
|
||||
--base0E: #fabd2f; /* Purple */
|
||||
--base0F: #b59b4d; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #282828 !important;
|
||||
background-color: #ebdbb2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d5c7a1;
|
||||
background: #282828;
|
||||
}
|
||||
.hljs-keyword { color: #fabd2f; }
|
||||
.hljs-string { color: #b8bb26; }
|
||||
.hljs-number { color: #fe8019; }
|
||||
.hljs-comment { color: #928374; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1c2023;
|
||||
--background-base-lowest: #1c2023 !important;
|
||||
--background-base-lower: #393f45 !important;
|
||||
--background-surface-high: #1c2023 !important;
|
||||
--chat-background: #1c2023;
|
||||
--home-background: #1c2023;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #393f45 !important;
|
||||
--background-surface-highest: #565e65 !important;
|
||||
--background-accent: #565e65 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c7ccd1;
|
||||
--text-strong: #c7ccd1 !important;
|
||||
--text-muted: #adb3ba !important;
|
||||
--text-subtle: #747c84;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dfe2e5 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dfe2e5;
|
||||
--control-brand-foreground: #dfe2e5;
|
||||
--text-link: #ae95c7 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #95c7ae;
|
||||
--status-warning: #aec795;
|
||||
--status-danger: #c7ae95;
|
||||
--icon-voice-muted: #c7ae95;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dfe2e5;
|
||||
--scrollbar-auto-thumb: #dfe2e5;
|
||||
:root {
|
||||
--base00: #1c2023; /* Black */
|
||||
--base01: #393f45; /* Bright Black */
|
||||
--base02: #565e65; /* Grey */
|
||||
--base03: #747c84; /* Brighter Grey */
|
||||
--base04: #adb3ba; /* Bright Grey */
|
||||
--base05: #c7ccd1; /* White */
|
||||
--base06: #dfe2e5; /* Brighter White */
|
||||
--base07: #f3f4f5; /* Bright White */
|
||||
--base08: #c7ae95; /* Red */
|
||||
--base09: #c7c795; /* Orange */
|
||||
--base0A: #aec795; /* Yellow */
|
||||
--base0B: #95c7ae; /* Green */
|
||||
--base0C: #95aec7; /* Cyan */
|
||||
--base0D: #ae95c7; /* Blue */
|
||||
--base0E: #c795ae; /* Purple */
|
||||
--base0F: #c79595; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1c2023 !important;
|
||||
background-color: #dfe2e5 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c7ccd1;
|
||||
background: #1c2023;
|
||||
}
|
||||
.hljs-keyword { color: #c795ae; }
|
||||
.hljs-string { color: #95c7ae; }
|
||||
.hljs-number { color: #c7c795; }
|
||||
.hljs-comment { color: #747c84; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #19171c;
|
||||
--background-base-lowest: #19171c !important;
|
||||
--background-base-lower: #26232a !important;
|
||||
--background-surface-high: #19171c !important;
|
||||
--chat-background: #19171c;
|
||||
--home-background: #19171c;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #26232a !important;
|
||||
--background-surface-highest: #585260 !important;
|
||||
--background-accent: #585260 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #8b8792;
|
||||
--text-strong: #8b8792 !important;
|
||||
--text-muted: #7e7887 !important;
|
||||
--text-subtle: #655f6d;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e2dfe7 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e2dfe7;
|
||||
--control-brand-foreground: #e2dfe7;
|
||||
--text-link: #576ddb !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #2a9292;
|
||||
--status-warning: #a06e3b;
|
||||
--status-danger: #be4678;
|
||||
--icon-voice-muted: #be4678;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e2dfe7;
|
||||
--scrollbar-auto-thumb: #e2dfe7;
|
||||
:root {
|
||||
--base00: #19171c; /* Black */
|
||||
--base01: #26232a; /* Bright Black */
|
||||
--base02: #585260; /* Grey */
|
||||
--base03: #655f6d; /* Brighter Grey */
|
||||
--base04: #7e7887; /* Bright Grey */
|
||||
--base05: #8b8792; /* White */
|
||||
--base06: #e2dfe7; /* Brighter White */
|
||||
--base07: #efecf4; /* Bright White */
|
||||
--base08: #be4678; /* Red */
|
||||
--base09: #aa573c; /* Orange */
|
||||
--base0A: #a06e3b; /* Yellow */
|
||||
--base0B: #2a9292; /* Green */
|
||||
--base0C: #398bc6; /* Cyan */
|
||||
--base0D: #576ddb; /* Blue */
|
||||
--base0E: #955ae7; /* Purple */
|
||||
--base0F: #bf40bf; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #19171c !important;
|
||||
background-color: #e2dfe7 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #8b8792;
|
||||
background: #19171c;
|
||||
}
|
||||
.hljs-keyword { color: #955ae7; }
|
||||
.hljs-string { color: #2a9292; }
|
||||
.hljs-number { color: #aa573c; }
|
||||
.hljs-comment { color: #655f6d; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #efecf4;
|
||||
--background-base-lowest: #efecf4 !important;
|
||||
--background-base-lower: #e2dfe7 !important;
|
||||
--background-surface-high: #efecf4 !important;
|
||||
--chat-background: #efecf4;
|
||||
--home-background: #efecf4;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e2dfe7 !important;
|
||||
--background-surface-highest: #8b8792 !important;
|
||||
--background-accent: #8b8792 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #585260;
|
||||
--text-strong: #585260 !important;
|
||||
--text-muted: #655f6d !important;
|
||||
--text-subtle: #7e7887;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #26232a !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #26232a;
|
||||
--control-brand-foreground: #26232a;
|
||||
--text-link: #576ddb !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #2a9292;
|
||||
--status-warning: #a06e3b;
|
||||
--status-danger: #be4678;
|
||||
--icon-voice-muted: #be4678;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #26232a;
|
||||
--scrollbar-auto-thumb: #26232a;
|
||||
:root {
|
||||
--base00: #efecf4; /* Black */
|
||||
--base01: #e2dfe7; /* Bright Black */
|
||||
--base02: #8b8792; /* Grey */
|
||||
--base03: #7e7887; /* Brighter Grey */
|
||||
--base04: #655f6d; /* Bright Grey */
|
||||
--base05: #585260; /* White */
|
||||
--base06: #26232a; /* Brighter White */
|
||||
--base07: #19171c; /* Bright White */
|
||||
--base08: #be4678; /* Red */
|
||||
--base09: #aa573c; /* Orange */
|
||||
--base0A: #a06e3b; /* Yellow */
|
||||
--base0B: #2a9292; /* Green */
|
||||
--base0C: #398bc6; /* Cyan */
|
||||
--base0D: #576ddb; /* Blue */
|
||||
--base0E: #955ae7; /* Purple */
|
||||
--base0F: #bf40bf; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #efecf4 !important;
|
||||
background-color: #26232a !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #585260;
|
||||
background: #efecf4;
|
||||
}
|
||||
.hljs-keyword { color: #955ae7; }
|
||||
.hljs-string { color: #2a9292; }
|
||||
.hljs-number { color: #aa573c; }
|
||||
.hljs-comment { color: #7e7887; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #20201d;
|
||||
--background-base-lowest: #20201d !important;
|
||||
--background-base-lower: #292824 !important;
|
||||
--background-surface-high: #20201d !important;
|
||||
--chat-background: #20201d;
|
||||
--home-background: #20201d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #292824 !important;
|
||||
--background-surface-highest: #6e6b5e !important;
|
||||
--background-accent: #6e6b5e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a6a28c;
|
||||
--text-strong: #a6a28c !important;
|
||||
--text-muted: #999580 !important;
|
||||
--text-subtle: #7d7a68;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e8e4cf !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e8e4cf;
|
||||
--control-brand-foreground: #e8e4cf;
|
||||
--text-link: #6684e1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #60ac39;
|
||||
--status-warning: #ae9513;
|
||||
--status-danger: #d73737;
|
||||
--icon-voice-muted: #d73737;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e8e4cf;
|
||||
--scrollbar-auto-thumb: #e8e4cf;
|
||||
:root {
|
||||
--base00: #20201d; /* Black */
|
||||
--base01: #292824; /* Bright Black */
|
||||
--base02: #6e6b5e; /* Grey */
|
||||
--base03: #7d7a68; /* Brighter Grey */
|
||||
--base04: #999580; /* Bright Grey */
|
||||
--base05: #a6a28c; /* White */
|
||||
--base06: #e8e4cf; /* Brighter White */
|
||||
--base07: #fefbec; /* Bright White */
|
||||
--base08: #d73737; /* Red */
|
||||
--base09: #b65611; /* Orange */
|
||||
--base0A: #ae9513; /* Yellow */
|
||||
--base0B: #60ac39; /* Green */
|
||||
--base0C: #1fad83; /* Cyan */
|
||||
--base0D: #6684e1; /* Blue */
|
||||
--base0E: #b854d4; /* Purple */
|
||||
--base0F: #d43552; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #20201d !important;
|
||||
background-color: #e8e4cf !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a6a28c;
|
||||
background: #20201d;
|
||||
}
|
||||
.hljs-keyword { color: #b854d4; }
|
||||
.hljs-string { color: #60ac39; }
|
||||
.hljs-number { color: #b65611; }
|
||||
.hljs-comment { color: #7d7a68; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #fefbec;
|
||||
--background-base-lowest: #fefbec !important;
|
||||
--background-base-lower: #e8e4cf !important;
|
||||
--background-surface-high: #fefbec !important;
|
||||
--chat-background: #fefbec;
|
||||
--home-background: #fefbec;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e8e4cf !important;
|
||||
--background-surface-highest: #a6a28c !important;
|
||||
--background-accent: #a6a28c !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #6e6b5e;
|
||||
--text-strong: #6e6b5e !important;
|
||||
--text-muted: #7d7a68 !important;
|
||||
--text-subtle: #999580;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #292824 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #292824;
|
||||
--control-brand-foreground: #292824;
|
||||
--text-link: #6684e1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #60ac39;
|
||||
--status-warning: #ae9513;
|
||||
--status-danger: #d73737;
|
||||
--icon-voice-muted: #d73737;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #292824;
|
||||
--scrollbar-auto-thumb: #292824;
|
||||
:root {
|
||||
--base00: #fefbec; /* Black */
|
||||
--base01: #e8e4cf; /* Bright Black */
|
||||
--base02: #a6a28c; /* Grey */
|
||||
--base03: #999580; /* Brighter Grey */
|
||||
--base04: #7d7a68; /* Bright Grey */
|
||||
--base05: #6e6b5e; /* White */
|
||||
--base06: #292824; /* Brighter White */
|
||||
--base07: #20201d; /* Bright White */
|
||||
--base08: #d73737; /* Red */
|
||||
--base09: #b65611; /* Orange */
|
||||
--base0A: #ae9513; /* Yellow */
|
||||
--base0B: #60ac39; /* Green */
|
||||
--base0C: #1fad83; /* Cyan */
|
||||
--base0D: #6684e1; /* Blue */
|
||||
--base0E: #b854d4; /* Purple */
|
||||
--base0F: #d43552; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #fefbec !important;
|
||||
background-color: #292824 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #6e6b5e;
|
||||
background: #fefbec;
|
||||
}
|
||||
.hljs-keyword { color: #b854d4; }
|
||||
.hljs-string { color: #60ac39; }
|
||||
.hljs-number { color: #b65611; }
|
||||
.hljs-comment { color: #999580; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #22221b;
|
||||
--background-base-lowest: #22221b !important;
|
||||
--background-base-lower: #302f27 !important;
|
||||
--background-surface-high: #22221b !important;
|
||||
--chat-background: #22221b;
|
||||
--home-background: #22221b;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #302f27 !important;
|
||||
--background-surface-highest: #5f5e4e !important;
|
||||
--background-accent: #5f5e4e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #929181;
|
||||
--text-strong: #929181 !important;
|
||||
--text-muted: #878573 !important;
|
||||
--text-subtle: #6c6b5a;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e7e6df !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e7e6df;
|
||||
--control-brand-foreground: #e7e6df;
|
||||
--text-link: #36a166 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7d9726;
|
||||
--status-warning: #a5980d;
|
||||
--status-danger: #ba6236;
|
||||
--icon-voice-muted: #ba6236;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e7e6df;
|
||||
--scrollbar-auto-thumb: #e7e6df;
|
||||
:root {
|
||||
--base00: #22221b; /* Black */
|
||||
--base01: #302f27; /* Bright Black */
|
||||
--base02: #5f5e4e; /* Grey */
|
||||
--base03: #6c6b5a; /* Brighter Grey */
|
||||
--base04: #878573; /* Bright Grey */
|
||||
--base05: #929181; /* White */
|
||||
--base06: #e7e6df; /* Brighter White */
|
||||
--base07: #f4f3ec; /* Bright White */
|
||||
--base08: #ba6236; /* Red */
|
||||
--base09: #ae7313; /* Orange */
|
||||
--base0A: #a5980d; /* Yellow */
|
||||
--base0B: #7d9726; /* Green */
|
||||
--base0C: #5b9d48; /* Cyan */
|
||||
--base0D: #36a166; /* Blue */
|
||||
--base0E: #5f9182; /* Purple */
|
||||
--base0F: #9d6c7c; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #22221b !important;
|
||||
background-color: #e7e6df !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #929181;
|
||||
background: #22221b;
|
||||
}
|
||||
.hljs-keyword { color: #5f9182; }
|
||||
.hljs-string { color: #7d9726; }
|
||||
.hljs-number { color: #ae7313; }
|
||||
.hljs-comment { color: #6c6b5a; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f4f3ec;
|
||||
--background-base-lowest: #f4f3ec !important;
|
||||
--background-base-lower: #e7e6df !important;
|
||||
--background-surface-high: #f4f3ec !important;
|
||||
--chat-background: #f4f3ec;
|
||||
--home-background: #f4f3ec;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e7e6df !important;
|
||||
--background-surface-highest: #929181 !important;
|
||||
--background-accent: #929181 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5f5e4e;
|
||||
--text-strong: #5f5e4e !important;
|
||||
--text-muted: #6c6b5a !important;
|
||||
--text-subtle: #878573;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #302f27 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #302f27;
|
||||
--control-brand-foreground: #302f27;
|
||||
--text-link: #36a166 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7d9726;
|
||||
--status-warning: #a5980d;
|
||||
--status-danger: #ba6236;
|
||||
--icon-voice-muted: #ba6236;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #302f27;
|
||||
--scrollbar-auto-thumb: #302f27;
|
||||
:root {
|
||||
--base00: #f4f3ec; /* Black */
|
||||
--base01: #e7e6df; /* Bright Black */
|
||||
--base02: #929181; /* Grey */
|
||||
--base03: #878573; /* Brighter Grey */
|
||||
--base04: #6c6b5a; /* Bright Grey */
|
||||
--base05: #5f5e4e; /* White */
|
||||
--base06: #302f27; /* Brighter White */
|
||||
--base07: #22221b; /* Bright White */
|
||||
--base08: #ba6236; /* Red */
|
||||
--base09: #ae7313; /* Orange */
|
||||
--base0A: #a5980d; /* Yellow */
|
||||
--base0B: #7d9726; /* Green */
|
||||
--base0C: #5b9d48; /* Cyan */
|
||||
--base0D: #36a166; /* Blue */
|
||||
--base0E: #5f9182; /* Purple */
|
||||
--base0F: #9d6c7c; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f4f3ec !important;
|
||||
background-color: #302f27 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5f5e4e;
|
||||
background: #f4f3ec;
|
||||
}
|
||||
.hljs-keyword { color: #5f9182; }
|
||||
.hljs-string { color: #7d9726; }
|
||||
.hljs-number { color: #ae7313; }
|
||||
.hljs-comment { color: #878573; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1b1918;
|
||||
--background-base-lowest: #1b1918 !important;
|
||||
--background-base-lower: #2c2421 !important;
|
||||
--background-surface-high: #1b1918 !important;
|
||||
--chat-background: #1b1918;
|
||||
--home-background: #1b1918;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #2c2421 !important;
|
||||
--background-surface-highest: #68615e !important;
|
||||
--background-accent: #68615e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a8a19f;
|
||||
--text-strong: #a8a19f !important;
|
||||
--text-muted: #9c9491 !important;
|
||||
--text-subtle: #766e6b;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e6e2e0 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e6e2e0;
|
||||
--control-brand-foreground: #e6e2e0;
|
||||
--text-link: #407ee7 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7b9726;
|
||||
--status-warning: #c38418;
|
||||
--status-danger: #f22c40;
|
||||
--icon-voice-muted: #f22c40;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e6e2e0;
|
||||
--scrollbar-auto-thumb: #e6e2e0;
|
||||
:root {
|
||||
--base00: #1b1918; /* Black */
|
||||
--base01: #2c2421; /* Bright Black */
|
||||
--base02: #68615e; /* Grey */
|
||||
--base03: #766e6b; /* Brighter Grey */
|
||||
--base04: #9c9491; /* Bright Grey */
|
||||
--base05: #a8a19f; /* White */
|
||||
--base06: #e6e2e0; /* Brighter White */
|
||||
--base07: #f1efee; /* Bright White */
|
||||
--base08: #f22c40; /* Red */
|
||||
--base09: #df5320; /* Orange */
|
||||
--base0A: #c38418; /* Yellow */
|
||||
--base0B: #7b9726; /* Green */
|
||||
--base0C: #3d97b8; /* Cyan */
|
||||
--base0D: #407ee7; /* Blue */
|
||||
--base0E: #6666ea; /* Purple */
|
||||
--base0F: #c33ff3; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1b1918 !important;
|
||||
background-color: #e6e2e0 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a8a19f;
|
||||
background: #1b1918;
|
||||
}
|
||||
.hljs-keyword { color: #6666ea; }
|
||||
.hljs-string { color: #7b9726; }
|
||||
.hljs-number { color: #df5320; }
|
||||
.hljs-comment { color: #766e6b; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f1efee;
|
||||
--background-base-lowest: #f1efee !important;
|
||||
--background-base-lower: #e6e2e0 !important;
|
||||
--background-surface-high: #f1efee !important;
|
||||
--chat-background: #f1efee;
|
||||
--home-background: #f1efee;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e6e2e0 !important;
|
||||
--background-surface-highest: #a8a19f !important;
|
||||
--background-accent: #a8a19f !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #68615e;
|
||||
--text-strong: #68615e !important;
|
||||
--text-muted: #766e6b !important;
|
||||
--text-subtle: #9c9491;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #2c2421 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #2c2421;
|
||||
--control-brand-foreground: #2c2421;
|
||||
--text-link: #407ee7 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7b9726;
|
||||
--status-warning: #c38418;
|
||||
--status-danger: #f22c40;
|
||||
--icon-voice-muted: #f22c40;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #2c2421;
|
||||
--scrollbar-auto-thumb: #2c2421;
|
||||
:root {
|
||||
--base00: #f1efee; /* Black */
|
||||
--base01: #e6e2e0; /* Bright Black */
|
||||
--base02: #a8a19f; /* Grey */
|
||||
--base03: #9c9491; /* Brighter Grey */
|
||||
--base04: #766e6b; /* Bright Grey */
|
||||
--base05: #68615e; /* White */
|
||||
--base06: #2c2421; /* Brighter White */
|
||||
--base07: #1b1918; /* Bright White */
|
||||
--base08: #f22c40; /* Red */
|
||||
--base09: #df5320; /* Orange */
|
||||
--base0A: #c38418; /* Yellow */
|
||||
--base0B: #7b9726; /* Green */
|
||||
--base0C: #3d97b8; /* Cyan */
|
||||
--base0D: #407ee7; /* Blue */
|
||||
--base0E: #6666ea; /* Purple */
|
||||
--base0F: #c33ff3; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f1efee !important;
|
||||
background-color: #2c2421 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #68615e;
|
||||
background: #f1efee;
|
||||
}
|
||||
.hljs-keyword { color: #6666ea; }
|
||||
.hljs-string { color: #7b9726; }
|
||||
.hljs-number { color: #df5320; }
|
||||
.hljs-comment { color: #9c9491; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1b181b;
|
||||
--background-base-lowest: #1b181b !important;
|
||||
--background-base-lower: #292329 !important;
|
||||
--background-surface-high: #1b181b !important;
|
||||
--chat-background: #1b181b;
|
||||
--home-background: #1b181b;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #292329 !important;
|
||||
--background-surface-highest: #695d69 !important;
|
||||
--background-accent: #695d69 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ab9bab;
|
||||
--text-strong: #ab9bab !important;
|
||||
--text-muted: #9e8f9e !important;
|
||||
--text-subtle: #776977;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #d8cad8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #d8cad8;
|
||||
--control-brand-foreground: #d8cad8;
|
||||
--text-link: #516aec !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #918b3b;
|
||||
--status-warning: #bb8a35;
|
||||
--status-danger: #ca402b;
|
||||
--icon-voice-muted: #ca402b;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #d8cad8;
|
||||
--scrollbar-auto-thumb: #d8cad8;
|
||||
:root {
|
||||
--base00: #1b181b; /* Black */
|
||||
--base01: #292329; /* Bright Black */
|
||||
--base02: #695d69; /* Grey */
|
||||
--base03: #776977; /* Brighter Grey */
|
||||
--base04: #9e8f9e; /* Bright Grey */
|
||||
--base05: #ab9bab; /* White */
|
||||
--base06: #d8cad8; /* Brighter White */
|
||||
--base07: #f7f3f7; /* Bright White */
|
||||
--base08: #ca402b; /* Red */
|
||||
--base09: #a65926; /* Orange */
|
||||
--base0A: #bb8a35; /* Yellow */
|
||||
--base0B: #918b3b; /* Green */
|
||||
--base0C: #159393; /* Cyan */
|
||||
--base0D: #516aec; /* Blue */
|
||||
--base0E: #7b59c0; /* Purple */
|
||||
--base0F: #cc33cc; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1b181b !important;
|
||||
background-color: #d8cad8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ab9bab;
|
||||
background: #1b181b;
|
||||
}
|
||||
.hljs-keyword { color: #7b59c0; }
|
||||
.hljs-string { color: #918b3b; }
|
||||
.hljs-number { color: #a65926; }
|
||||
.hljs-comment { color: #776977; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f7f3f7;
|
||||
--background-base-lowest: #f7f3f7 !important;
|
||||
--background-base-lower: #d8cad8 !important;
|
||||
--background-surface-high: #f7f3f7 !important;
|
||||
--chat-background: #f7f3f7;
|
||||
--home-background: #f7f3f7;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #d8cad8 !important;
|
||||
--background-surface-highest: #ab9bab !important;
|
||||
--background-accent: #ab9bab !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #695d69;
|
||||
--text-strong: #695d69 !important;
|
||||
--text-muted: #776977 !important;
|
||||
--text-subtle: #9e8f9e;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #292329 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #292329;
|
||||
--control-brand-foreground: #292329;
|
||||
--text-link: #516aec !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #918b3b;
|
||||
--status-warning: #bb8a35;
|
||||
--status-danger: #ca402b;
|
||||
--icon-voice-muted: #ca402b;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #292329;
|
||||
--scrollbar-auto-thumb: #292329;
|
||||
:root {
|
||||
--base00: #f7f3f7; /* Black */
|
||||
--base01: #d8cad8; /* Bright Black */
|
||||
--base02: #ab9bab; /* Grey */
|
||||
--base03: #9e8f9e; /* Brighter Grey */
|
||||
--base04: #776977; /* Bright Grey */
|
||||
--base05: #695d69; /* White */
|
||||
--base06: #292329; /* Brighter White */
|
||||
--base07: #1b181b; /* Bright White */
|
||||
--base08: #ca402b; /* Red */
|
||||
--base09: #a65926; /* Orange */
|
||||
--base0A: #bb8a35; /* Yellow */
|
||||
--base0B: #918b3b; /* Green */
|
||||
--base0C: #159393; /* Cyan */
|
||||
--base0D: #516aec; /* Blue */
|
||||
--base0E: #7b59c0; /* Purple */
|
||||
--base0F: #cc33cc; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f7f3f7 !important;
|
||||
background-color: #292329 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #695d69;
|
||||
background: #f7f3f7;
|
||||
}
|
||||
.hljs-keyword { color: #7b59c0; }
|
||||
.hljs-string { color: #918b3b; }
|
||||
.hljs-number { color: #a65926; }
|
||||
.hljs-comment { color: #9e8f9e; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #161b1d;
|
||||
--background-base-lowest: #161b1d !important;
|
||||
--background-base-lower: #1f292e !important;
|
||||
--background-surface-high: #161b1d !important;
|
||||
--chat-background: #161b1d;
|
||||
--home-background: #161b1d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #1f292e !important;
|
||||
--background-surface-highest: #516d7b !important;
|
||||
--background-accent: #516d7b !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #7ea2b4;
|
||||
--text-strong: #7ea2b4 !important;
|
||||
--text-muted: #7195a8 !important;
|
||||
--text-subtle: #5a7b8c;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #c1e4f6 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #c1e4f6;
|
||||
--control-brand-foreground: #c1e4f6;
|
||||
--text-link: #257fad !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #568c3b;
|
||||
--status-warning: #8a8a0f;
|
||||
--status-danger: #d22d72;
|
||||
--icon-voice-muted: #d22d72;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #c1e4f6;
|
||||
--scrollbar-auto-thumb: #c1e4f6;
|
||||
:root {
|
||||
--base00: #161b1d; /* Black */
|
||||
--base01: #1f292e; /* Bright Black */
|
||||
--base02: #516d7b; /* Grey */
|
||||
--base03: #5a7b8c; /* Brighter Grey */
|
||||
--base04: #7195a8; /* Bright Grey */
|
||||
--base05: #7ea2b4; /* White */
|
||||
--base06: #c1e4f6; /* Brighter White */
|
||||
--base07: #ebf8ff; /* Bright White */
|
||||
--base08: #d22d72; /* Red */
|
||||
--base09: #935c25; /* Orange */
|
||||
--base0A: #8a8a0f; /* Yellow */
|
||||
--base0B: #568c3b; /* Green */
|
||||
--base0C: #2d8f6f; /* Cyan */
|
||||
--base0D: #257fad; /* Blue */
|
||||
--base0E: #6b6bb8; /* Purple */
|
||||
--base0F: #b72dd2; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #161b1d !important;
|
||||
background-color: #c1e4f6 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #7ea2b4;
|
||||
background: #161b1d;
|
||||
}
|
||||
.hljs-keyword { color: #6b6bb8; }
|
||||
.hljs-string { color: #568c3b; }
|
||||
.hljs-number { color: #935c25; }
|
||||
.hljs-comment { color: #5a7b8c; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #ebf8ff;
|
||||
--background-base-lowest: #ebf8ff !important;
|
||||
--background-base-lower: #c1e4f6 !important;
|
||||
--background-surface-high: #ebf8ff !important;
|
||||
--chat-background: #ebf8ff;
|
||||
--home-background: #ebf8ff;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #c1e4f6 !important;
|
||||
--background-surface-highest: #7ea2b4 !important;
|
||||
--background-accent: #7ea2b4 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #516d7b;
|
||||
--text-strong: #516d7b !important;
|
||||
--text-muted: #5a7b8c !important;
|
||||
--text-subtle: #7195a8;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #1f292e !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #1f292e;
|
||||
--control-brand-foreground: #1f292e;
|
||||
--text-link: #257fad !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #568c3b;
|
||||
--status-warning: #8a8a0f;
|
||||
--status-danger: #d22d72;
|
||||
--icon-voice-muted: #d22d72;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #1f292e;
|
||||
--scrollbar-auto-thumb: #1f292e;
|
||||
:root {
|
||||
--base00: #ebf8ff; /* Black */
|
||||
--base01: #c1e4f6; /* Bright Black */
|
||||
--base02: #7ea2b4; /* Grey */
|
||||
--base03: #7195a8; /* Brighter Grey */
|
||||
--base04: #5a7b8c; /* Bright Grey */
|
||||
--base05: #516d7b; /* White */
|
||||
--base06: #1f292e; /* Brighter White */
|
||||
--base07: #161b1d; /* Bright White */
|
||||
--base08: #d22d72; /* Red */
|
||||
--base09: #935c25; /* Orange */
|
||||
--base0A: #8a8a0f; /* Yellow */
|
||||
--base0B: #568c3b; /* Green */
|
||||
--base0C: #2d8f6f; /* Cyan */
|
||||
--base0D: #257fad; /* Blue */
|
||||
--base0E: #6b6bb8; /* Purple */
|
||||
--base0F: #b72dd2; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #ebf8ff !important;
|
||||
background-color: #1f292e !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #516d7b;
|
||||
background: #ebf8ff;
|
||||
}
|
||||
.hljs-keyword { color: #6b6bb8; }
|
||||
.hljs-string { color: #568c3b; }
|
||||
.hljs-number { color: #935c25; }
|
||||
.hljs-comment { color: #7195a8; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1b1818;
|
||||
--background-base-lowest: #1b1818 !important;
|
||||
--background-base-lower: #292424 !important;
|
||||
--background-surface-high: #1b1818 !important;
|
||||
--chat-background: #1b1818;
|
||||
--home-background: #1b1818;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #292424 !important;
|
||||
--background-surface-highest: #585050 !important;
|
||||
--background-accent: #585050 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #8a8585;
|
||||
--text-strong: #8a8585 !important;
|
||||
--text-muted: #7e7777 !important;
|
||||
--text-subtle: #655d5d;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e7dfdf !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e7dfdf;
|
||||
--control-brand-foreground: #e7dfdf;
|
||||
--text-link: #7272ca !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #4b8b8b;
|
||||
--status-warning: #a06e3b;
|
||||
--status-danger: #ca4949;
|
||||
--icon-voice-muted: #ca4949;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e7dfdf;
|
||||
--scrollbar-auto-thumb: #e7dfdf;
|
||||
:root {
|
||||
--base00: #1b1818; /* Black */
|
||||
--base01: #292424; /* Bright Black */
|
||||
--base02: #585050; /* Grey */
|
||||
--base03: #655d5d; /* Brighter Grey */
|
||||
--base04: #7e7777; /* Bright Grey */
|
||||
--base05: #8a8585; /* White */
|
||||
--base06: #e7dfdf; /* Brighter White */
|
||||
--base07: #f4ecec; /* Bright White */
|
||||
--base08: #ca4949; /* Red */
|
||||
--base09: #b45a3c; /* Orange */
|
||||
--base0A: #a06e3b; /* Yellow */
|
||||
--base0B: #4b8b8b; /* Green */
|
||||
--base0C: #5485b6; /* Cyan */
|
||||
--base0D: #7272ca; /* Blue */
|
||||
--base0E: #8464c4; /* Purple */
|
||||
--base0F: #bd5187; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1b1818 !important;
|
||||
background-color: #e7dfdf !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #8a8585;
|
||||
background: #1b1818;
|
||||
}
|
||||
.hljs-keyword { color: #8464c4; }
|
||||
.hljs-string { color: #4b8b8b; }
|
||||
.hljs-number { color: #b45a3c; }
|
||||
.hljs-comment { color: #655d5d; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f4ecec;
|
||||
--background-base-lowest: #f4ecec !important;
|
||||
--background-base-lower: #e7dfdf !important;
|
||||
--background-surface-high: #f4ecec !important;
|
||||
--chat-background: #f4ecec;
|
||||
--home-background: #f4ecec;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e7dfdf !important;
|
||||
--background-surface-highest: #8a8585 !important;
|
||||
--background-accent: #8a8585 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #585050;
|
||||
--text-strong: #585050 !important;
|
||||
--text-muted: #655d5d !important;
|
||||
--text-subtle: #7e7777;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #292424 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #292424;
|
||||
--control-brand-foreground: #292424;
|
||||
--text-link: #7272ca !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #4b8b8b;
|
||||
--status-warning: #a06e3b;
|
||||
--status-danger: #ca4949;
|
||||
--icon-voice-muted: #ca4949;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #292424;
|
||||
--scrollbar-auto-thumb: #292424;
|
||||
:root {
|
||||
--base00: #f4ecec; /* Black */
|
||||
--base01: #e7dfdf; /* Bright Black */
|
||||
--base02: #8a8585; /* Grey */
|
||||
--base03: #7e7777; /* Brighter Grey */
|
||||
--base04: #655d5d; /* Bright Grey */
|
||||
--base05: #585050; /* White */
|
||||
--base06: #292424; /* Brighter White */
|
||||
--base07: #1b1818; /* Bright White */
|
||||
--base08: #ca4949; /* Red */
|
||||
--base09: #b45a3c; /* Orange */
|
||||
--base0A: #a06e3b; /* Yellow */
|
||||
--base0B: #4b8b8b; /* Green */
|
||||
--base0C: #5485b6; /* Cyan */
|
||||
--base0D: #7272ca; /* Blue */
|
||||
--base0E: #8464c4; /* Purple */
|
||||
--base0F: #bd5187; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f4ecec !important;
|
||||
background-color: #292424 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #585050;
|
||||
background: #f4ecec;
|
||||
}
|
||||
.hljs-keyword { color: #8464c4; }
|
||||
.hljs-string { color: #4b8b8b; }
|
||||
.hljs-number { color: #b45a3c; }
|
||||
.hljs-comment { color: #7e7777; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #171c19;
|
||||
--background-base-lowest: #171c19 !important;
|
||||
--background-base-lower: #232a25 !important;
|
||||
--background-surface-high: #171c19 !important;
|
||||
--chat-background: #171c19;
|
||||
--home-background: #171c19;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #232a25 !important;
|
||||
--background-surface-highest: #526057 !important;
|
||||
--background-accent: #526057 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #87928a;
|
||||
--text-strong: #87928a !important;
|
||||
--text-muted: #78877d !important;
|
||||
--text-subtle: #5f6d64;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dfe7e2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dfe7e2;
|
||||
--control-brand-foreground: #dfe7e2;
|
||||
--text-link: #478c90 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #489963;
|
||||
--status-warning: #a07e3b;
|
||||
--status-danger: #b16139;
|
||||
--icon-voice-muted: #b16139;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dfe7e2;
|
||||
--scrollbar-auto-thumb: #dfe7e2;
|
||||
:root {
|
||||
--base00: #171c19; /* Black */
|
||||
--base01: #232a25; /* Bright Black */
|
||||
--base02: #526057; /* Grey */
|
||||
--base03: #5f6d64; /* Brighter Grey */
|
||||
--base04: #78877d; /* Bright Grey */
|
||||
--base05: #87928a; /* White */
|
||||
--base06: #dfe7e2; /* Brighter White */
|
||||
--base07: #ecf4ee; /* Bright White */
|
||||
--base08: #b16139; /* Red */
|
||||
--base09: #9f713c; /* Orange */
|
||||
--base0A: #a07e3b; /* Yellow */
|
||||
--base0B: #489963; /* Green */
|
||||
--base0C: #1c9aa0; /* Cyan */
|
||||
--base0D: #478c90; /* Blue */
|
||||
--base0E: #55859b; /* Purple */
|
||||
--base0F: #867469; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #171c19 !important;
|
||||
background-color: #dfe7e2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #87928a;
|
||||
background: #171c19;
|
||||
}
|
||||
.hljs-keyword { color: #55859b; }
|
||||
.hljs-string { color: #489963; }
|
||||
.hljs-number { color: #9f713c; }
|
||||
.hljs-comment { color: #5f6d64; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #ecf4ee;
|
||||
--background-base-lowest: #ecf4ee !important;
|
||||
--background-base-lower: #dfe7e2 !important;
|
||||
--background-surface-high: #ecf4ee !important;
|
||||
--chat-background: #ecf4ee;
|
||||
--home-background: #ecf4ee;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #dfe7e2 !important;
|
||||
--background-surface-highest: #87928a !important;
|
||||
--background-accent: #87928a !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #526057;
|
||||
--text-strong: #526057 !important;
|
||||
--text-muted: #5f6d64 !important;
|
||||
--text-subtle: #78877d;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #232a25 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #232a25;
|
||||
--control-brand-foreground: #232a25;
|
||||
--text-link: #478c90 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #489963;
|
||||
--status-warning: #a07e3b;
|
||||
--status-danger: #b16139;
|
||||
--icon-voice-muted: #b16139;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #232a25;
|
||||
--scrollbar-auto-thumb: #232a25;
|
||||
:root {
|
||||
--base00: #ecf4ee; /* Black */
|
||||
--base01: #dfe7e2; /* Bright Black */
|
||||
--base02: #87928a; /* Grey */
|
||||
--base03: #78877d; /* Brighter Grey */
|
||||
--base04: #5f6d64; /* Bright Grey */
|
||||
--base05: #526057; /* White */
|
||||
--base06: #232a25; /* Brighter White */
|
||||
--base07: #171c19; /* Bright White */
|
||||
--base08: #b16139; /* Red */
|
||||
--base09: #9f713c; /* Orange */
|
||||
--base0A: #a07e3b; /* Yellow */
|
||||
--base0B: #489963; /* Green */
|
||||
--base0C: #1c9aa0; /* Cyan */
|
||||
--base0D: #478c90; /* Blue */
|
||||
--base0E: #55859b; /* Purple */
|
||||
--base0F: #867469; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #ecf4ee !important;
|
||||
background-color: #232a25 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #526057;
|
||||
background: #ecf4ee;
|
||||
}
|
||||
.hljs-keyword { color: #55859b; }
|
||||
.hljs-string { color: #489963; }
|
||||
.hljs-number { color: #9f713c; }
|
||||
.hljs-comment { color: #78877d; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #131513;
|
||||
--background-base-lowest: #131513 !important;
|
||||
--background-base-lower: #242924 !important;
|
||||
--background-surface-high: #131513 !important;
|
||||
--chat-background: #131513;
|
||||
--home-background: #131513;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #242924 !important;
|
||||
--background-surface-highest: #5e6e5e !important;
|
||||
--background-accent: #5e6e5e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #8ca68c;
|
||||
--text-strong: #8ca68c !important;
|
||||
--text-muted: #809980 !important;
|
||||
--text-subtle: #687d68;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #cfe8cf !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #cfe8cf;
|
||||
--control-brand-foreground: #cfe8cf;
|
||||
--text-link: #3d62f5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #29a329;
|
||||
--status-warning: #98981b;
|
||||
--status-danger: #e6193c;
|
||||
--icon-voice-muted: #e6193c;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #cfe8cf;
|
||||
--scrollbar-auto-thumb: #cfe8cf;
|
||||
:root {
|
||||
--base00: #131513; /* Black */
|
||||
--base01: #242924; /* Bright Black */
|
||||
--base02: #5e6e5e; /* Grey */
|
||||
--base03: #687d68; /* Brighter Grey */
|
||||
--base04: #809980; /* Bright Grey */
|
||||
--base05: #8ca68c; /* White */
|
||||
--base06: #cfe8cf; /* Brighter White */
|
||||
--base07: #f4fbf4; /* Bright White */
|
||||
--base08: #e6193c; /* Red */
|
||||
--base09: #87711d; /* Orange */
|
||||
--base0A: #98981b; /* Yellow */
|
||||
--base0B: #29a329; /* Green */
|
||||
--base0C: #1999b3; /* Cyan */
|
||||
--base0D: #3d62f5; /* Blue */
|
||||
--base0E: #ad2bee; /* Purple */
|
||||
--base0F: #e619c3; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #131513 !important;
|
||||
background-color: #cfe8cf !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #8ca68c;
|
||||
background: #131513;
|
||||
}
|
||||
.hljs-keyword { color: #ad2bee; }
|
||||
.hljs-string { color: #29a329; }
|
||||
.hljs-number { color: #87711d; }
|
||||
.hljs-comment { color: #687d68; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f4fbf4;
|
||||
--background-base-lowest: #f4fbf4 !important;
|
||||
--background-base-lower: #cfe8cf !important;
|
||||
--background-surface-high: #f4fbf4 !important;
|
||||
--chat-background: #f4fbf4;
|
||||
--home-background: #f4fbf4;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #cfe8cf !important;
|
||||
--background-surface-highest: #8ca68c !important;
|
||||
--background-accent: #8ca68c !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5e6e5e;
|
||||
--text-strong: #5e6e5e !important;
|
||||
--text-muted: #687d68 !important;
|
||||
--text-subtle: #809980;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #242924 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #242924;
|
||||
--control-brand-foreground: #242924;
|
||||
--text-link: #3d62f5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #29a329;
|
||||
--status-warning: #98981b;
|
||||
--status-danger: #e6193c;
|
||||
--icon-voice-muted: #e6193c;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #242924;
|
||||
--scrollbar-auto-thumb: #242924;
|
||||
:root {
|
||||
--base00: #f4fbf4; /* Black */
|
||||
--base01: #cfe8cf; /* Bright Black */
|
||||
--base02: #8ca68c; /* Grey */
|
||||
--base03: #809980; /* Brighter Grey */
|
||||
--base04: #687d68; /* Bright Grey */
|
||||
--base05: #5e6e5e; /* White */
|
||||
--base06: #242924; /* Brighter White */
|
||||
--base07: #131513; /* Bright White */
|
||||
--base08: #e6193c; /* Red */
|
||||
--base09: #87711d; /* Orange */
|
||||
--base0A: #98981b; /* Yellow */
|
||||
--base0B: #29a329; /* Green */
|
||||
--base0C: #1999b3; /* Cyan */
|
||||
--base0D: #3d62f5; /* Blue */
|
||||
--base0E: #ad2bee; /* Purple */
|
||||
--base0F: #e619c3; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f4fbf4 !important;
|
||||
background-color: #242924 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5e6e5e;
|
||||
background: #f4fbf4;
|
||||
}
|
||||
.hljs-keyword { color: #ad2bee; }
|
||||
.hljs-string { color: #29a329; }
|
||||
.hljs-number { color: #87711d; }
|
||||
.hljs-comment { color: #809980; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #202746;
|
||||
--background-base-lowest: #202746 !important;
|
||||
--background-base-lower: #293256 !important;
|
||||
--background-surface-high: #202746 !important;
|
||||
--chat-background: #202746;
|
||||
--home-background: #202746;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #293256 !important;
|
||||
--background-surface-highest: #5e6687 !important;
|
||||
--background-accent: #5e6687 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #979db4;
|
||||
--text-strong: #979db4 !important;
|
||||
--text-muted: #898ea4 !important;
|
||||
--text-subtle: #6b7394;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dfe2f1 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dfe2f1;
|
||||
--control-brand-foreground: #dfe2f1;
|
||||
--text-link: #3d8fd1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #ac9739;
|
||||
--status-warning: #c08b30;
|
||||
--status-danger: #c94922;
|
||||
--icon-voice-muted: #c94922;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dfe2f1;
|
||||
--scrollbar-auto-thumb: #dfe2f1;
|
||||
:root {
|
||||
--base00: #202746; /* Black */
|
||||
--base01: #293256; /* Bright Black */
|
||||
--base02: #5e6687; /* Grey */
|
||||
--base03: #6b7394; /* Brighter Grey */
|
||||
--base04: #898ea4; /* Bright Grey */
|
||||
--base05: #979db4; /* White */
|
||||
--base06: #dfe2f1; /* Brighter White */
|
||||
--base07: #f5f7ff; /* Bright White */
|
||||
--base08: #c94922; /* Red */
|
||||
--base09: #c76b29; /* Orange */
|
||||
--base0A: #c08b30; /* Yellow */
|
||||
--base0B: #ac9739; /* Green */
|
||||
--base0C: #22a2c9; /* Cyan */
|
||||
--base0D: #3d8fd1; /* Blue */
|
||||
--base0E: #6679cc; /* Purple */
|
||||
--base0F: #9c637a; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #202746 !important;
|
||||
background-color: #dfe2f1 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #979db4;
|
||||
background: #202746;
|
||||
}
|
||||
.hljs-keyword { color: #6679cc; }
|
||||
.hljs-string { color: #ac9739; }
|
||||
.hljs-number { color: #c76b29; }
|
||||
.hljs-comment { color: #6b7394; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f5f7ff;
|
||||
--background-base-lowest: #f5f7ff !important;
|
||||
--background-base-lower: #dfe2f1 !important;
|
||||
--background-surface-high: #f5f7ff !important;
|
||||
--chat-background: #f5f7ff;
|
||||
--home-background: #f5f7ff;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #dfe2f1 !important;
|
||||
--background-surface-highest: #979db4 !important;
|
||||
--background-accent: #979db4 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5e6687;
|
||||
--text-strong: #5e6687 !important;
|
||||
--text-muted: #6b7394 !important;
|
||||
--text-subtle: #898ea4;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #293256 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #293256;
|
||||
--control-brand-foreground: #293256;
|
||||
--text-link: #3d8fd1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #ac9739;
|
||||
--status-warning: #c08b30;
|
||||
--status-danger: #c94922;
|
||||
--icon-voice-muted: #c94922;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #293256;
|
||||
--scrollbar-auto-thumb: #293256;
|
||||
:root {
|
||||
--base00: #f5f7ff; /* Black */
|
||||
--base01: #dfe2f1; /* Bright Black */
|
||||
--base02: #979db4; /* Grey */
|
||||
--base03: #898ea4; /* Brighter Grey */
|
||||
--base04: #6b7394; /* Bright Grey */
|
||||
--base05: #5e6687; /* White */
|
||||
--base06: #293256; /* Brighter White */
|
||||
--base07: #202746; /* Bright White */
|
||||
--base08: #c94922; /* Red */
|
||||
--base09: #c76b29; /* Orange */
|
||||
--base0A: #c08b30; /* Yellow */
|
||||
--base0B: #ac9739; /* Green */
|
||||
--base0C: #22a2c9; /* Cyan */
|
||||
--base0D: #3d8fd1; /* Blue */
|
||||
--base0E: #6679cc; /* Purple */
|
||||
--base0F: #9c637a; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f5f7ff !important;
|
||||
background-color: #293256 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5e6687;
|
||||
background: #f5f7ff;
|
||||
}
|
||||
.hljs-keyword { color: #6679cc; }
|
||||
.hljs-string { color: #ac9739; }
|
||||
.hljs-number { color: #c76b29; }
|
||||
.hljs-comment { color: #898ea4; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #002635;
|
||||
--background-base-lowest: #002635 !important;
|
||||
--background-base-lower: #00384d !important;
|
||||
--background-surface-high: #002635 !important;
|
||||
--chat-background: #002635;
|
||||
--home-background: #002635;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #00384d !important;
|
||||
--background-surface-highest: #517f8d !important;
|
||||
--background-accent: #517f8d !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a1a19a;
|
||||
--text-strong: #a1a19a !important;
|
||||
--text-muted: #869696 !important;
|
||||
--text-subtle: #6c8b91;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e6e6dc !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e6e6dc;
|
||||
--control-brand-foreground: #e6e6dc;
|
||||
--text-link: #14747e !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7fc06e;
|
||||
--status-warning: #ffcc1b;
|
||||
--status-danger: #ff5a67;
|
||||
--icon-voice-muted: #ff5a67;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e6e6dc;
|
||||
--scrollbar-auto-thumb: #e6e6dc;
|
||||
:root {
|
||||
--base00: #002635; /* Black */
|
||||
--base01: #00384d; /* Bright Black */
|
||||
--base02: #517f8d; /* Grey */
|
||||
--base03: #6c8b91; /* Brighter Grey */
|
||||
--base04: #869696; /* Bright Grey */
|
||||
--base05: #a1a19a; /* White */
|
||||
--base06: #e6e6dc; /* Brighter White */
|
||||
--base07: #fafaf8; /* Bright White */
|
||||
--base08: #ff5a67; /* Red */
|
||||
--base09: #f08e48; /* Orange */
|
||||
--base0A: #ffcc1b; /* Yellow */
|
||||
--base0B: #7fc06e; /* Green */
|
||||
--base0C: #5dd7b9; /* Cyan */
|
||||
--base0D: #14747e; /* Blue */
|
||||
--base0E: #9a70a4; /* Purple */
|
||||
--base0F: #c43060; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #002635 !important;
|
||||
background-color: #e6e6dc !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a1a19a;
|
||||
background: #002635;
|
||||
}
|
||||
.hljs-keyword { color: #9a70a4; }
|
||||
.hljs-string { color: #7fc06e; }
|
||||
.hljs-number { color: #f08e48; }
|
||||
.hljs-comment { color: #6c8b91; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #0b0e14;
|
||||
--background-base-lowest: #0b0e14 !important;
|
||||
--background-base-lower: #131721 !important;
|
||||
--background-surface-high: #0b0e14 !important;
|
||||
--chat-background: #0b0e14;
|
||||
--home-background: #0b0e14;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #131721 !important;
|
||||
--background-surface-highest: #202229 !important;
|
||||
--background-accent: #202229 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #e6e1cf;
|
||||
--text-strong: #e6e1cf !important;
|
||||
--text-muted: #bfbdb6 !important;
|
||||
--text-subtle: #3e4b59;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ece8db !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ece8db;
|
||||
--control-brand-foreground: #ece8db;
|
||||
--text-link: #59c2ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #aad94c;
|
||||
--status-warning: #ffb454;
|
||||
--status-danger: #f07178;
|
||||
--icon-voice-muted: #f07178;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ece8db;
|
||||
--scrollbar-auto-thumb: #ece8db;
|
||||
:root {
|
||||
--base00: #0b0e14; /* Black */
|
||||
--base01: #131721; /* Bright Black */
|
||||
--base02: #202229; /* Grey */
|
||||
--base03: #3e4b59; /* Brighter Grey */
|
||||
--base04: #bfbdb6; /* Bright Grey */
|
||||
--base05: #e6e1cf; /* White */
|
||||
--base06: #ece8db; /* Brighter White */
|
||||
--base07: #f2f0e7; /* Bright White */
|
||||
--base08: #f07178; /* Red */
|
||||
--base09: #ff8f40; /* Orange */
|
||||
--base0A: #ffb454; /* Yellow */
|
||||
--base0B: #aad94c; /* Green */
|
||||
--base0C: #95e6cb; /* Cyan */
|
||||
--base0D: #59c2ff; /* Blue */
|
||||
--base0E: #d2a6ff; /* Purple */
|
||||
--base0F: #e6b450; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #0b0e14 !important;
|
||||
background-color: #ece8db !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #e6e1cf;
|
||||
background: #0b0e14;
|
||||
}
|
||||
.hljs-keyword { color: #d2a6ff; }
|
||||
.hljs-string { color: #aad94c; }
|
||||
.hljs-number { color: #ff8f40; }
|
||||
.hljs-comment { color: #3e4b59; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f8f9fa;
|
||||
--background-base-lowest: #f8f9fa !important;
|
||||
--background-base-lower: #edeff1 !important;
|
||||
--background-surface-high: #f8f9fa !important;
|
||||
--chat-background: #f8f9fa;
|
||||
--home-background: #f8f9fa;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #edeff1 !important;
|
||||
--background-surface-highest: #d2d4d8 !important;
|
||||
--background-accent: #d2d4d8 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5c6166;
|
||||
--text-strong: #5c6166 !important;
|
||||
--text-muted: #8a9199 !important;
|
||||
--text-subtle: #a0a6ac;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #4e5257 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #4e5257;
|
||||
--control-brand-foreground: #4e5257;
|
||||
--text-link: #399ee6 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #6cbf49;
|
||||
--status-warning: #f2ae49;
|
||||
--status-danger: #f07171;
|
||||
--icon-voice-muted: #f07171;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #4e5257;
|
||||
--scrollbar-auto-thumb: #4e5257;
|
||||
:root {
|
||||
--base00: #f8f9fa; /* Black */
|
||||
--base01: #edeff1; /* Bright Black */
|
||||
--base02: #d2d4d8; /* Grey */
|
||||
--base03: #a0a6ac; /* Brighter Grey */
|
||||
--base04: #8a9199; /* Bright Grey */
|
||||
--base05: #5c6166; /* White */
|
||||
--base06: #4e5257; /* Brighter White */
|
||||
--base07: #404447; /* Bright White */
|
||||
--base08: #f07171; /* Red */
|
||||
--base09: #fa8d3e; /* Orange */
|
||||
--base0A: #f2ae49; /* Yellow */
|
||||
--base0B: #6cbf49; /* Green */
|
||||
--base0C: #4cbf99; /* Cyan */
|
||||
--base0D: #399ee6; /* Blue */
|
||||
--base0E: #a37acc; /* Purple */
|
||||
--base0F: #e6ba7e; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f8f9fa !important;
|
||||
background-color: #4e5257 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5c6166;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.hljs-keyword { color: #a37acc; }
|
||||
.hljs-string { color: #6cbf49; }
|
||||
.hljs-number { color: #fa8d3e; }
|
||||
.hljs-comment { color: #a0a6ac; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1f2430;
|
||||
--background-base-lowest: #1f2430 !important;
|
||||
--background-base-lower: #242936 !important;
|
||||
--background-surface-high: #1f2430 !important;
|
||||
--chat-background: #1f2430;
|
||||
--home-background: #1f2430;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #242936 !important;
|
||||
--background-surface-highest: #323844 !important;
|
||||
--background-accent: #323844 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #cccac2;
|
||||
--text-strong: #cccac2 !important;
|
||||
--text-muted: #707a8c !important;
|
||||
--text-subtle: #4a5059;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #d9d7ce !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #d9d7ce;
|
||||
--control-brand-foreground: #d9d7ce;
|
||||
--text-link: #73d0ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #d5ff80;
|
||||
--status-warning: #ffd173;
|
||||
--status-danger: #f28779;
|
||||
--icon-voice-muted: #f28779;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #d9d7ce;
|
||||
--scrollbar-auto-thumb: #d9d7ce;
|
||||
:root {
|
||||
--base00: #1f2430; /* Black */
|
||||
--base01: #242936; /* Bright Black */
|
||||
--base02: #323844; /* Grey */
|
||||
--base03: #4a5059; /* Brighter Grey */
|
||||
--base04: #707a8c; /* Bright Grey */
|
||||
--base05: #cccac2; /* White */
|
||||
--base06: #d9d7ce; /* Brighter White */
|
||||
--base07: #f3f4f5; /* Bright White */
|
||||
--base08: #f28779; /* Red */
|
||||
--base09: #ffad66; /* Orange */
|
||||
--base0A: #ffd173; /* Yellow */
|
||||
--base0B: #d5ff80; /* Green */
|
||||
--base0C: #95e6cb; /* Cyan */
|
||||
--base0D: #73d0ff; /* Blue */
|
||||
--base0E: #d4bfff; /* Purple */
|
||||
--base0F: #f27983; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1f2430 !important;
|
||||
background-color: #d9d7ce !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #cccac2;
|
||||
background: #1f2430;
|
||||
}
|
||||
.hljs-keyword { color: #d4bfff; }
|
||||
.hljs-string { color: #d5ff80; }
|
||||
.hljs-number { color: #ffad66; }
|
||||
.hljs-comment { color: #4a5059; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #101600;
|
||||
--background-base-lowest: #101600 !important;
|
||||
--background-base-lower: #1a1e01 !important;
|
||||
--background-surface-high: #101600 !important;
|
||||
--chat-background: #101600;
|
||||
--home-background: #101600;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #1a1e01 !important;
|
||||
--background-surface-highest: #242604 !important;
|
||||
--background-accent: #242604 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffda51;
|
||||
--text-strong: #ffda51 !important;
|
||||
--text-muted: #ffd129 !important;
|
||||
--text-subtle: #2e2e05;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffe178 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffe178;
|
||||
--control-brand-foreground: #ffe178;
|
||||
--text-link: #5b4a9f !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #63d932;
|
||||
--status-warning: #eebb00;
|
||||
--status-danger: #ee2e00;
|
||||
--icon-voice-muted: #ee2e00;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffe178;
|
||||
--scrollbar-auto-thumb: #ffe178;
|
||||
:root {
|
||||
--base00: #101600; /* Black */
|
||||
--base01: #1a1e01; /* Bright Black */
|
||||
--base02: #242604; /* Grey */
|
||||
--base03: #2e2e05; /* Brighter Grey */
|
||||
--base04: #ffd129; /* Bright Grey */
|
||||
--base05: #ffda51; /* White */
|
||||
--base06: #ffe178; /* Brighter White */
|
||||
--base07: #ffeba0; /* Bright White */
|
||||
--base08: #ee2e00; /* Red */
|
||||
--base09: #ee8800; /* Orange */
|
||||
--base0A: #eebb00; /* Yellow */
|
||||
--base0B: #63d932; /* Green */
|
||||
--base0C: #3d94a5; /* Cyan */
|
||||
--base0D: #5b4a9f; /* Blue */
|
||||
--base0E: #883e9f; /* Purple */
|
||||
--base0F: #a928b9; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #101600 !important;
|
||||
background-color: #ffe178 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffda51;
|
||||
background: #101600;
|
||||
}
|
||||
.hljs-keyword { color: #883e9f; }
|
||||
.hljs-string { color: #63d932; }
|
||||
.hljs-number { color: #ee8800; }
|
||||
.hljs-comment { color: #2e2e05; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #28211c;
|
||||
--background-base-lowest: #28211c !important;
|
||||
--background-base-lower: #36312e !important;
|
||||
--background-surface-high: #28211c !important;
|
||||
--chat-background: #28211c;
|
||||
--home-background: #28211c;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #36312e !important;
|
||||
--background-surface-highest: #5e5d5c !important;
|
||||
--background-accent: #5e5d5c !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #8a8986;
|
||||
--text-strong: #8a8986 !important;
|
||||
--text-muted: #797977 !important;
|
||||
--text-subtle: #666666;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #9d9b97 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #9d9b97;
|
||||
--control-brand-foreground: #9d9b97;
|
||||
--text-link: #5ea6ea !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #54be0d;
|
||||
--status-warning: #f9ee98;
|
||||
--status-danger: #cf6a4c;
|
||||
--icon-voice-muted: #cf6a4c;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #9d9b97;
|
||||
--scrollbar-auto-thumb: #9d9b97;
|
||||
:root {
|
||||
--base00: #28211c; /* Black */
|
||||
--base01: #36312e; /* Bright Black */
|
||||
--base02: #5e5d5c; /* Grey */
|
||||
--base03: #666666; /* Brighter Grey */
|
||||
--base04: #797977; /* Bright Grey */
|
||||
--base05: #8a8986; /* White */
|
||||
--base06: #9d9b97; /* Brighter White */
|
||||
--base07: #baae9e; /* Bright White */
|
||||
--base08: #cf6a4c; /* Red */
|
||||
--base09: #cf7d34; /* Orange */
|
||||
--base0A: #f9ee98; /* Yellow */
|
||||
--base0B: #54be0d; /* Green */
|
||||
--base0C: #afc4db; /* Cyan */
|
||||
--base0D: #5ea6ea; /* Blue */
|
||||
--base0E: #9b859d; /* Purple */
|
||||
--base0F: #937121; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #28211c !important;
|
||||
background-color: #9d9b97 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #8a8986;
|
||||
background: #28211c;
|
||||
}
|
||||
.hljs-keyword { color: #9b859d; }
|
||||
.hljs-string { color: #54be0d; }
|
||||
.hljs-number { color: #cf7d34; }
|
||||
.hljs-comment { color: #666666; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #dd9999;
|
||||
--status-warning: #a06666;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #a06666; /* Yellow */
|
||||
--base0B: #dd9999; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #dd9999; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #fbcb97;
|
||||
--status-warning: #e78a53;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #e78a53; /* Yellow */
|
||||
--base0B: #fbcb97; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #fbcb97; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #ddeecc;
|
||||
--status-warning: #99bbaa;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #99bbaa; /* Yellow */
|
||||
--base0B: #ddeecc; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #ddeecc; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #d0dfee;
|
||||
--status-warning: #5f81a5;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #5f81a5; /* Yellow */
|
||||
--base0B: #d0dfee; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #d0dfee; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #9b8d7f;
|
||||
--status-warning: #8c7f70;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #8c7f70; /* Yellow */
|
||||
--base0B: #9b8d7f; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #9b8d7f; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7799bb;
|
||||
--status-warning: #556677;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #556677; /* Yellow */
|
||||
--base0B: #7799bb; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #7799bb; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #eceee3;
|
||||
--status-warning: #974b46;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #974b46; /* Yellow */
|
||||
--base0B: #eceee3; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #eceee3; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a5aaa7;
|
||||
--status-warning: #626b67;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #626b67; /* Yellow */
|
||||
--base0B: #a5aaa7; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #a5aaa7; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #f3ecd4;
|
||||
--status-warning: #eecc6c;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #eecc6c; /* Yellow */
|
||||
--base0B: #f3ecd4; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #f3ecd4; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #aa9988;
|
||||
--status-warning: #777755;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #777755; /* Yellow */
|
||||
--base0B: #aa9988; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #aa9988; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #121212 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #121212 !important;
|
||||
--background-surface-highest: #222222 !important;
|
||||
--background-accent: #222222 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c1c1c1;
|
||||
--text-strong: #c1c1c1 !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #333333;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #999999 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #999999;
|
||||
--control-brand-foreground: #999999;
|
||||
--text-link: #888888 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #f8f7f2;
|
||||
--status-warning: #79241f;
|
||||
--status-danger: #5f8787;
|
||||
--icon-voice-muted: #5f8787;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #999999;
|
||||
--scrollbar-auto-thumb: #999999;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #121212; /* Bright Black */
|
||||
--base02: #222222; /* Grey */
|
||||
--base03: #333333; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #c1c1c1; /* White */
|
||||
--base06: #999999; /* Brighter White */
|
||||
--base07: #c1c1c1; /* Bright White */
|
||||
--base08: #5f8787; /* Red */
|
||||
--base09: #aaaaaa; /* Orange */
|
||||
--base0A: #79241f; /* Yellow */
|
||||
--base0B: #f8f7f2; /* Green */
|
||||
--base0C: #aaaaaa; /* Cyan */
|
||||
--base0D: #888888; /* Blue */
|
||||
--base0E: #999999; /* Purple */
|
||||
--base0F: #444444; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #999999 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c1c1c1;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #999999; }
|
||||
.hljs-string { color: #f8f7f2; }
|
||||
.hljs-number { color: #aaaaaa; }
|
||||
.hljs-comment { color: #333333; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #141f2e;
|
||||
--background-base-lowest: #141f2e !important;
|
||||
--background-base-lower: #1e5c1e !important;
|
||||
--background-surface-high: #141f2e !important;
|
||||
--chat-background: #141f2e;
|
||||
--home-background: #141f2e;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #1e5c1e !important;
|
||||
--background-surface-highest: #273e5c !important;
|
||||
--background-accent: #273e5c !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffcc33;
|
||||
--text-strong: #ffcc33 !important;
|
||||
--text-muted: #1e5c1e !important;
|
||||
--text-subtle: #a0ffa0;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #91ccff !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #91ccff;
|
||||
--control-brand-foreground: #91ccff;
|
||||
--text-link: #a2cff5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #80ff80;
|
||||
--status-warning: #91ccff;
|
||||
--status-danger: #fffab1;
|
||||
--icon-voice-muted: #fffab1;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #91ccff;
|
||||
--scrollbar-auto-thumb: #91ccff;
|
||||
:root {
|
||||
--base00: #141f2e; /* Black */
|
||||
--base01: #1e5c1e; /* Bright Black */
|
||||
--base02: #273e5c; /* Grey */
|
||||
--base03: #a0ffa0; /* Brighter Grey */
|
||||
--base04: #1e5c1e; /* Bright Grey */
|
||||
--base05: #ffcc33; /* White */
|
||||
--base06: #91ccff; /* Brighter White */
|
||||
--base07: #375780; /* Bright White */
|
||||
--base08: #fffab1; /* Red */
|
||||
--base09: #ff8080; /* Orange */
|
||||
--base0A: #91ccff; /* Yellow */
|
||||
--base0B: #80ff80; /* Green */
|
||||
--base0C: #80ff80; /* Cyan */
|
||||
--base0D: #a2cff5; /* Blue */
|
||||
--base0E: #0099ff; /* Purple */
|
||||
--base0F: #e7e7e7; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #141f2e !important;
|
||||
background-color: #91ccff !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffcc33;
|
||||
background: #141f2e;
|
||||
}
|
||||
.hljs-keyword { color: #0099ff; }
|
||||
.hljs-string { color: #80ff80; }
|
||||
.hljs-number { color: #ff8080; }
|
||||
.hljs-comment { color: #a0ffa0; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #182430;
|
||||
--background-base-lowest: #182430 !important;
|
||||
--background-base-lower: #243c54 !important;
|
||||
--background-surface-high: #182430 !important;
|
||||
--chat-background: #182430;
|
||||
--home-background: #182430;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #243c54 !important;
|
||||
--background-surface-highest: #46290a !important;
|
||||
--background-accent: #46290a !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c8e1f8;
|
||||
--text-strong: #c8e1f8 !important;
|
||||
--text-muted: #74afe7 !important;
|
||||
--text-subtle: #616d78;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ddeaf6 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ddeaf6;
|
||||
--control-brand-foreground: #ddeaf6;
|
||||
--text-link: #82aaff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #c3e88d;
|
||||
--status-warning: #f6cd5c;
|
||||
--status-danger: #4ce587;
|
||||
--icon-voice-muted: #4ce587;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ddeaf6;
|
||||
--scrollbar-auto-thumb: #ddeaf6;
|
||||
:root {
|
||||
--base00: #182430; /* Black */
|
||||
--base01: #243c54; /* Bright Black */
|
||||
--base02: #46290a; /* Grey */
|
||||
--base03: #616d78; /* Brighter Grey */
|
||||
--base04: #74afe7; /* Bright Grey */
|
||||
--base05: #c8e1f8; /* White */
|
||||
--base06: #ddeaf6; /* Brighter White */
|
||||
--base07: #8f98a0; /* Bright White */
|
||||
--base08: #4ce587; /* Red */
|
||||
--base09: #f6a85c; /* Orange */
|
||||
--base0A: #f6cd5c; /* Yellow */
|
||||
--base0B: #c3e88d; /* Green */
|
||||
--base0C: #5fd1ff; /* Cyan */
|
||||
--base0D: #82aaff; /* Blue */
|
||||
--base0E: #ff84dd; /* Purple */
|
||||
--base0F: #bbd2e8; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #182430 !important;
|
||||
background-color: #ddeaf6 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c8e1f8;
|
||||
background: #182430;
|
||||
}
|
||||
.hljs-keyword { color: #ff84dd; }
|
||||
.hljs-string { color: #c3e88d; }
|
||||
.hljs-number { color: #f6a85c; }
|
||||
.hljs-comment { color: #616d78; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #191914;
|
||||
--background-base-lowest: #191914 !important;
|
||||
--background-base-lower: #3a3a2e !important;
|
||||
--background-surface-high: #191914 !important;
|
||||
--chat-background: #191914;
|
||||
--home-background: #191914;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #3a3a2e !important;
|
||||
--background-surface-highest: #5b5b49 !important;
|
||||
--background-accent: #5b5b49 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #bdbd97;
|
||||
--text-strong: #bdbd97 !important;
|
||||
--text-muted: #9c9c7d !important;
|
||||
--text-subtle: #7c7c63;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dedeb2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dedeb2;
|
||||
--control-brand-foreground: #dedeb2;
|
||||
--text-link: #ccbfd9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #e7ff99;
|
||||
--status-warning: #fff299;
|
||||
--status-danger: #ffbfa5;
|
||||
--icon-voice-muted: #ffbfa5;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dedeb2;
|
||||
--scrollbar-auto-thumb: #dedeb2;
|
||||
:root {
|
||||
--base00: #191914; /* Black */
|
||||
--base01: #3a3a2e; /* Bright Black */
|
||||
--base02: #5b5b49; /* Grey */
|
||||
--base03: #7c7c63; /* Brighter Grey */
|
||||
--base04: #9c9c7d; /* Bright Grey */
|
||||
--base05: #bdbd97; /* White */
|
||||
--base06: #dedeb2; /* Brighter White */
|
||||
--base07: #ffffcc; /* Bright White */
|
||||
--base08: #ffbfa5; /* Red */
|
||||
--base09: #ffdc99; /* Orange */
|
||||
--base0A: #fff299; /* Yellow */
|
||||
--base0B: #e7ff99; /* Green */
|
||||
--base0C: #bfffc5; /* Cyan */
|
||||
--base0D: #ccbfd9; /* Blue */
|
||||
--base0E: #f2bfd9; /* Purple */
|
||||
--base0F: #e5d6a6; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #191914 !important;
|
||||
background-color: #dedeb2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #bdbd97;
|
||||
background: #191914;
|
||||
}
|
||||
.hljs-keyword { color: #f2bfd9; }
|
||||
.hljs-string { color: #e7ff99; }
|
||||
.hljs-number { color: #ffdc99; }
|
||||
.hljs-comment { color: #7c7c63; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #0c0d0e;
|
||||
--background-base-lowest: #0c0d0e !important;
|
||||
--background-base-lower: #2e2f30 !important;
|
||||
--background-surface-high: #0c0d0e !important;
|
||||
--chat-background: #0c0d0e;
|
||||
--home-background: #0c0d0e;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #2e2f30 !important;
|
||||
--background-surface-highest: #515253 !important;
|
||||
--background-accent: #515253 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #b7b8b9;
|
||||
--text-strong: #b7b8b9 !important;
|
||||
--text-muted: #959697 !important;
|
||||
--text-subtle: #737475;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dadbdc !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dadbdc;
|
||||
--control-brand-foreground: #dadbdc;
|
||||
--text-link: #3182bd !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #31a354;
|
||||
--status-warning: #dca060;
|
||||
--status-danger: #e31a1c;
|
||||
--icon-voice-muted: #e31a1c;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dadbdc;
|
||||
--scrollbar-auto-thumb: #dadbdc;
|
||||
:root {
|
||||
--base00: #0c0d0e; /* Black */
|
||||
--base01: #2e2f30; /* Bright Black */
|
||||
--base02: #515253; /* Grey */
|
||||
--base03: #737475; /* Brighter Grey */
|
||||
--base04: #959697; /* Bright Grey */
|
||||
--base05: #b7b8b9; /* White */
|
||||
--base06: #dadbdc; /* Brighter White */
|
||||
--base07: #fcfdfe; /* Bright White */
|
||||
--base08: #e31a1c; /* Red */
|
||||
--base09: #e6550d; /* Orange */
|
||||
--base0A: #dca060; /* Yellow */
|
||||
--base0B: #31a354; /* Green */
|
||||
--base0C: #80b1d3; /* Cyan */
|
||||
--base0D: #3182bd; /* Blue */
|
||||
--base0E: #756bb1; /* Purple */
|
||||
--base0F: #b15928; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #0c0d0e !important;
|
||||
background-color: #dadbdc !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #b7b8b9;
|
||||
background: #0c0d0e;
|
||||
}
|
||||
.hljs-keyword { color: #756bb1; }
|
||||
.hljs-string { color: #31a354; }
|
||||
.hljs-number { color: #e6550d; }
|
||||
.hljs-comment { color: #737475; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #303030 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #303030 !important;
|
||||
--background-surface-highest: #505050 !important;
|
||||
--background-accent: #505050 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #e0e0e0;
|
||||
--text-strong: #e0e0e0 !important;
|
||||
--text-muted: #d0d0d0 !important;
|
||||
--text-subtle: #b0b0b0;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f5f5f5 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f5f5f5;
|
||||
--control-brand-foreground: #f5f5f5;
|
||||
--text-link: #6fb3d2 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a1c659;
|
||||
--status-warning: #fda331;
|
||||
--status-danger: #fb0120;
|
||||
--icon-voice-muted: #fb0120;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f5f5f5;
|
||||
--scrollbar-auto-thumb: #f5f5f5;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #303030; /* Bright Black */
|
||||
--base02: #505050; /* Grey */
|
||||
--base03: #b0b0b0; /* Brighter Grey */
|
||||
--base04: #d0d0d0; /* Bright Grey */
|
||||
--base05: #e0e0e0; /* White */
|
||||
--base06: #f5f5f5; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #fb0120; /* Red */
|
||||
--base09: #fc6d24; /* Orange */
|
||||
--base0A: #fda331; /* Yellow */
|
||||
--base0B: #a1c659; /* Green */
|
||||
--base0C: #76c7b7; /* Cyan */
|
||||
--base0D: #6fb3d2; /* Blue */
|
||||
--base0E: #d381c3; /* Purple */
|
||||
--base0F: #be643c; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #f5f5f5 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #e0e0e0;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #d381c3; }
|
||||
.hljs-string { color: #a1c659; }
|
||||
.hljs-number { color: #fc6d24; }
|
||||
.hljs-comment { color: #b0b0b0; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1f1f1f;
|
||||
--background-base-lowest: #1f1f1f !important;
|
||||
--background-base-lower: #f81118 !important;
|
||||
--background-surface-high: #1f1f1f !important;
|
||||
--chat-background: #1f1f1f;
|
||||
--home-background: #1f1f1f;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #f81118 !important;
|
||||
--background-surface-highest: #2dc55e !important;
|
||||
--background-accent: #2dc55e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #4e5ab7;
|
||||
--text-strong: #4e5ab7 !important;
|
||||
--text-muted: #2a84d2 !important;
|
||||
--text-subtle: #ecba0f;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #1081d6 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #1081d6;
|
||||
--control-brand-foreground: #1081d6;
|
||||
--text-link: #5350b9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #f3bd09;
|
||||
--status-warning: #1dd361;
|
||||
--status-danger: #d6dbe5;
|
||||
--icon-voice-muted: #d6dbe5;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #1081d6;
|
||||
--scrollbar-auto-thumb: #1081d6;
|
||||
:root {
|
||||
--base00: #1f1f1f; /* Black */
|
||||
--base01: #f81118; /* Bright Black */
|
||||
--base02: #2dc55e; /* Grey */
|
||||
--base03: #ecba0f; /* Brighter Grey */
|
||||
--base04: #2a84d2; /* Bright Grey */
|
||||
--base05: #4e5ab7; /* White */
|
||||
--base06: #1081d6; /* Brighter White */
|
||||
--base07: #d6dbe5; /* Bright White */
|
||||
--base08: #d6dbe5; /* Red */
|
||||
--base09: #de352e; /* Orange */
|
||||
--base0A: #1dd361; /* Yellow */
|
||||
--base0B: #f3bd09; /* Green */
|
||||
--base0C: #1081d6; /* Cyan */
|
||||
--base0D: #5350b9; /* Blue */
|
||||
--base0E: #0f7ddb; /* Purple */
|
||||
--base0F: #ffffff; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1f1f1f !important;
|
||||
background-color: #1081d6 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #4e5ab7;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
.hljs-keyword { color: #0f7ddb; }
|
||||
.hljs-string { color: #f3bd09; }
|
||||
.hljs-number { color: #de352e; }
|
||||
.hljs-comment { color: #ecba0f; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #e3efef;
|
||||
--background-base-lowest: #e3efef !important;
|
||||
--background-base-lower: #c9dbdc !important;
|
||||
--background-surface-high: #e3efef !important;
|
||||
--chat-background: #e3efef;
|
||||
--home-background: #e3efef;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #c9dbdc !important;
|
||||
--background-surface-highest: #b0c5c8 !important;
|
||||
--background-accent: #b0c5c8 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #6d828e;
|
||||
--text-strong: #6d828e !important;
|
||||
--text-muted: #8299a1 !important;
|
||||
--text-subtle: #98afb5;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #5a6d7a !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #5a6d7a;
|
||||
--control-brand-foreground: #5a6d7a;
|
||||
--text-link: #868cb3 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #87b386;
|
||||
--status-warning: #aab386;
|
||||
--status-danger: #b38686;
|
||||
--icon-voice-muted: #b38686;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #5a6d7a;
|
||||
--scrollbar-auto-thumb: #5a6d7a;
|
||||
:root {
|
||||
--base00: #e3efef; /* Black */
|
||||
--base01: #c9dbdc; /* Bright Black */
|
||||
--base02: #b0c5c8; /* Grey */
|
||||
--base03: #98afb5; /* Brighter Grey */
|
||||
--base04: #8299a1; /* Bright Grey */
|
||||
--base05: #6d828e; /* White */
|
||||
--base06: #5a6d7a; /* Brighter White */
|
||||
--base07: #485867; /* Bright White */
|
||||
--base08: #b38686; /* Red */
|
||||
--base09: #d8bba2; /* Orange */
|
||||
--base0A: #aab386; /* Yellow */
|
||||
--base0B: #87b386; /* Green */
|
||||
--base0C: #86b3b3; /* Cyan */
|
||||
--base0D: #868cb3; /* Blue */
|
||||
--base0E: #b386b2; /* Purple */
|
||||
--base0F: #b39f9f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #e3efef !important;
|
||||
background-color: #5a6d7a !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #6d828e;
|
||||
background: #e3efef;
|
||||
}
|
||||
.hljs-keyword { color: #b386b2; }
|
||||
.hljs-string { color: #87b386; }
|
||||
.hljs-number { color: #d8bba2; }
|
||||
.hljs-comment { color: #98afb5; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #485867;
|
||||
--background-base-lowest: #485867 !important;
|
||||
--background-base-lower: #5a6d7a !important;
|
||||
--background-surface-high: #485867 !important;
|
||||
--chat-background: #485867;
|
||||
--home-background: #485867;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #5a6d7a !important;
|
||||
--background-surface-highest: #6d828e !important;
|
||||
--background-accent: #6d828e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #b0c5c8;
|
||||
--text-strong: #b0c5c8 !important;
|
||||
--text-muted: #98afb5 !important;
|
||||
--text-subtle: #8299a1;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #c9dbdc !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #c9dbdc;
|
||||
--control-brand-foreground: #c9dbdc;
|
||||
--text-link: #868cb3 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #87b386;
|
||||
--status-warning: #aab386;
|
||||
--status-danger: #b38686;
|
||||
--icon-voice-muted: #b38686;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #c9dbdc;
|
||||
--scrollbar-auto-thumb: #c9dbdc;
|
||||
:root {
|
||||
--base00: #485867; /* Black */
|
||||
--base01: #5a6d7a; /* Bright Black */
|
||||
--base02: #6d828e; /* Grey */
|
||||
--base03: #8299a1; /* Brighter Grey */
|
||||
--base04: #98afb5; /* Bright Grey */
|
||||
--base05: #b0c5c8; /* White */
|
||||
--base06: #c9dbdc; /* Brighter White */
|
||||
--base07: #e3efef; /* Bright White */
|
||||
--base08: #b38686; /* Red */
|
||||
--base09: #d8bba2; /* Orange */
|
||||
--base0A: #aab386; /* Yellow */
|
||||
--base0B: #87b386; /* Green */
|
||||
--base0C: #86b3b3; /* Cyan */
|
||||
--base0D: #868cb3; /* Blue */
|
||||
--base0E: #b386b2; /* Purple */
|
||||
--base0F: #b39f9f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #485867 !important;
|
||||
background-color: #c9dbdc !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #b0c5c8;
|
||||
background: #485867;
|
||||
}
|
||||
.hljs-keyword { color: #b386b2; }
|
||||
.hljs-string { color: #87b386; }
|
||||
.hljs-number { color: #d8bba2; }
|
||||
.hljs-comment { color: #8299a1; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1c1213;
|
||||
--background-base-lowest: #1c1213 !important;
|
||||
--background-base-lower: #3a2425 !important;
|
||||
--background-surface-high: #1c1213 !important;
|
||||
--chat-background: #1c1213;
|
||||
--home-background: #1c1213;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #3a2425 !important;
|
||||
--background-surface-highest: #563837 !important;
|
||||
--background-accent: #563837 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a87569;
|
||||
--text-strong: #a87569 !important;
|
||||
--text-muted: #8b5d57 !important;
|
||||
--text-subtle: #6d4745;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #c58d7b !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #c58d7b;
|
||||
--control-brand-foreground: #c58d7b;
|
||||
--text-link: #684c59 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #806c61;
|
||||
--status-warning: #f28171;
|
||||
--status-danger: #c24f57;
|
||||
--icon-voice-muted: #c24f57;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #c58d7b;
|
||||
--scrollbar-auto-thumb: #c58d7b;
|
||||
:root {
|
||||
--base00: #1c1213; /* Black */
|
||||
--base01: #3a2425; /* Bright Black */
|
||||
--base02: #563837; /* Grey */
|
||||
--base03: #6d4745; /* Brighter Grey */
|
||||
--base04: #8b5d57; /* Bright Grey */
|
||||
--base05: #a87569; /* White */
|
||||
--base06: #c58d7b; /* Brighter White */
|
||||
--base07: #e3a68c; /* Bright White */
|
||||
--base08: #c24f57; /* Red */
|
||||
--base09: #a63650; /* Orange */
|
||||
--base0A: #f28171; /* Yellow */
|
||||
--base0B: #806c61; /* Green */
|
||||
--base0C: #6b6566; /* Cyan */
|
||||
--base0D: #684c59; /* Blue */
|
||||
--base0E: #a63650; /* Purple */
|
||||
--base0F: #893f45; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1c1213 !important;
|
||||
background-color: #c58d7b !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a87569;
|
||||
background: #1c1213;
|
||||
}
|
||||
.hljs-keyword { color: #a63650; }
|
||||
.hljs-string { color: #806c61; }
|
||||
.hljs-number { color: #a63650; }
|
||||
.hljs-comment { color: #6d4745; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #303446;
|
||||
--background-base-lowest: #303446 !important;
|
||||
--background-base-lower: #292c3c !important;
|
||||
--background-surface-high: #303446 !important;
|
||||
--chat-background: #303446;
|
||||
--home-background: #303446;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #292c3c !important;
|
||||
--background-surface-highest: #414559 !important;
|
||||
--background-accent: #414559 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c6d0f5;
|
||||
--text-strong: #c6d0f5 !important;
|
||||
--text-muted: #626880 !important;
|
||||
--text-subtle: #51576d;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f2d5cf !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f2d5cf;
|
||||
--control-brand-foreground: #f2d5cf;
|
||||
--text-link: #8caaee !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a6d189;
|
||||
--status-warning: #e5c890;
|
||||
--status-danger: #e78284;
|
||||
--icon-voice-muted: #e78284;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f2d5cf;
|
||||
--scrollbar-auto-thumb: #f2d5cf;
|
||||
:root {
|
||||
--base00: #303446; /* Black */
|
||||
--base01: #292c3c; /* Bright Black */
|
||||
--base02: #414559; /* Grey */
|
||||
--base03: #51576d; /* Brighter Grey */
|
||||
--base04: #626880; /* Bright Grey */
|
||||
--base05: #c6d0f5; /* White */
|
||||
--base06: #f2d5cf; /* Brighter White */
|
||||
--base07: #babbf1; /* Bright White */
|
||||
--base08: #e78284; /* Red */
|
||||
--base09: #ef9f76; /* Orange */
|
||||
--base0A: #e5c890; /* Yellow */
|
||||
--base0B: #a6d189; /* Green */
|
||||
--base0C: #81c8be; /* Cyan */
|
||||
--base0D: #8caaee; /* Blue */
|
||||
--base0E: #ca9ee6; /* Purple */
|
||||
--base0F: #eebebe; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #303446 !important;
|
||||
background-color: #f2d5cf !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c6d0f5;
|
||||
background: #303446;
|
||||
}
|
||||
.hljs-keyword { color: #ca9ee6; }
|
||||
.hljs-string { color: #a6d189; }
|
||||
.hljs-number { color: #ef9f76; }
|
||||
.hljs-comment { color: #51576d; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #eff1f5;
|
||||
--background-base-lowest: #eff1f5 !important;
|
||||
--background-base-lower: #e6e9ef !important;
|
||||
--background-surface-high: #eff1f5 !important;
|
||||
--chat-background: #eff1f5;
|
||||
--home-background: #eff1f5;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e6e9ef !important;
|
||||
--background-surface-highest: #ccd0da !important;
|
||||
--background-accent: #ccd0da !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #4c4f69;
|
||||
--text-strong: #4c4f69 !important;
|
||||
--text-muted: #acb0be !important;
|
||||
--text-subtle: #bcc0cc;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dc8a78 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dc8a78;
|
||||
--control-brand-foreground: #dc8a78;
|
||||
--text-link: #1e66f5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #40a02b;
|
||||
--status-warning: #df8e1d;
|
||||
--status-danger: #d20f39;
|
||||
--icon-voice-muted: #d20f39;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dc8a78;
|
||||
--scrollbar-auto-thumb: #dc8a78;
|
||||
:root {
|
||||
--base00: #eff1f5; /* Black */
|
||||
--base01: #e6e9ef; /* Bright Black */
|
||||
--base02: #ccd0da; /* Grey */
|
||||
--base03: #bcc0cc; /* Brighter Grey */
|
||||
--base04: #acb0be; /* Bright Grey */
|
||||
--base05: #4c4f69; /* White */
|
||||
--base06: #dc8a78; /* Brighter White */
|
||||
--base07: #7287fd; /* Bright White */
|
||||
--base08: #d20f39; /* Red */
|
||||
--base09: #fe640b; /* Orange */
|
||||
--base0A: #df8e1d; /* Yellow */
|
||||
--base0B: #40a02b; /* Green */
|
||||
--base0C: #179299; /* Cyan */
|
||||
--base0D: #1e66f5; /* Blue */
|
||||
--base0E: #8839ef; /* Purple */
|
||||
--base0F: #dd7878; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #eff1f5 !important;
|
||||
background-color: #dc8a78 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #4c4f69;
|
||||
background: #eff1f5;
|
||||
}
|
||||
.hljs-keyword { color: #8839ef; }
|
||||
.hljs-string { color: #40a02b; }
|
||||
.hljs-number { color: #fe640b; }
|
||||
.hljs-comment { color: #bcc0cc; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #24273a;
|
||||
--background-base-lowest: #24273a !important;
|
||||
--background-base-lower: #1e2030 !important;
|
||||
--background-surface-high: #24273a !important;
|
||||
--chat-background: #24273a;
|
||||
--home-background: #24273a;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #1e2030 !important;
|
||||
--background-surface-highest: #363a4f !important;
|
||||
--background-accent: #363a4f !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #cad3f5;
|
||||
--text-strong: #cad3f5 !important;
|
||||
--text-muted: #5b6078 !important;
|
||||
--text-subtle: #494d64;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f4dbd6 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f4dbd6;
|
||||
--control-brand-foreground: #f4dbd6;
|
||||
--text-link: #8aadf4 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a6da95;
|
||||
--status-warning: #eed49f;
|
||||
--status-danger: #ed8796;
|
||||
--icon-voice-muted: #ed8796;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f4dbd6;
|
||||
--scrollbar-auto-thumb: #f4dbd6;
|
||||
:root {
|
||||
--base00: #24273a; /* Black */
|
||||
--base01: #1e2030; /* Bright Black */
|
||||
--base02: #363a4f; /* Grey */
|
||||
--base03: #494d64; /* Brighter Grey */
|
||||
--base04: #5b6078; /* Bright Grey */
|
||||
--base05: #cad3f5; /* White */
|
||||
--base06: #f4dbd6; /* Brighter White */
|
||||
--base07: #b7bdf8; /* Bright White */
|
||||
--base08: #ed8796; /* Red */
|
||||
--base09: #f5a97f; /* Orange */
|
||||
--base0A: #eed49f; /* Yellow */
|
||||
--base0B: #a6da95; /* Green */
|
||||
--base0C: #8bd5ca; /* Cyan */
|
||||
--base0D: #8aadf4; /* Blue */
|
||||
--base0E: #c6a0f6; /* Purple */
|
||||
--base0F: #f0c6c6; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #24273a !important;
|
||||
background-color: #f4dbd6 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #cad3f5;
|
||||
background: #24273a;
|
||||
}
|
||||
.hljs-keyword { color: #c6a0f6; }
|
||||
.hljs-string { color: #a6da95; }
|
||||
.hljs-number { color: #f5a97f; }
|
||||
.hljs-comment { color: #494d64; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1e1e2e;
|
||||
--background-base-lowest: #1e1e2e !important;
|
||||
--background-base-lower: #181825 !important;
|
||||
--background-surface-high: #1e1e2e !important;
|
||||
--chat-background: #1e1e2e;
|
||||
--home-background: #1e1e2e;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #181825 !important;
|
||||
--background-surface-highest: #313244 !important;
|
||||
--background-accent: #313244 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #cdd6f4;
|
||||
--text-strong: #cdd6f4 !important;
|
||||
--text-muted: #585b70 !important;
|
||||
--text-subtle: #45475a;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f5e0dc !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f5e0dc;
|
||||
--control-brand-foreground: #f5e0dc;
|
||||
--text-link: #89b4fa !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a6e3a1;
|
||||
--status-warning: #f9e2af;
|
||||
--status-danger: #f38ba8;
|
||||
--icon-voice-muted: #f38ba8;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f5e0dc;
|
||||
--scrollbar-auto-thumb: #f5e0dc;
|
||||
:root {
|
||||
--base00: #1e1e2e; /* Black */
|
||||
--base01: #181825; /* Bright Black */
|
||||
--base02: #313244; /* Grey */
|
||||
--base03: #45475a; /* Brighter Grey */
|
||||
--base04: #585b70; /* Bright Grey */
|
||||
--base05: #cdd6f4; /* White */
|
||||
--base06: #f5e0dc; /* Brighter White */
|
||||
--base07: #b4befe; /* Bright White */
|
||||
--base08: #f38ba8; /* Red */
|
||||
--base09: #fab387; /* Orange */
|
||||
--base0A: #f9e2af; /* Yellow */
|
||||
--base0B: #a6e3a1; /* Green */
|
||||
--base0C: #94e2d5; /* Cyan */
|
||||
--base0D: #89b4fa; /* Blue */
|
||||
--base0E: #cba6f7; /* Purple */
|
||||
--base0F: #f2cdcd; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1e1e2e !important;
|
||||
background-color: #f5e0dc !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #cdd6f4;
|
||||
background: #1e1e2e;
|
||||
}
|
||||
.hljs-keyword { color: #cba6f7; }
|
||||
.hljs-string { color: #a6e3a1; }
|
||||
.hljs-number { color: #fab387; }
|
||||
.hljs-comment { color: #45475a; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #151515;
|
||||
--background-base-lowest: #151515 !important;
|
||||
--background-base-lower: #202020 !important;
|
||||
--background-surface-high: #151515 !important;
|
||||
--chat-background: #151515;
|
||||
--home-background: #151515;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #202020 !important;
|
||||
--background-surface-highest: #303030 !important;
|
||||
--background-accent: #303030 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d0d0d0;
|
||||
--text-strong: #d0d0d0 !important;
|
||||
--text-muted: #b0b0b0 !important;
|
||||
--text-subtle: #505050;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e0e0e0 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e0e0e0;
|
||||
--control-brand-foreground: #e0e0e0;
|
||||
--text-link: #6fc2ef !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #acc267;
|
||||
--status-warning: #ddb26f;
|
||||
--status-danger: #fb9fb1;
|
||||
--icon-voice-muted: #fb9fb1;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e0e0e0;
|
||||
--scrollbar-auto-thumb: #e0e0e0;
|
||||
:root {
|
||||
--base00: #151515; /* Black */
|
||||
--base01: #202020; /* Bright Black */
|
||||
--base02: #303030; /* Grey */
|
||||
--base03: #505050; /* Brighter Grey */
|
||||
--base04: #b0b0b0; /* Bright Grey */
|
||||
--base05: #d0d0d0; /* White */
|
||||
--base06: #e0e0e0; /* Brighter White */
|
||||
--base07: #f5f5f5; /* Bright White */
|
||||
--base08: #fb9fb1; /* Red */
|
||||
--base09: #eda987; /* Orange */
|
||||
--base0A: #ddb26f; /* Yellow */
|
||||
--base0B: #acc267; /* Green */
|
||||
--base0C: #12cfc0; /* Cyan */
|
||||
--base0D: #6fc2ef; /* Blue */
|
||||
--base0E: #e1a3ee; /* Purple */
|
||||
--base0F: #deaf8f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #151515 !important;
|
||||
background-color: #e0e0e0 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d0d0d0;
|
||||
background: #151515;
|
||||
}
|
||||
.hljs-keyword { color: #e1a3ee; }
|
||||
.hljs-string { color: #acc267; }
|
||||
.hljs-number { color: #eda987; }
|
||||
.hljs-comment { color: #505050; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #0f0b05;
|
||||
--background-base-lowest: #0f0b05 !important;
|
||||
--background-base-lower: #231b0e !important;
|
||||
--background-surface-high: #0f0b05 !important;
|
||||
--chat-background: #0f0b05;
|
||||
--home-background: #0f0b05;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #231b0e !important;
|
||||
--background-surface-highest: #2a2012 !important;
|
||||
--background-accent: #2a2012 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c3a983;
|
||||
--text-strong: #c3a983 !important;
|
||||
--text-muted: #a88c62 !important;
|
||||
--text-subtle: #57462c;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dec8a7 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dec8a7;
|
||||
--control-brand-foreground: #dec8a7;
|
||||
--text-link: #c3a983 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #dec8a7;
|
||||
--status-warning: #dec8a7;
|
||||
--status-danger: #a88c62;
|
||||
--icon-voice-muted: #a88c62;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dec8a7;
|
||||
--scrollbar-auto-thumb: #dec8a7;
|
||||
:root {
|
||||
--base00: #0f0b05; /* Black */
|
||||
--base01: #231b0e; /* Bright Black */
|
||||
--base02: #2a2012; /* Grey */
|
||||
--base03: #57462c; /* Brighter Grey */
|
||||
--base04: #a88c62; /* Bright Grey */
|
||||
--base05: #c3a983; /* White */
|
||||
--base06: #dec8a7; /* Brighter White */
|
||||
--base07: #231b0e; /* Bright White */
|
||||
--base08: #a88c62; /* Red */
|
||||
--base09: #dec8a7; /* Orange */
|
||||
--base0A: #dec8a7; /* Yellow */
|
||||
--base0B: #dec8a7; /* Green */
|
||||
--base0C: #dec8a7; /* Cyan */
|
||||
--base0D: #c3a983; /* Blue */
|
||||
--base0E: #a88c62; /* Purple */
|
||||
--base0F: #876e48; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #0f0b05 !important;
|
||||
background-color: #dec8a7 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c3a983;
|
||||
background: #0f0b05;
|
||||
}
|
||||
.hljs-keyword { color: #a88c62; }
|
||||
.hljs-string { color: #dec8a7; }
|
||||
.hljs-number { color: #dec8a7; }
|
||||
.hljs-comment { color: #57462c; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #cabda0;
|
||||
--background-base-lowest: #cabda0 !important;
|
||||
--background-base-lower: #bcad8c !important;
|
||||
--background-surface-high: #cabda0 !important;
|
||||
--chat-background: #cabda0;
|
||||
--home-background: #cabda0;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #bcad8c !important;
|
||||
--background-surface-highest: #af9f7d !important;
|
||||
--background-accent: #af9f7d !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #382e1b;
|
||||
--text-strong: #382e1b !important;
|
||||
--text-muted: #110e06 !important;
|
||||
--text-subtle: #645538;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #4b3e26 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #4b3e26;
|
||||
--control-brand-foreground: #4b3e26;
|
||||
--text-link: #251e0f !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #110e06;
|
||||
--status-warning: #110e06;
|
||||
--status-danger: #382e1b;
|
||||
--icon-voice-muted: #382e1b;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #4b3e26;
|
||||
--scrollbar-auto-thumb: #4b3e26;
|
||||
:root {
|
||||
--base00: #cabda0; /* Black */
|
||||
--base01: #bcad8c; /* Bright Black */
|
||||
--base02: #af9f7d; /* Grey */
|
||||
--base03: #645538; /* Brighter Grey */
|
||||
--base04: #110e06; /* Bright Grey */
|
||||
--base05: #382e1b; /* White */
|
||||
--base06: #4b3e26; /* Brighter White */
|
||||
--base07: #bcad8c; /* Bright White */
|
||||
--base08: #382e1b; /* Red */
|
||||
--base09: #110e06; /* Orange */
|
||||
--base0A: #110e06; /* Yellow */
|
||||
--base0B: #110e06; /* Green */
|
||||
--base0C: #110e06; /* Cyan */
|
||||
--base0D: #251e0f; /* Blue */
|
||||
--base0E: #382e1b; /* Purple */
|
||||
--base0F: #4b3e26; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #cabda0 !important;
|
||||
background-color: #4b3e26 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #382e1b;
|
||||
background: #cabda0;
|
||||
}
|
||||
.hljs-keyword { color: #382e1b; }
|
||||
.hljs-string { color: #110e06; }
|
||||
.hljs-number { color: #110e06; }
|
||||
.hljs-comment { color: #645538; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #e8f0ea;
|
||||
--background-base-lowest: #e8f0ea !important;
|
||||
--background-base-lower: #d1e0d7 !important;
|
||||
--background-surface-high: #e8f0ea !important;
|
||||
--chat-background: #e8f0ea;
|
||||
--home-background: #e8f0ea;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #d1e0d7 !important;
|
||||
--background-surface-highest: #b9d0c3 !important;
|
||||
--background-accent: #b9d0c3 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #364c40;
|
||||
--text-strong: #364c40 !important;
|
||||
--text-muted: #4b5a51 !important;
|
||||
--text-subtle: #8a9a91;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #2a3b32 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #2a3b32;
|
||||
--control-brand-foreground: #2a3b32;
|
||||
--text-link: #522398 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #009b3a;
|
||||
--status-warning: #968400;
|
||||
--status-danger: #c60c30;
|
||||
--icon-voice-muted: #c60c30;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #2a3b32;
|
||||
--scrollbar-auto-thumb: #2a3b32;
|
||||
:root {
|
||||
--base00: #e8f0ea; /* Black */
|
||||
--base01: #d1e0d7; /* Bright Black */
|
||||
--base02: #b9d0c3; /* Grey */
|
||||
--base03: #8a9a91; /* Brighter Grey */
|
||||
--base04: #4b5a51; /* Bright Grey */
|
||||
--base05: #364c40; /* White */
|
||||
--base06: #2a3b32; /* Brighter White */
|
||||
--base07: #1e2a24; /* Bright White */
|
||||
--base08: #c60c30; /* Red */
|
||||
--base09: #f9461c; /* Orange */
|
||||
--base0A: #968400; /* Yellow */
|
||||
--base0B: #009b3a; /* Green */
|
||||
--base0C: #00a1de; /* Cyan */
|
||||
--base0D: #522398; /* Blue */
|
||||
--base0E: #e27ea6; /* Purple */
|
||||
--base0F: #62361b; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #e8f0ea !important;
|
||||
background-color: #2a3b32 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #364c40;
|
||||
background: #e8f0ea;
|
||||
}
|
||||
.hljs-keyword { color: #e27ea6; }
|
||||
.hljs-string { color: #009b3a; }
|
||||
.hljs-number { color: #f9461c; }
|
||||
.hljs-comment { color: #8a9a91; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1e2a24;
|
||||
--background-base-lowest: #1e2a24 !important;
|
||||
--background-base-lower: #2a3b32 !important;
|
||||
--background-surface-high: #1e2a24 !important;
|
||||
--chat-background: #1e2a24;
|
||||
--home-background: #1e2a24;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #2a3b32 !important;
|
||||
--background-surface-highest: #364c40 !important;
|
||||
--background-accent: #364c40 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a7b8af;
|
||||
--text-strong: #a7b8af !important;
|
||||
--text-muted: #8a9a91 !important;
|
||||
--text-subtle: #5f7368;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #c1cdc7 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #c1cdc7;
|
||||
--control-brand-foreground: #c1cdc7;
|
||||
--text-link: #522398 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #009b3a;
|
||||
--status-warning: #f9e300;
|
||||
--status-danger: #c60c30;
|
||||
--icon-voice-muted: #c60c30;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #c1cdc7;
|
||||
--scrollbar-auto-thumb: #c1cdc7;
|
||||
:root {
|
||||
--base00: #1e2a24; /* Black */
|
||||
--base01: #2a3b32; /* Bright Black */
|
||||
--base02: #364c40; /* Grey */
|
||||
--base03: #5f7368; /* Brighter Grey */
|
||||
--base04: #8a9a91; /* Bright Grey */
|
||||
--base05: #a7b8af; /* White */
|
||||
--base06: #c1cdc7; /* Brighter White */
|
||||
--base07: #dbe3de; /* Bright White */
|
||||
--base08: #c60c30; /* Red */
|
||||
--base09: #f9461c; /* Orange */
|
||||
--base0A: #f9e300; /* Yellow */
|
||||
--base0B: #009b3a; /* Green */
|
||||
--base0C: #00a1de; /* Cyan */
|
||||
--base0D: #522398; /* Blue */
|
||||
--base0E: #e27ea6; /* Purple */
|
||||
--base0F: #62361b; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1e2a24 !important;
|
||||
background-color: #c1cdc7 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a7b8af;
|
||||
background: #1e2a24;
|
||||
}
|
||||
.hljs-keyword { color: #e27ea6; }
|
||||
.hljs-string { color: #009b3a; }
|
||||
.hljs-number { color: #f9461c; }
|
||||
.hljs-comment { color: #5f7368; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #ffffff;
|
||||
--background-base-lowest: #ffffff !important;
|
||||
--background-base-lower: #e0e0e0 !important;
|
||||
--background-surface-high: #ffffff !important;
|
||||
--chat-background: #ffffff;
|
||||
--home-background: #ffffff;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e0e0e0 !important;
|
||||
--background-surface-highest: #d6d6d6 !important;
|
||||
--background-accent: #d6d6d6 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #4a4035;
|
||||
--text-strong: #4a4035 !important;
|
||||
--text-muted: #918072 !important;
|
||||
--text-subtle: #80766e;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #2f2f35 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #2f2f35;
|
||||
--control-brand-foreground: #2f2f35;
|
||||
--text-link: #815c94 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #428675;
|
||||
--status-warning: #d6a01d;
|
||||
--status-danger: #c04851;
|
||||
--icon-voice-muted: #c04851;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #2f2f35;
|
||||
--scrollbar-auto-thumb: #2f2f35;
|
||||
:root {
|
||||
--base00: #ffffff; /* Black */
|
||||
--base01: #e0e0e0; /* Bright Black */
|
||||
--base02: #d6d6d6; /* Grey */
|
||||
--base03: #80766e; /* Brighter Grey */
|
||||
--base04: #918072; /* Bright Grey */
|
||||
--base05: #4a4035; /* White */
|
||||
--base06: #2f2f35; /* Brighter White */
|
||||
--base07: #131124; /* Bright White */
|
||||
--base08: #c04851; /* Red */
|
||||
--base09: #fb8b05; /* Orange */
|
||||
--base0A: #d6a01d; /* Yellow */
|
||||
--base0B: #428675; /* Green */
|
||||
--base0C: #2b73af; /* Cyan */
|
||||
--base0D: #815c94; /* Blue */
|
||||
--base0E: #c08eaf; /* Purple */
|
||||
--base0F: #945833; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #ffffff !important;
|
||||
background-color: #2f2f35 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #4a4035;
|
||||
background: #ffffff;
|
||||
}
|
||||
.hljs-keyword { color: #c08eaf; }
|
||||
.hljs-string { color: #428675; }
|
||||
.hljs-number { color: #fb8b05; }
|
||||
.hljs-comment { color: #80766e; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1d1d1d;
|
||||
--background-base-lowest: #1d1d1d !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #1d1d1d !important;
|
||||
--chat-background: #1d1d1d;
|
||||
--home-background: #1d1d1d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #373737 !important;
|
||||
--background-accent: #373737 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c4cbcf;
|
||||
--text-strong: #c4cbcf !important;
|
||||
--text-muted: #bdaead !important;
|
||||
--text-subtle: #918072;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #eee7f2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #eee7f2;
|
||||
--control-brand-foreground: #eee7f2;
|
||||
--text-link: #81a2a2 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #aeb831;
|
||||
--status-warning: #fbb957;
|
||||
--status-danger: #ed5a56;
|
||||
--icon-voice-muted: #ed5a56;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #eee7f2;
|
||||
--scrollbar-auto-thumb: #eee7f2;
|
||||
:root {
|
||||
--base00: #1d1d1d; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #373737; /* Grey */
|
||||
--base03: #918072; /* Brighter Grey */
|
||||
--base04: #bdaead; /* Bright Grey */
|
||||
--base05: #c4cbcf; /* White */
|
||||
--base06: #eee7f2; /* Brighter White */
|
||||
--base07: #fffef9; /* Bright White */
|
||||
--base08: #ed5a56; /* Red */
|
||||
--base09: #fc8c23; /* Orange */
|
||||
--base0A: #fbb957; /* Yellow */
|
||||
--base0B: #aeb831; /* Green */
|
||||
--base0C: #88b68d; /* Cyan */
|
||||
--base0D: #81a2a2; /* Blue */
|
||||
--base0E: #cf8997; /* Purple */
|
||||
--base0F: #cd6227; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1d1d1d !important;
|
||||
background-color: #eee7f2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c4cbcf;
|
||||
background: #1d1d1d;
|
||||
}
|
||||
.hljs-keyword { color: #cf8997; }
|
||||
.hljs-string { color: #aeb831; }
|
||||
.hljs-number { color: #fc8c23; }
|
||||
.hljs-comment { color: #918072; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1d1d1d;
|
||||
--background-base-lowest: #1d1d1d !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #1d1d1d !important;
|
||||
--chat-background: #1d1d1d;
|
||||
--home-background: #1d1d1d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #373737 !important;
|
||||
--background-accent: #373737 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c4cbcf;
|
||||
--text-strong: #c4cbcf !important;
|
||||
--text-muted: #bdaead !important;
|
||||
--text-subtle: #918072;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #eee7f2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #eee7f2;
|
||||
--control-brand-foreground: #eee7f2;
|
||||
--text-link: #839ec9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #8ca07b;
|
||||
--status-warning: #e5bc84;
|
||||
--status-danger: #c06061;
|
||||
--icon-voice-muted: #c06061;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #eee7f2;
|
||||
--scrollbar-auto-thumb: #eee7f2;
|
||||
:root {
|
||||
--base00: #1d1d1d; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #373737; /* Grey */
|
||||
--base03: #918072; /* Brighter Grey */
|
||||
--base04: #bdaead; /* Bright Grey */
|
||||
--base05: #c4cbcf; /* White */
|
||||
--base06: #eee7f2; /* Brighter White */
|
||||
--base07: #fffef9; /* Bright White */
|
||||
--base08: #c06061; /* Red */
|
||||
--base09: #ff937f; /* Orange */
|
||||
--base0A: #e5bc84; /* Yellow */
|
||||
--base0B: #8ca07b; /* Green */
|
||||
--base0C: #5e8c9b; /* Cyan */
|
||||
--base0D: #839ec9; /* Blue */
|
||||
--base0E: #98a1d8; /* Purple */
|
||||
--base0F: #d9cdb4; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1d1d1d !important;
|
||||
background-color: #eee7f2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c4cbcf;
|
||||
background: #1d1d1d;
|
||||
}
|
||||
.hljs-keyword { color: #98a1d8; }
|
||||
.hljs-string { color: #8ca07b; }
|
||||
.hljs-number { color: #ff937f; }
|
||||
.hljs-comment { color: #918072; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1d1d1d;
|
||||
--background-base-lowest: #1d1d1d !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #1d1d1d !important;
|
||||
--chat-background: #1d1d1d;
|
||||
--home-background: #1d1d1d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #373737 !important;
|
||||
--background-accent: #373737 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c4cbcf;
|
||||
--text-strong: #c4cbcf !important;
|
||||
--text-muted: #bdaead !important;
|
||||
--text-subtle: #918072;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #eee7f2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #eee7f2;
|
||||
--control-brand-foreground: #eee7f2;
|
||||
--text-link: #8fb2c9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #b2cf87;
|
||||
--status-warning: #f4ce69;
|
||||
--status-danger: #f07c82;
|
||||
--icon-voice-muted: #f07c82;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #eee7f2;
|
||||
--scrollbar-auto-thumb: #eee7f2;
|
||||
:root {
|
||||
--base00: #1d1d1d; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #373737; /* Grey */
|
||||
--base03: #918072; /* Brighter Grey */
|
||||
--base04: #bdaead; /* Bright Grey */
|
||||
--base05: #c4cbcf; /* White */
|
||||
--base06: #eee7f2; /* Brighter White */
|
||||
--base07: #fffef9; /* Bright White */
|
||||
--base08: #f07c82; /* Red */
|
||||
--base09: #f4a83a; /* Orange */
|
||||
--base0A: #f4ce69; /* Yellow */
|
||||
--base0B: #b2cf87; /* Green */
|
||||
--base0C: #b0d5df; /* Cyan */
|
||||
--base0D: #8fb2c9; /* Blue */
|
||||
--base0E: #be9db9; /* Purple */
|
||||
--base0F: #b89485; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1d1d1d !important;
|
||||
background-color: #eee7f2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c4cbcf;
|
||||
background: #1d1d1d;
|
||||
}
|
||||
.hljs-keyword { color: #be9db9; }
|
||||
.hljs-string { color: #b2cf87; }
|
||||
.hljs-number { color: #f4a83a; }
|
||||
.hljs-comment { color: #918072; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #191919;
|
||||
--background-base-lowest: #191919 !important;
|
||||
--background-base-lower: #202020 !important;
|
||||
--background-surface-high: #191919 !important;
|
||||
--chat-background: #191919;
|
||||
--home-background: #191919;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #202020 !important;
|
||||
--background-surface-highest: #303030 !important;
|
||||
--background-accent: #303030 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a7a7a7;
|
||||
--text-strong: #a7a7a7 !important;
|
||||
--text-muted: #505050 !important;
|
||||
--text-subtle: #5f5a60;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #808080 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #808080;
|
||||
--control-brand-foreground: #808080;
|
||||
--text-link: #639ee4 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #84b97c;
|
||||
--status-warning: #c3ba63;
|
||||
--status-danger: #dc657d;
|
||||
--icon-voice-muted: #dc657d;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #808080;
|
||||
--scrollbar-auto-thumb: #808080;
|
||||
:root {
|
||||
--base00: #191919; /* Black */
|
||||
--base01: #202020; /* Bright Black */
|
||||
--base02: #303030; /* Grey */
|
||||
--base03: #5f5a60; /* Brighter Grey */
|
||||
--base04: #505050; /* Bright Grey */
|
||||
--base05: #a7a7a7; /* White */
|
||||
--base06: #808080; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #dc657d; /* Red */
|
||||
--base09: #4bb1a7; /* Orange */
|
||||
--base0A: #c3ba63; /* Yellow */
|
||||
--base0B: #84b97c; /* Green */
|
||||
--base0C: #4bb1a7; /* Cyan */
|
||||
--base0D: #639ee4; /* Blue */
|
||||
--base0E: #b888e2; /* Purple */
|
||||
--base0F: #b888e2; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #191919 !important;
|
||||
background-color: #808080 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a7a7a7;
|
||||
background: #191919;
|
||||
}
|
||||
.hljs-keyword { color: #b888e2; }
|
||||
.hljs-string { color: #84b97c; }
|
||||
.hljs-number { color: #4bb1a7; }
|
||||
.hljs-comment { color: #5f5a60; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #151515;
|
||||
--background-base-lowest: #151515 !important;
|
||||
--background-base-lower: #202020 !important;
|
||||
--background-surface-high: #151515 !important;
|
||||
--chat-background: #151515;
|
||||
--home-background: #151515;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #202020 !important;
|
||||
--background-surface-highest: #303030 !important;
|
||||
--background-accent: #303030 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d0d0d0;
|
||||
--text-strong: #d0d0d0 !important;
|
||||
--text-muted: #b0b0b0 !important;
|
||||
--text-subtle: #505050;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e0e0e0 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e0e0e0;
|
||||
--control-brand-foreground: #e0e0e0;
|
||||
--text-link: #6a9fb5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #90a959;
|
||||
--status-warning: #f4bf75;
|
||||
--status-danger: #ac4142;
|
||||
--icon-voice-muted: #ac4142;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e0e0e0;
|
||||
--scrollbar-auto-thumb: #e0e0e0;
|
||||
:root {
|
||||
--base00: #151515; /* Black */
|
||||
--base01: #202020; /* Bright Black */
|
||||
--base02: #303030; /* Grey */
|
||||
--base03: #505050; /* Brighter Grey */
|
||||
--base04: #b0b0b0; /* Bright Grey */
|
||||
--base05: #d0d0d0; /* White */
|
||||
--base06: #e0e0e0; /* Brighter White */
|
||||
--base07: #f5f5f5; /* Bright White */
|
||||
--base08: #ac4142; /* Red */
|
||||
--base09: #d28445; /* Orange */
|
||||
--base0A: #f4bf75; /* Yellow */
|
||||
--base0B: #90a959; /* Green */
|
||||
--base0C: #75b5aa; /* Cyan */
|
||||
--base0D: #6a9fb5; /* Blue */
|
||||
--base0E: #aa759f; /* Purple */
|
||||
--base0F: #8f5536; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #151515 !important;
|
||||
background-color: #e0e0e0 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d0d0d0;
|
||||
background: #151515;
|
||||
}
|
||||
.hljs-keyword { color: #aa759f; }
|
||||
.hljs-string { color: #90a959; }
|
||||
.hljs-number { color: #d28445; }
|
||||
.hljs-comment { color: #505050; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f5f5f5;
|
||||
--background-base-lowest: #f5f5f5 !important;
|
||||
--background-base-lower: #e0e0e0 !important;
|
||||
--background-surface-high: #f5f5f5 !important;
|
||||
--chat-background: #f5f5f5;
|
||||
--home-background: #f5f5f5;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e0e0e0 !important;
|
||||
--background-surface-highest: #d0d0d0 !important;
|
||||
--background-accent: #d0d0d0 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #303030;
|
||||
--text-strong: #303030 !important;
|
||||
--text-muted: #505050 !important;
|
||||
--text-subtle: #b0b0b0;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #202020 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #202020;
|
||||
--control-brand-foreground: #202020;
|
||||
--text-link: #6a9fb5 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #90a959;
|
||||
--status-warning: #f4bf75;
|
||||
--status-danger: #ac4142;
|
||||
--icon-voice-muted: #ac4142;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #202020;
|
||||
--scrollbar-auto-thumb: #202020;
|
||||
:root {
|
||||
--base00: #f5f5f5; /* Black */
|
||||
--base01: #e0e0e0; /* Bright Black */
|
||||
--base02: #d0d0d0; /* Grey */
|
||||
--base03: #b0b0b0; /* Brighter Grey */
|
||||
--base04: #505050; /* Bright Grey */
|
||||
--base05: #303030; /* White */
|
||||
--base06: #202020; /* Brighter White */
|
||||
--base07: #151515; /* Bright White */
|
||||
--base08: #ac4142; /* Red */
|
||||
--base09: #d28445; /* Orange */
|
||||
--base0A: #f4bf75; /* Yellow */
|
||||
--base0B: #90a959; /* Green */
|
||||
--base0C: #75b5aa; /* Cyan */
|
||||
--base0D: #6a9fb5; /* Blue */
|
||||
--base0E: #aa759f; /* Purple */
|
||||
--base0F: #8f5536; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f5f5f5 !important;
|
||||
background-color: #202020 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #303030;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.hljs-keyword { color: #aa759f; }
|
||||
.hljs-string { color: #90a959; }
|
||||
.hljs-number { color: #d28445; }
|
||||
.hljs-comment { color: #b0b0b0; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #232c31;
|
||||
--background-base-lowest: #232c31 !important;
|
||||
--background-base-lower: #1c3657 !important;
|
||||
--background-surface-high: #232c31 !important;
|
||||
--chat-background: #232c31;
|
||||
--home-background: #232c31;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #1c3657 !important;
|
||||
--background-surface-highest: #2a343a !important;
|
||||
--background-accent: #2a343a !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #9ea7a6;
|
||||
--text-strong: #9ea7a6 !important;
|
||||
--text-muted: #84898c !important;
|
||||
--text-subtle: #3f4944;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #a7cfa3 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #a7cfa3;
|
||||
--control-brand-foreground: #a7cfa3;
|
||||
--text-link: #484d79 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #237986;
|
||||
--status-warning: #a03b1e;
|
||||
--status-danger: #2a5491;
|
||||
--icon-voice-muted: #2a5491;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #a7cfa3;
|
||||
--scrollbar-auto-thumb: #a7cfa3;
|
||||
:root {
|
||||
--base00: #232c31; /* Black */
|
||||
--base01: #1c3657; /* Bright Black */
|
||||
--base02: #2a343a; /* Grey */
|
||||
--base03: #3f4944; /* Brighter Grey */
|
||||
--base04: #84898c; /* Bright Grey */
|
||||
--base05: #9ea7a6; /* White */
|
||||
--base06: #a7cfa3; /* Brighter White */
|
||||
--base07: #b5d8f6; /* Bright White */
|
||||
--base08: #2a5491; /* Red */
|
||||
--base09: #43820d; /* Orange */
|
||||
--base0A: #a03b1e; /* Yellow */
|
||||
--base0B: #237986; /* Green */
|
||||
--base0C: #b02f30; /* Cyan */
|
||||
--base0D: #484d79; /* Blue */
|
||||
--base0E: #c59820; /* Purple */
|
||||
--base0F: #c98344; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #232c31 !important;
|
||||
background-color: #a7cfa3 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #9ea7a6;
|
||||
background: #232c31;
|
||||
}
|
||||
.hljs-keyword { color: #c59820; }
|
||||
.hljs-string { color: #237986; }
|
||||
.hljs-number { color: #43820d; }
|
||||
.hljs-comment { color: #3f4944; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #111111;
|
||||
--background-base-lowest: #111111 !important;
|
||||
--background-base-lower: #333333 !important;
|
||||
--background-surface-high: #111111 !important;
|
||||
--chat-background: #111111;
|
||||
--home-background: #111111;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #333333 !important;
|
||||
--background-surface-highest: #555555 !important;
|
||||
--background-accent: #555555 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #bbbbbb;
|
||||
--text-strong: #bbbbbb !important;
|
||||
--text-muted: #999999 !important;
|
||||
--text-subtle: #777777;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #dddddd !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #dddddd;
|
||||
--control-brand-foreground: #dddddd;
|
||||
--text-link: #0074d9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #2ecc40;
|
||||
--status-warning: #ffdc00;
|
||||
--status-danger: #ff4136;
|
||||
--icon-voice-muted: #ff4136;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #dddddd;
|
||||
--scrollbar-auto-thumb: #dddddd;
|
||||
:root {
|
||||
--base00: #111111; /* Black */
|
||||
--base01: #333333; /* Bright Black */
|
||||
--base02: #555555; /* Grey */
|
||||
--base03: #777777; /* Brighter Grey */
|
||||
--base04: #999999; /* Bright Grey */
|
||||
--base05: #bbbbbb; /* White */
|
||||
--base06: #dddddd; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #ff4136; /* Red */
|
||||
--base09: #ff851b; /* Orange */
|
||||
--base0A: #ffdc00; /* Yellow */
|
||||
--base0B: #2ecc40; /* Green */
|
||||
--base0C: #7fdbff; /* Cyan */
|
||||
--base0D: #0074d9; /* Blue */
|
||||
--base0E: #b10dc9; /* Purple */
|
||||
--base0F: #85144b; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #111111 !important;
|
||||
background-color: #dddddd !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #bbbbbb;
|
||||
background: #111111;
|
||||
}
|
||||
.hljs-keyword { color: #b10dc9; }
|
||||
.hljs-string { color: #2ecc40; }
|
||||
.hljs-number { color: #ff851b; }
|
||||
.hljs-comment { color: #777777; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #fbf1f2;
|
||||
--background-base-lowest: #fbf1f2 !important;
|
||||
--background-base-lower: #f2f1f4 !important;
|
||||
--background-surface-high: #fbf1f2 !important;
|
||||
--chat-background: #fbf1f2;
|
||||
--home-background: #fbf1f2;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #f2f1f4 !important;
|
||||
--background-surface-highest: #d8d5dd !important;
|
||||
--background-accent: #d8d5dd !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #8b8198;
|
||||
--text-strong: #8b8198 !important;
|
||||
--text-muted: #a59daf !important;
|
||||
--text-subtle: #bfb9c6;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #72677e !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #72677e;
|
||||
--control-brand-foreground: #72677e;
|
||||
--text-link: #7297b9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a3b367;
|
||||
--status-warning: #dcb16c;
|
||||
--status-danger: #d57e85;
|
||||
--icon-voice-muted: #d57e85;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #72677e;
|
||||
--scrollbar-auto-thumb: #72677e;
|
||||
:root {
|
||||
--base00: #fbf1f2; /* Black */
|
||||
--base01: #f2f1f4; /* Bright Black */
|
||||
--base02: #d8d5dd; /* Grey */
|
||||
--base03: #bfb9c6; /* Brighter Grey */
|
||||
--base04: #a59daf; /* Bright Grey */
|
||||
--base05: #8b8198; /* White */
|
||||
--base06: #72677e; /* Brighter White */
|
||||
--base07: #585062; /* Bright White */
|
||||
--base08: #d57e85; /* Red */
|
||||
--base09: #ebb790; /* Orange */
|
||||
--base0A: #dcb16c; /* Yellow */
|
||||
--base0B: #a3b367; /* Green */
|
||||
--base0C: #69a9a7; /* Cyan */
|
||||
--base0D: #7297b9; /* Blue */
|
||||
--base0E: #bb99b4; /* Purple */
|
||||
--base0F: #baa58c; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #fbf1f2 !important;
|
||||
background-color: #72677e !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #8b8198;
|
||||
background: #fbf1f2;
|
||||
}
|
||||
.hljs-keyword { color: #bb99b4; }
|
||||
.hljs-string { color: #a3b367; }
|
||||
.hljs-number { color: #ebb790; }
|
||||
.hljs-comment { color: #bfb9c6; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #ffffff;
|
||||
--background-base-lowest: #ffffff !important;
|
||||
--background-base-lower: #c0c0c0 !important;
|
||||
--background-surface-high: #ffffff !important;
|
||||
--chat-background: #ffffff;
|
||||
--home-background: #ffffff;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #c0c0c0 !important;
|
||||
--background-surface-highest: #c0c0c0 !important;
|
||||
--background-accent: #c0c0c0 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #404040;
|
||||
--text-strong: #404040 !important;
|
||||
--text-muted: #808080 !important;
|
||||
--text-subtle: #808080;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #404040 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #404040;
|
||||
--control-brand-foreground: #404040;
|
||||
--text-link: #0000ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #007400;
|
||||
--status-warning: #826b28;
|
||||
--status-danger: #c41a15;
|
||||
--icon-voice-muted: #c41a15;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #404040;
|
||||
--scrollbar-auto-thumb: #404040;
|
||||
:root {
|
||||
--base00: #ffffff; /* Black */
|
||||
--base01: #c0c0c0; /* Bright Black */
|
||||
--base02: #c0c0c0; /* Grey */
|
||||
--base03: #808080; /* Brighter Grey */
|
||||
--base04: #808080; /* Bright Grey */
|
||||
--base05: #404040; /* White */
|
||||
--base06: #404040; /* Brighter White */
|
||||
--base07: #5e5e5e; /* Bright White */
|
||||
--base08: #c41a15; /* Red */
|
||||
--base09: #eb8500; /* Orange */
|
||||
--base0A: #826b28; /* Yellow */
|
||||
--base0B: #007400; /* Green */
|
||||
--base0C: #318495; /* Cyan */
|
||||
--base0D: #0000ff; /* Blue */
|
||||
--base0E: #a90d91; /* Purple */
|
||||
--base0F: #826b28; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #ffffff !important;
|
||||
background-color: #404040 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #404040;
|
||||
background: #ffffff;
|
||||
}
|
||||
.hljs-keyword { color: #a90d91; }
|
||||
.hljs-string { color: #007400; }
|
||||
.hljs-number { color: #eb8500; }
|
||||
.hljs-comment { color: #808080; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #2b2b2b !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #2b2b2b !important;
|
||||
--background-surface-highest: #383838 !important;
|
||||
--background-accent: #383838 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #dcdccc;
|
||||
--text-strong: #dcdccc !important;
|
||||
--text-muted: #8b8989 !important;
|
||||
--text-subtle: #4f4f4f;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f8f8f8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f8f8f8;
|
||||
--control-brand-foreground: #f8f8f8;
|
||||
--text-link: #4c83ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #61ce3c;
|
||||
--status-warning: #ffff00;
|
||||
--status-danger: #ff0000;
|
||||
--icon-voice-muted: #ff0000;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f8f8f8;
|
||||
--scrollbar-auto-thumb: #f8f8f8;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #2b2b2b; /* Bright Black */
|
||||
--base02: #383838; /* Grey */
|
||||
--base03: #4f4f4f; /* Brighter Grey */
|
||||
--base04: #8b8989; /* Bright Grey */
|
||||
--base05: #dcdccc; /* White */
|
||||
--base06: #f8f8f8; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #ff0000; /* Red */
|
||||
--base09: #ffa500; /* Orange */
|
||||
--base0A: #ffff00; /* Yellow */
|
||||
--base0B: #61ce3c; /* Green */
|
||||
--base0C: #93e0e3; /* Cyan */
|
||||
--base0D: #4c83ff; /* Blue */
|
||||
--base0E: #ff1493; /* Purple */
|
||||
--base0F: #ff8c00; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #f8f8f8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #dcdccc;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #ff1493; }
|
||||
.hljs-string { color: #61ce3c; }
|
||||
.hljs-number { color: #ffa500; }
|
||||
.hljs-comment { color: #4f4f4f; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #585858 !important;
|
||||
--background-accent: #585858 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffffff;
|
||||
--text-strong: #ffffff !important;
|
||||
--text-muted: #c8c8c8 !important;
|
||||
--text-subtle: #888888;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffffff !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffffff;
|
||||
--control-brand-foreground: #ffffff;
|
||||
--text-link: #6bb8ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #98c379;
|
||||
--status-warning: #ff9470;
|
||||
--status-danger: #fa7883;
|
||||
--icon-voice-muted: #fa7883;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffffff;
|
||||
--scrollbar-auto-thumb: #ffffff;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #585858; /* Grey */
|
||||
--base03: #888888; /* Brighter Grey */
|
||||
--base04: #c8c8c8; /* Bright Grey */
|
||||
--base05: #ffffff; /* White */
|
||||
--base06: #ffffff; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #fa7883; /* Red */
|
||||
--base09: #ffc387; /* Orange */
|
||||
--base0A: #ff9470; /* Yellow */
|
||||
--base0B: #98c379; /* Green */
|
||||
--base0C: #8af5ff; /* Cyan */
|
||||
--base0D: #6bb8ff; /* Blue */
|
||||
--base0E: #e799ff; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #ffffff !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffffff;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #e799ff; }
|
||||
.hljs-string { color: #98c379; }
|
||||
.hljs-number { color: #ffc387; }
|
||||
.hljs-comment { color: #888888; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #181818;
|
||||
--background-base-lowest: #181818 !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #181818 !important;
|
||||
--chat-background: #181818;
|
||||
--home-background: #181818;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #585858 !important;
|
||||
--background-accent: #585858 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffffff;
|
||||
--text-strong: #ffffff !important;
|
||||
--text-muted: #c8c8c8 !important;
|
||||
--text-subtle: #888888;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffffff !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffffff;
|
||||
--control-brand-foreground: #ffffff;
|
||||
--text-link: #6bb8ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #98c379;
|
||||
--status-warning: #ff9470;
|
||||
--status-danger: #fa7883;
|
||||
--icon-voice-muted: #fa7883;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffffff;
|
||||
--scrollbar-auto-thumb: #ffffff;
|
||||
:root {
|
||||
--base00: #181818; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #585858; /* Grey */
|
||||
--base03: #888888; /* Brighter Grey */
|
||||
--base04: #c8c8c8; /* Bright Grey */
|
||||
--base05: #ffffff; /* White */
|
||||
--base06: #ffffff; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #fa7883; /* Red */
|
||||
--base09: #ffc387; /* Orange */
|
||||
--base0A: #ff9470; /* Yellow */
|
||||
--base0B: #98c379; /* Green */
|
||||
--base0C: #8af5ff; /* Cyan */
|
||||
--base0D: #6bb8ff; /* Blue */
|
||||
--base0E: #e799ff; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #181818 !important;
|
||||
background-color: #ffffff !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffffff;
|
||||
background: #181818;
|
||||
}
|
||||
.hljs-keyword { color: #e799ff; }
|
||||
.hljs-string { color: #98c379; }
|
||||
.hljs-number { color: #ffc387; }
|
||||
.hljs-comment { color: #888888; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #171726;
|
||||
--background-base-lowest: #171726 !important;
|
||||
--background-base-lower: #22273d !important;
|
||||
--background-surface-high: #171726 !important;
|
||||
--chat-background: #171726;
|
||||
--home-background: #171726;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #22273d !important;
|
||||
--background-surface-highest: #525866 !important;
|
||||
--background-accent: #525866 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffffff;
|
||||
--text-strong: #ffffff !important;
|
||||
--text-muted: #c8c8c8 !important;
|
||||
--text-subtle: #878d96;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffffff !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffffff;
|
||||
--control-brand-foreground: #ffffff;
|
||||
--text-link: #6bb8ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #98c379;
|
||||
--status-warning: #ff9470;
|
||||
--status-danger: #fa7883;
|
||||
--icon-voice-muted: #fa7883;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffffff;
|
||||
--scrollbar-auto-thumb: #ffffff;
|
||||
:root {
|
||||
--base00: #171726; /* Black */
|
||||
--base01: #22273d; /* Bright Black */
|
||||
--base02: #525866; /* Grey */
|
||||
--base03: #878d96; /* Brighter Grey */
|
||||
--base04: #c8c8c8; /* Bright Grey */
|
||||
--base05: #ffffff; /* White */
|
||||
--base06: #ffffff; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #fa7883; /* Red */
|
||||
--base09: #ffc387; /* Orange */
|
||||
--base0A: #ff9470; /* Yellow */
|
||||
--base0B: #98c379; /* Green */
|
||||
--base0C: #8af5ff; /* Cyan */
|
||||
--base0D: #6bb8ff; /* Blue */
|
||||
--base0E: #e799ff; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #171726 !important;
|
||||
background-color: #ffffff !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffffff;
|
||||
background: #171726;
|
||||
}
|
||||
.hljs-keyword { color: #e799ff; }
|
||||
.hljs-string { color: #98c379; }
|
||||
.hljs-number { color: #ffc387; }
|
||||
.hljs-comment { color: #878d96; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #faf0dc;
|
||||
--background-base-lowest: #faf0dc !important;
|
||||
--background-base-lower: #c8c8c8 !important;
|
||||
--background-surface-high: #faf0dc !important;
|
||||
--chat-background: #faf0dc;
|
||||
--home-background: #faf0dc;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #c8c8c8 !important;
|
||||
--background-surface-highest: #888888 !important;
|
||||
--background-accent: #888888 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #181818;
|
||||
--text-strong: #181818 !important;
|
||||
--text-muted: #282828 !important;
|
||||
--text-subtle: #585858;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #000000 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #000000;
|
||||
--control-brand-foreground: #000000;
|
||||
--text-link: #5890f8 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #76a85d;
|
||||
--status-warning: #b3684f;
|
||||
--status-danger: #de5d6e;
|
||||
--icon-voice-muted: #de5d6e;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #000000;
|
||||
--scrollbar-auto-thumb: #000000;
|
||||
:root {
|
||||
--base00: #faf0dc; /* Black */
|
||||
--base01: #c8c8c8; /* Bright Black */
|
||||
--base02: #888888; /* Grey */
|
||||
--base03: #585858; /* Brighter Grey */
|
||||
--base04: #282828; /* Bright Grey */
|
||||
--base05: #181818; /* White */
|
||||
--base06: #000000; /* Brighter White */
|
||||
--base07: #000000; /* Bright White */
|
||||
--base08: #de5d6e; /* Red */
|
||||
--base09: #ff9470; /* Orange */
|
||||
--base0A: #b3684f; /* Yellow */
|
||||
--base0B: #76a85d; /* Green */
|
||||
--base0C: #64b5a7; /* Cyan */
|
||||
--base0D: #5890f8; /* Blue */
|
||||
--base0E: #c173d1; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #faf0dc !important;
|
||||
background-color: #000000 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #181818;
|
||||
background: #faf0dc;
|
||||
}
|
||||
.hljs-keyword { color: #c173d1; }
|
||||
.hljs-string { color: #76a85d; }
|
||||
.hljs-number { color: #ff9470; }
|
||||
.hljs-comment { color: #585858; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #22273d;
|
||||
--background-base-lowest: #22273d !important;
|
||||
--background-base-lower: #374059 !important;
|
||||
--background-surface-high: #22273d !important;
|
||||
--chat-background: #22273d;
|
||||
--home-background: #22273d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #374059 !important;
|
||||
--background-surface-highest: #525866 !important;
|
||||
--background-accent: #525866 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ffffff;
|
||||
--text-strong: #ffffff !important;
|
||||
--text-muted: #c8c8c8 !important;
|
||||
--text-subtle: #878d96;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffffff !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffffff;
|
||||
--control-brand-foreground: #ffffff;
|
||||
--text-link: #6bb8ff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #98c379;
|
||||
--status-warning: #ff9470;
|
||||
--status-danger: #fa7883;
|
||||
--icon-voice-muted: #fa7883;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffffff;
|
||||
--scrollbar-auto-thumb: #ffffff;
|
||||
:root {
|
||||
--base00: #22273d; /* Black */
|
||||
--base01: #374059; /* Bright Black */
|
||||
--base02: #525866; /* Grey */
|
||||
--base03: #878d96; /* Brighter Grey */
|
||||
--base04: #c8c8c8; /* Bright Grey */
|
||||
--base05: #ffffff; /* White */
|
||||
--base06: #ffffff; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #fa7883; /* Red */
|
||||
--base09: #ffc387; /* Orange */
|
||||
--base0A: #ff9470; /* Yellow */
|
||||
--base0B: #98c379; /* Green */
|
||||
--base0C: #8af5ff; /* Cyan */
|
||||
--base0D: #6bb8ff; /* Blue */
|
||||
--base0E: #e799ff; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #22273d !important;
|
||||
background-color: #ffffff !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ffffff;
|
||||
background: #22273d;
|
||||
}
|
||||
.hljs-keyword { color: #e799ff; }
|
||||
.hljs-string { color: #98c379; }
|
||||
.hljs-number { color: #ffc387; }
|
||||
.hljs-comment { color: #878d96; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #ffffff;
|
||||
--background-base-lowest: #ffffff !important;
|
||||
--background-base-lower: #c8c8c8 !important;
|
||||
--background-surface-high: #ffffff !important;
|
||||
--chat-background: #ffffff;
|
||||
--home-background: #ffffff;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #c8c8c8 !important;
|
||||
--background-surface-highest: #888888 !important;
|
||||
--background-accent: #888888 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #181818;
|
||||
--text-strong: #181818 !important;
|
||||
--text-muted: #282828 !important;
|
||||
--text-subtle: #585858;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #000000 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #000000;
|
||||
--control-brand-foreground: #000000;
|
||||
--text-link: #5890f8 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #76a85d;
|
||||
--status-warning: #b3684f;
|
||||
--status-danger: #de5d6e;
|
||||
--icon-voice-muted: #de5d6e;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #000000;
|
||||
--scrollbar-auto-thumb: #000000;
|
||||
:root {
|
||||
--base00: #ffffff; /* Black */
|
||||
--base01: #c8c8c8; /* Bright Black */
|
||||
--base02: #888888; /* Grey */
|
||||
--base03: #585858; /* Brighter Grey */
|
||||
--base04: #282828; /* Bright Grey */
|
||||
--base05: #181818; /* White */
|
||||
--base06: #000000; /* Brighter White */
|
||||
--base07: #000000; /* Bright White */
|
||||
--base08: #de5d6e; /* Red */
|
||||
--base09: #ff9470; /* Orange */
|
||||
--base0A: #b3684f; /* Yellow */
|
||||
--base0B: #76a85d; /* Green */
|
||||
--base0C: #64b5a7; /* Cyan */
|
||||
--base0D: #5890f8; /* Blue */
|
||||
--base0E: #c173d1; /* Purple */
|
||||
--base0F: #b3684f; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #ffffff !important;
|
||||
background-color: #000000 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #181818;
|
||||
background: #ffffff;
|
||||
}
|
||||
.hljs-keyword { color: #c173d1; }
|
||||
.hljs-string { color: #76a85d; }
|
||||
.hljs-number { color: #ff9470; }
|
||||
.hljs-comment { color: #585858; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #2d302f;
|
||||
--background-base-lowest: #2d302f !important;
|
||||
--background-base-lower: #434846 !important;
|
||||
--background-surface-high: #2d302f !important;
|
||||
--chat-background: #2d302f;
|
||||
--home-background: #2d302f;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #434846 !important;
|
||||
--background-surface-highest: #5a605d !important;
|
||||
--background-accent: #5a605d !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #e0f0ef;
|
||||
--text-strong: #e0f0ef !important;
|
||||
--text-muted: #cad8d2 !important;
|
||||
--text-subtle: #9da8a3;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ecf6f2 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ecf6f2;
|
||||
--control-brand-foreground: #ecf6f2;
|
||||
--text-link: #b0a4e3 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #8ab361;
|
||||
--status-warning: #f0c239;
|
||||
--status-danger: #f9906f;
|
||||
--icon-voice-muted: #f9906f;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ecf6f2;
|
||||
--scrollbar-auto-thumb: #ecf6f2;
|
||||
:root {
|
||||
--base00: #2d302f; /* Black */
|
||||
--base01: #434846; /* Bright Black */
|
||||
--base02: #5a605d; /* Grey */
|
||||
--base03: #9da8a3; /* Brighter Grey */
|
||||
--base04: #cad8d2; /* Bright Grey */
|
||||
--base05: #e0f0ef; /* White */
|
||||
--base06: #ecf6f2; /* Brighter White */
|
||||
--base07: #fcfefd; /* Bright White */
|
||||
--base08: #f9906f; /* Red */
|
||||
--base09: #b38a61; /* Orange */
|
||||
--base0A: #f0c239; /* Yellow */
|
||||
--base0B: #8ab361; /* Green */
|
||||
--base0C: #30dff3; /* Cyan */
|
||||
--base0D: #b0a4e3; /* Blue */
|
||||
--base0E: #cca4e3; /* Purple */
|
||||
--base0F: #ca6924; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #2d302f !important;
|
||||
background-color: #ecf6f2 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #e0f0ef;
|
||||
background: #2d302f;
|
||||
}
|
||||
.hljs-keyword { color: #cca4e3; }
|
||||
.hljs-string { color: #8ab361; }
|
||||
.hljs-number { color: #b38a61; }
|
||||
.hljs-comment { color: #9da8a3; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #fcfefd;
|
||||
--background-base-lowest: #fcfefd !important;
|
||||
--background-base-lower: #ecf6f2 !important;
|
||||
--background-surface-high: #fcfefd !important;
|
||||
--chat-background: #fcfefd;
|
||||
--home-background: #fcfefd;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #ecf6f2 !important;
|
||||
--background-surface-highest: #e0f0ef !important;
|
||||
--background-accent: #e0f0ef !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #5a605d;
|
||||
--text-strong: #5a605d !important;
|
||||
--text-muted: #9da8a3 !important;
|
||||
--text-subtle: #cad8d2;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #434846 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #434846;
|
||||
--control-brand-foreground: #434846;
|
||||
--text-link: #b0a4e3 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #8ab361;
|
||||
--status-warning: #f0c239;
|
||||
--status-danger: #f9906f;
|
||||
--icon-voice-muted: #f9906f;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #434846;
|
||||
--scrollbar-auto-thumb: #434846;
|
||||
:root {
|
||||
--base00: #fcfefd; /* Black */
|
||||
--base01: #ecf6f2; /* Bright Black */
|
||||
--base02: #e0f0ef; /* Grey */
|
||||
--base03: #cad8d2; /* Brighter Grey */
|
||||
--base04: #9da8a3; /* Bright Grey */
|
||||
--base05: #5a605d; /* White */
|
||||
--base06: #434846; /* Brighter White */
|
||||
--base07: #2d302f; /* Bright White */
|
||||
--base08: #f9906f; /* Red */
|
||||
--base09: #b38a61; /* Orange */
|
||||
--base0A: #f0c239; /* Yellow */
|
||||
--base0B: #8ab361; /* Green */
|
||||
--base0C: #30dff3; /* Cyan */
|
||||
--base0D: #b0a4e3; /* Blue */
|
||||
--base0E: #cca4e3; /* Purple */
|
||||
--base0F: #ca6924; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #fcfefd !important;
|
||||
background-color: #434846 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #5a605d;
|
||||
background: #fcfefd;
|
||||
}
|
||||
.hljs-keyword { color: #cca4e3; }
|
||||
.hljs-string { color: #8ab361; }
|
||||
.hljs-number { color: #b38a61; }
|
||||
.hljs-comment { color: #cad8d2; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #2b2b2b;
|
||||
--background-base-lowest: #2b2b2b !important;
|
||||
--background-base-lower: #323232 !important;
|
||||
--background-surface-high: #2b2b2b !important;
|
||||
--chat-background: #2b2b2b;
|
||||
--home-background: #2b2b2b;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #323232 !important;
|
||||
--background-surface-highest: #323232 !important;
|
||||
--background-accent: #323232 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a9b7c6;
|
||||
--text-strong: #a9b7c6 !important;
|
||||
--text-muted: #a4a3a3 !important;
|
||||
--text-subtle: #606366;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #ffc66d !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #ffc66d;
|
||||
--control-brand-foreground: #ffc66d;
|
||||
--text-link: #9876aa !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #6a8759;
|
||||
--status-warning: #bbb529;
|
||||
--status-danger: #4eade5;
|
||||
--icon-voice-muted: #4eade5;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #ffc66d;
|
||||
--scrollbar-auto-thumb: #ffc66d;
|
||||
:root {
|
||||
--base00: #2b2b2b; /* Black */
|
||||
--base01: #323232; /* Bright Black */
|
||||
--base02: #323232; /* Grey */
|
||||
--base03: #606366; /* Brighter Grey */
|
||||
--base04: #a4a3a3; /* Bright Grey */
|
||||
--base05: #a9b7c6; /* White */
|
||||
--base06: #ffc66d; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #4eade5; /* Red */
|
||||
--base09: #689757; /* Orange */
|
||||
--base0A: #bbb529; /* Yellow */
|
||||
--base0B: #6a8759; /* Green */
|
||||
--base0C: #629755; /* Cyan */
|
||||
--base0D: #9876aa; /* Blue */
|
||||
--base0E: #cc7832; /* Purple */
|
||||
--base0F: #808080; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #2b2b2b !important;
|
||||
background-color: #ffc66d !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a9b7c6;
|
||||
background: #2b2b2b;
|
||||
}
|
||||
.hljs-keyword { color: #cc7832; }
|
||||
.hljs-string { color: #6a8759; }
|
||||
.hljs-number { color: #689757; }
|
||||
.hljs-comment { color: #606366; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #171e1f;
|
||||
--background-base-lowest: #171e1f !important;
|
||||
--background-base-lower: #252c2d !important;
|
||||
--background-surface-high: #171e1f !important;
|
||||
--chat-background: #171e1f;
|
||||
--home-background: #171e1f;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #252c2d !important;
|
||||
--background-surface-highest: #373c3d !important;
|
||||
--background-accent: #373c3d !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #c7c7a5;
|
||||
--text-strong: #c7c7a5 !important;
|
||||
--text-muted: #818f80 !important;
|
||||
--text-subtle: #555e5f;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e3e3c8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e3e3c8;
|
||||
--control-brand-foreground: #e3e3c8;
|
||||
--text-link: #498091 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #499180;
|
||||
--status-warning: #fdb11f;
|
||||
--status-danger: #ff4658;
|
||||
--icon-voice-muted: #ff4658;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e3e3c8;
|
||||
--scrollbar-auto-thumb: #e3e3c8;
|
||||
:root {
|
||||
--base00: #171e1f; /* Black */
|
||||
--base01: #252c2d; /* Bright Black */
|
||||
--base02: #373c3d; /* Grey */
|
||||
--base03: #555e5f; /* Brighter Grey */
|
||||
--base04: #818f80; /* Bright Grey */
|
||||
--base05: #c7c7a5; /* White */
|
||||
--base06: #e3e3c8; /* Brighter White */
|
||||
--base07: #e1eaef; /* Bright White */
|
||||
--base08: #ff4658; /* Red */
|
||||
--base09: #e6db74; /* Orange */
|
||||
--base0A: #fdb11f; /* Yellow */
|
||||
--base0B: #499180; /* Green */
|
||||
--base0C: #66d9ef; /* Cyan */
|
||||
--base0D: #498091; /* Blue */
|
||||
--base0E: #9bc0c8; /* Purple */
|
||||
--base0F: #d27b53; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #171e1f !important;
|
||||
background-color: #e3e3c8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #c7c7a5;
|
||||
background: #171e1f;
|
||||
}
|
||||
.hljs-keyword { color: #9bc0c8; }
|
||||
.hljs-string { color: #499180; }
|
||||
.hljs-number { color: #e6db74; }
|
||||
.hljs-comment { color: #555e5f; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #1d2021;
|
||||
--background-base-lowest: #1d2021 !important;
|
||||
--background-base-lower: #32302f !important;
|
||||
--background-surface-high: #1d2021 !important;
|
||||
--chat-background: #1d2021;
|
||||
--home-background: #1d2021;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #32302f !important;
|
||||
--background-surface-highest: #504945 !important;
|
||||
--background-accent: #504945 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a89984;
|
||||
--text-strong: #a89984 !important;
|
||||
--text-muted: #928374 !important;
|
||||
--text-subtle: #665c54;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #d5c4a1 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #d5c4a1;
|
||||
--control-brand-foreground: #d5c4a1;
|
||||
--text-link: #0d6678 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #95c085;
|
||||
--status-warning: #fac03b;
|
||||
--status-danger: #fb543f;
|
||||
--icon-voice-muted: #fb543f;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #d5c4a1;
|
||||
--scrollbar-auto-thumb: #d5c4a1;
|
||||
:root {
|
||||
--base00: #1d2021; /* Black */
|
||||
--base01: #32302f; /* Bright Black */
|
||||
--base02: #504945; /* Grey */
|
||||
--base03: #665c54; /* Brighter Grey */
|
||||
--base04: #928374; /* Bright Grey */
|
||||
--base05: #a89984; /* White */
|
||||
--base06: #d5c4a1; /* Brighter White */
|
||||
--base07: #fdf4c1; /* Bright White */
|
||||
--base08: #fb543f; /* Red */
|
||||
--base09: #fe8625; /* Orange */
|
||||
--base0A: #fac03b; /* Yellow */
|
||||
--base0B: #95c085; /* Green */
|
||||
--base0C: #8ba59b; /* Cyan */
|
||||
--base0D: #0d6678; /* Blue */
|
||||
--base0E: #8f4673; /* Purple */
|
||||
--base0F: #a87322; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #1d2021 !important;
|
||||
background-color: #d5c4a1 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a89984;
|
||||
background: #1d2021;
|
||||
}
|
||||
.hljs-keyword { color: #8f4673; }
|
||||
.hljs-string { color: #95c085; }
|
||||
.hljs-number { color: #fe8625; }
|
||||
.hljs-comment { color: #665c54; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #231a40 !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #231a40 !important;
|
||||
--background-surface-highest: #432d59 !important;
|
||||
--background-accent: #432d59 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #b08ae6;
|
||||
--text-strong: #b08ae6 !important;
|
||||
--text-muted: #00ff00 !important;
|
||||
--text-subtle: #593380;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #9045e6 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #9045e6;
|
||||
--control-brand-foreground: #9045e6;
|
||||
--text-link: #4136d9 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #4595e6;
|
||||
--status-warning: #f29df2;
|
||||
--status-danger: #a82ee6;
|
||||
--icon-voice-muted: #a82ee6;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #9045e6;
|
||||
--scrollbar-auto-thumb: #9045e6;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #231a40; /* Bright Black */
|
||||
--base02: #432d59; /* Grey */
|
||||
--base03: #593380; /* Brighter Grey */
|
||||
--base04: #00ff00; /* Bright Grey */
|
||||
--base05: #b08ae6; /* White */
|
||||
--base06: #9045e6; /* Brighter White */
|
||||
--base07: #a366ff; /* Bright White */
|
||||
--base08: #a82ee6; /* Red */
|
||||
--base09: #bb66cc; /* Orange */
|
||||
--base0A: #f29df2; /* Yellow */
|
||||
--base0B: #4595e6; /* Green */
|
||||
--base0C: #40dfff; /* Cyan */
|
||||
--base0D: #4136d9; /* Blue */
|
||||
--base0E: #7e5ce6; /* Purple */
|
||||
--base0F: #a886bf; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #9045e6 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #b08ae6;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #7e5ce6; }
|
||||
.hljs-string { color: #4595e6; }
|
||||
.hljs-number { color: #bb66cc; }
|
||||
.hljs-comment { color: #593380; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #2d2d2d;
|
||||
--background-base-lowest: #2d2d2d !important;
|
||||
--background-base-lower: #393939 !important;
|
||||
--background-surface-high: #2d2d2d !important;
|
||||
--chat-background: #2d2d2d;
|
||||
--home-background: #2d2d2d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #393939 !important;
|
||||
--background-surface-highest: #515151 !important;
|
||||
--background-accent: #515151 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #cccccc;
|
||||
--text-strong: #cccccc !important;
|
||||
--text-muted: #b4b7b4 !important;
|
||||
--text-subtle: #777777;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e0e0e0 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e0e0e0;
|
||||
--control-brand-foreground: #e0e0e0;
|
||||
--text-link: #90bee1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #beda78;
|
||||
--status-warning: #ffd67c;
|
||||
--status-danger: #ff7f7b;
|
||||
--icon-voice-muted: #ff7f7b;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e0e0e0;
|
||||
--scrollbar-auto-thumb: #e0e0e0;
|
||||
:root {
|
||||
--base00: #2d2d2d; /* Black */
|
||||
--base01: #393939; /* Bright Black */
|
||||
--base02: #515151; /* Grey */
|
||||
--base03: #777777; /* Brighter Grey */
|
||||
--base04: #b4b7b4; /* Bright Grey */
|
||||
--base05: #cccccc; /* White */
|
||||
--base06: #e0e0e0; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #ff7f7b; /* Red */
|
||||
--base09: #ffbf70; /* Orange */
|
||||
--base0A: #ffd67c; /* Yellow */
|
||||
--base0B: #beda78; /* Green */
|
||||
--base0C: #bed6ff; /* Cyan */
|
||||
--base0D: #90bee1; /* Blue */
|
||||
--base0E: #efb3f7; /* Purple */
|
||||
--base0F: #ff93b3; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #2d2d2d !important;
|
||||
background-color: #e0e0e0 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #cccccc;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
.hljs-keyword { color: #efb3f7; }
|
||||
.hljs-string { color: #beda78; }
|
||||
.hljs-number { color: #ffbf70; }
|
||||
.hljs-comment { color: #777777; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #001c1f;
|
||||
--background-base-lowest: #001c1f !important;
|
||||
--background-base-lower: #002931 !important;
|
||||
--background-surface-high: #001c1f !important;
|
||||
--chat-background: #001c1f;
|
||||
--home-background: #001c1f;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #002931 !important;
|
||||
--background-surface-highest: #003640 !important;
|
||||
--background-accent: #003640 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d4e1e8;
|
||||
--text-strong: #d4e1e8 !important;
|
||||
--text-muted: #0093a3 !important;
|
||||
--text-subtle: #004852;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e0e9ef !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e0e9ef;
|
||||
--control-brand-foreground: #e0e9ef;
|
||||
--text-link: #568ccf !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #63b784;
|
||||
--status-warning: #f3b863;
|
||||
--status-danger: #d3464d;
|
||||
--icon-voice-muted: #d3464d;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e0e9ef;
|
||||
--scrollbar-auto-thumb: #e0e9ef;
|
||||
:root {
|
||||
--base00: #001c1f; /* Black */
|
||||
--base01: #002931; /* Bright Black */
|
||||
--base02: #003640; /* Grey */
|
||||
--base03: #004852; /* Brighter Grey */
|
||||
--base04: #0093a3; /* Bright Grey */
|
||||
--base05: #d4e1e8; /* White */
|
||||
--base06: #e0e9ef; /* Brighter White */
|
||||
--base07: #f2f7f9; /* Bright White */
|
||||
--base08: #d3464d; /* Red */
|
||||
--base09: #e37552; /* Orange */
|
||||
--base0A: #f3b863; /* Yellow */
|
||||
--base0B: #63b784; /* Green */
|
||||
--base0C: #4fb7ae; /* Cyan */
|
||||
--base0D: #568ccf; /* Blue */
|
||||
--base0E: #8b66d6; /* Purple */
|
||||
--base0F: #d0658e; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #001c1f !important;
|
||||
background-color: #e0e9ef !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d4e1e8;
|
||||
background: #001c1f;
|
||||
}
|
||||
.hljs-keyword { color: #8b66d6; }
|
||||
.hljs-string { color: #63b784; }
|
||||
.hljs-number { color: #e37552; }
|
||||
.hljs-comment { color: #004852; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #181818;
|
||||
--background-base-lowest: #181818 !important;
|
||||
--background-base-lower: #282828 !important;
|
||||
--background-surface-high: #181818 !important;
|
||||
--chat-background: #181818;
|
||||
--home-background: #181818;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #282828 !important;
|
||||
--background-surface-highest: #383838 !important;
|
||||
--background-accent: #383838 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d8d8d8;
|
||||
--text-strong: #d8d8d8 !important;
|
||||
--text-muted: #b8b8b8 !important;
|
||||
--text-subtle: #585858;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e8e8e8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e8e8e8;
|
||||
--control-brand-foreground: #e8e8e8;
|
||||
--text-link: #7cafc2 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a1b56c;
|
||||
--status-warning: #f7ca88;
|
||||
--status-danger: #ab4642;
|
||||
--icon-voice-muted: #ab4642;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e8e8e8;
|
||||
--scrollbar-auto-thumb: #e8e8e8;
|
||||
:root {
|
||||
--base00: #181818; /* Black */
|
||||
--base01: #282828; /* Bright Black */
|
||||
--base02: #383838; /* Grey */
|
||||
--base03: #585858; /* Brighter Grey */
|
||||
--base04: #b8b8b8; /* Bright Grey */
|
||||
--base05: #d8d8d8; /* White */
|
||||
--base06: #e8e8e8; /* Brighter White */
|
||||
--base07: #f8f8f8; /* Bright White */
|
||||
--base08: #ab4642; /* Red */
|
||||
--base09: #dc9656; /* Orange */
|
||||
--base0A: #f7ca88; /* Yellow */
|
||||
--base0B: #a1b56c; /* Green */
|
||||
--base0C: #86c1b9; /* Cyan */
|
||||
--base0D: #7cafc2; /* Blue */
|
||||
--base0E: #ba8baf; /* Purple */
|
||||
--base0F: #a16946; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #181818 !important;
|
||||
background-color: #e8e8e8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d8d8d8;
|
||||
background: #181818;
|
||||
}
|
||||
.hljs-keyword { color: #ba8baf; }
|
||||
.hljs-string { color: #a1b56c; }
|
||||
.hljs-number { color: #dc9656; }
|
||||
.hljs-comment { color: #585858; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #f8f8f8;
|
||||
--background-base-lowest: #f8f8f8 !important;
|
||||
--background-base-lower: #e8e8e8 !important;
|
||||
--background-surface-high: #f8f8f8 !important;
|
||||
--chat-background: #f8f8f8;
|
||||
--home-background: #f8f8f8;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e8e8e8 !important;
|
||||
--background-surface-highest: #d8d8d8 !important;
|
||||
--background-accent: #d8d8d8 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #383838;
|
||||
--text-strong: #383838 !important;
|
||||
--text-muted: #585858 !important;
|
||||
--text-subtle: #b8b8b8;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #282828 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #282828;
|
||||
--control-brand-foreground: #282828;
|
||||
--text-link: #7cafc2 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a1b56c;
|
||||
--status-warning: #f7ca88;
|
||||
--status-danger: #ab4642;
|
||||
--icon-voice-muted: #ab4642;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #282828;
|
||||
--scrollbar-auto-thumb: #282828;
|
||||
:root {
|
||||
--base00: #f8f8f8; /* Black */
|
||||
--base01: #e8e8e8; /* Bright Black */
|
||||
--base02: #d8d8d8; /* Grey */
|
||||
--base03: #b8b8b8; /* Brighter Grey */
|
||||
--base04: #585858; /* Bright Grey */
|
||||
--base05: #383838; /* White */
|
||||
--base06: #282828; /* Brighter White */
|
||||
--base07: #181818; /* Bright White */
|
||||
--base08: #ab4642; /* Red */
|
||||
--base09: #dc9656; /* Orange */
|
||||
--base0A: #f7ca88; /* Yellow */
|
||||
--base0B: #a1b56c; /* Green */
|
||||
--base0C: #86c1b9; /* Cyan */
|
||||
--base0D: #7cafc2; /* Blue */
|
||||
--base0E: #ba8baf; /* Purple */
|
||||
--base0F: #a16946; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #f8f8f8 !important;
|
||||
background-color: #282828 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #383838;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.hljs-keyword { color: #ba8baf; }
|
||||
.hljs-string { color: #a1b56c; }
|
||||
.hljs-number { color: #dc9656; }
|
||||
.hljs-comment { color: #b8b8b8; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #000000;
|
||||
--background-base-lowest: #000000 !important;
|
||||
--background-base-lower: #4a806c !important;
|
||||
--background-surface-high: #000000 !important;
|
||||
--chat-background: #000000;
|
||||
--home-background: #000000;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #4a806c !important;
|
||||
--background-surface-highest: #4a8d7e !important;
|
||||
--background-accent: #4a8d7e !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #00ff00;
|
||||
--text-strong: #00ff00 !important;
|
||||
--text-muted: #919893 !important;
|
||||
--text-subtle: #7c8d7c;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #c4cec4 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #c4cec4;
|
||||
--control-brand-foreground: #c4cec4;
|
||||
--text-link: #5482af !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #64c83c;
|
||||
--status-warning: #a67a50;
|
||||
--status-danger: #c85a46;
|
||||
--icon-voice-muted: #c85a46;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #c4cec4;
|
||||
--scrollbar-auto-thumb: #c4cec4;
|
||||
:root {
|
||||
--base00: #000000; /* Black */
|
||||
--base01: #4a806c; /* Bright Black */
|
||||
--base02: #4a8d7e; /* Grey */
|
||||
--base03: #7c8d7c; /* Brighter Grey */
|
||||
--base04: #919893; /* Bright Grey */
|
||||
--base05: #00ff00; /* White */
|
||||
--base06: #c4cec4; /* Brighter White */
|
||||
--base07: #d8e2dc; /* Bright White */
|
||||
--base08: #c85a46; /* Red */
|
||||
--base09: #c86428; /* Orange */
|
||||
--base0A: #a67a50; /* Yellow */
|
||||
--base0B: #64c83c; /* Green */
|
||||
--base0C: #468c78; /* Cyan */
|
||||
--base0D: #5482af; /* Blue */
|
||||
--base0E: #9472b4; /* Purple */
|
||||
--base0F: #b37c5e; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #000000 !important;
|
||||
background-color: #c4cec4 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #00ff00;
|
||||
background: #000000;
|
||||
}
|
||||
.hljs-keyword { color: #9472b4; }
|
||||
.hljs-string { color: #64c83c; }
|
||||
.hljs-number { color: #c86428; }
|
||||
.hljs-comment { color: #7c8d7c; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #e0e0e0;
|
||||
--background-base-lowest: #e0e0e0 !important;
|
||||
--background-base-lower: #d0dad0 !important;
|
||||
--background-surface-high: #e0e0e0 !important;
|
||||
--chat-background: #e0e0e0;
|
||||
--home-background: #e0e0e0;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #d0dad0 !important;
|
||||
--background-surface-highest: #d0d0d0 !important;
|
||||
--background-accent: #d0d0d0 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #000000;
|
||||
--text-strong: #000000 !important;
|
||||
--text-muted: #202020 !important;
|
||||
--text-subtle: #707070;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f8f8f8 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f8f8f8;
|
||||
--control-brand-foreground: #f8f8f8;
|
||||
--text-link: #007300 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #730073;
|
||||
--status-warning: #755b00;
|
||||
--status-danger: #840000;
|
||||
--icon-voice-muted: #840000;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f8f8f8;
|
||||
--scrollbar-auto-thumb: #f8f8f8;
|
||||
:root {
|
||||
--base00: #e0e0e0; /* Black */
|
||||
--base01: #d0dad0; /* Bright Black */
|
||||
--base02: #d0d0d0; /* Grey */
|
||||
--base03: #707070; /* Brighter Grey */
|
||||
--base04: #202020; /* Bright Grey */
|
||||
--base05: #000000; /* White */
|
||||
--base06: #f8f8f8; /* Brighter White */
|
||||
--base07: #c4d9c4; /* Bright White */
|
||||
--base08: #840000; /* Red */
|
||||
--base09: #006565; /* Orange */
|
||||
--base0A: #755b00; /* Yellow */
|
||||
--base0B: #730073; /* Green */
|
||||
--base0C: #755b00; /* Cyan */
|
||||
--base0D: #007300; /* Blue */
|
||||
--base0E: #000090; /* Purple */
|
||||
--base0F: #755b00; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #e0e0e0 !important;
|
||||
background-color: #f8f8f8 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #000000;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.hljs-keyword { color: #000090; }
|
||||
.hljs-string { color: #730073; }
|
||||
.hljs-number { color: #006565; }
|
||||
.hljs-comment { color: #707070; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #282a36;
|
||||
--background-base-lowest: #282a36 !important;
|
||||
--background-base-lower: #363447 !important;
|
||||
--background-surface-high: #282a36 !important;
|
||||
--chat-background: #282a36;
|
||||
--home-background: #282a36;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #363447 !important;
|
||||
--background-surface-highest: #44475a !important;
|
||||
--background-accent: #44475a !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #f8f8f2;
|
||||
--text-strong: #f8f8f2 !important;
|
||||
--text-muted: #9ea8c7 !important;
|
||||
--text-subtle: #6272a4;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f0f1f4 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f0f1f4;
|
||||
--control-brand-foreground: #f0f1f4;
|
||||
--text-link: #80bfff !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #50fa7b;
|
||||
--status-warning: #f1fa8c;
|
||||
--status-danger: #ff5555;
|
||||
--icon-voice-muted: #ff5555;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f0f1f4;
|
||||
--scrollbar-auto-thumb: #f0f1f4;
|
||||
:root {
|
||||
--base00: #282a36; /* Black */
|
||||
--base01: #363447; /* Bright Black */
|
||||
--base02: #44475a; /* Grey */
|
||||
--base03: #6272a4; /* Brighter Grey */
|
||||
--base04: #9ea8c7; /* Bright Grey */
|
||||
--base05: #f8f8f2; /* White */
|
||||
--base06: #f0f1f4; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #ff5555; /* Red */
|
||||
--base09: #ffb86c; /* Orange */
|
||||
--base0A: #f1fa8c; /* Yellow */
|
||||
--base0B: #50fa7b; /* Green */
|
||||
--base0C: #8be9fd; /* Cyan */
|
||||
--base0D: #80bfff; /* Blue */
|
||||
--base0E: #ff79c6; /* Purple */
|
||||
--base0F: #bd93f9; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #282a36 !important;
|
||||
background-color: #f0f1f4 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #f8f8f2;
|
||||
background: #282a36;
|
||||
}
|
||||
.hljs-keyword { color: #ff79c6; }
|
||||
.hljs-string { color: #50fa7b; }
|
||||
.hljs-number { color: #ffb86c; }
|
||||
.hljs-comment { color: #6272a4; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #262729;
|
||||
--background-base-lowest: #262729 !important;
|
||||
--background-base-lower: #313235 !important;
|
||||
--background-surface-high: #262729 !important;
|
||||
--chat-background: #262729;
|
||||
--home-background: #262729;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #313235 !important;
|
||||
--background-surface-highest: #3d3f42 !important;
|
||||
--background-accent: #3d3f42 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #afb2b5;
|
||||
--text-strong: #afb2b5 !important;
|
||||
--text-muted: #95989d !important;
|
||||
--text-subtle: #4a4c4f;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #caccce !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #caccce;
|
||||
--control-brand-foreground: #caccce;
|
||||
--text-link: #73b3e7 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #a1bf78;
|
||||
--status-warning: #dbb774;
|
||||
--status-danger: #e77171;
|
||||
--icon-voice-muted: #e77171;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #caccce;
|
||||
--scrollbar-auto-thumb: #caccce;
|
||||
:root {
|
||||
--base00: #262729; /* Black */
|
||||
--base01: #313235; /* Bright Black */
|
||||
--base02: #3d3f42; /* Grey */
|
||||
--base03: #4a4c4f; /* Brighter Grey */
|
||||
--base04: #95989d; /* Bright Grey */
|
||||
--base05: #afb2b5; /* White */
|
||||
--base06: #caccce; /* Brighter White */
|
||||
--base07: #e4e5e6; /* Bright White */
|
||||
--base08: #e77171; /* Red */
|
||||
--base09: #eba31a; /* Orange */
|
||||
--base0A: #dbb774; /* Yellow */
|
||||
--base0B: #a1bf78; /* Green */
|
||||
--base0C: #5ebaa5; /* Cyan */
|
||||
--base0D: #73b3e7; /* Blue */
|
||||
--base0E: #d390e7; /* Purple */
|
||||
--base0F: #5ebaa5; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #262729 !important;
|
||||
background-color: #caccce !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #afb2b5;
|
||||
background: #262729;
|
||||
}
|
||||
.hljs-keyword { color: #d390e7; }
|
||||
.hljs-string { color: #a1bf78; }
|
||||
.hljs-number { color: #eba31a; }
|
||||
.hljs-comment { color: #4a4c4f; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #fafafa;
|
||||
--background-base-lowest: #fafafa !important;
|
||||
--background-base-lower: #e3e5e8 !important;
|
||||
--background-surface-high: #fafafa !important;
|
||||
--chat-background: #fafafa;
|
||||
--home-background: #fafafa;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #e3e5e8 !important;
|
||||
--background-surface-highest: #acb1b9 !important;
|
||||
--background-accent: #acb1b9 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #474752;
|
||||
--text-strong: #474752 !important;
|
||||
--text-muted: #5e646f !important;
|
||||
--text-subtle: #9197a1;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #3a3a46 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #3a3a46;
|
||||
--control-brand-foreground: #3a3a46;
|
||||
--text-link: #6587bf !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7c9f4b;
|
||||
--status-warning: #ebcc1a;
|
||||
--status-danger: #db7070;
|
||||
--icon-voice-muted: #db7070;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #3a3a46;
|
||||
--scrollbar-auto-thumb: #3a3a46;
|
||||
:root {
|
||||
--base00: #fafafa; /* Black */
|
||||
--base01: #e3e5e8; /* Bright Black */
|
||||
--base02: #acb1b9; /* Grey */
|
||||
--base03: #9197a1; /* Brighter Grey */
|
||||
--base04: #5e646f; /* Bright Grey */
|
||||
--base05: #474752; /* White */
|
||||
--base06: #3a3a46; /* Brighter White */
|
||||
--base07: #2e2e38; /* Bright White */
|
||||
--base08: #db7070; /* Red */
|
||||
--base09: #eba31a; /* Orange */
|
||||
--base0A: #ebcc1a; /* Yellow */
|
||||
--base0B: #7c9f4b; /* Green */
|
||||
--base0C: #509c93; /* Cyan */
|
||||
--base0D: #6587bf; /* Blue */
|
||||
--base0E: #b870ce; /* Purple */
|
||||
--base0F: #509c93; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #fafafa !important;
|
||||
background-color: #3a3a46 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #474752;
|
||||
background: #fafafa;
|
||||
}
|
||||
.hljs-keyword { color: #b870ce; }
|
||||
.hljs-string { color: #7c9f4b; }
|
||||
.hljs-number { color: #eba31a; }
|
||||
.hljs-comment { color: #9197a1; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #2d2d2d;
|
||||
--background-base-lowest: #2d2d2d !important;
|
||||
--background-base-lower: #393939 !important;
|
||||
--background-surface-high: #2d2d2d !important;
|
||||
--chat-background: #2d2d2d;
|
||||
--home-background: #2d2d2d;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #393939 !important;
|
||||
--background-surface-highest: #515151 !important;
|
||||
--background-accent: #515151 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #d3d0c8;
|
||||
--text-strong: #d3d0c8 !important;
|
||||
--text-muted: #a09f93 !important;
|
||||
--text-subtle: #747369;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #e8e6df !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #e8e6df;
|
||||
--control-brand-foreground: #e8e6df;
|
||||
--text-link: #6699cc !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #99cc99;
|
||||
--status-warning: #ffcc66;
|
||||
--status-danger: #f2777a;
|
||||
--icon-voice-muted: #f2777a;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #e8e6df;
|
||||
--scrollbar-auto-thumb: #e8e6df;
|
||||
:root {
|
||||
--base00: #2d2d2d; /* Black */
|
||||
--base01: #393939; /* Bright Black */
|
||||
--base02: #515151; /* Grey */
|
||||
--base03: #747369; /* Brighter Grey */
|
||||
--base04: #a09f93; /* Bright Grey */
|
||||
--base05: #d3d0c8; /* White */
|
||||
--base06: #e8e6df; /* Brighter White */
|
||||
--base07: #f2f0ec; /* Bright White */
|
||||
--base08: #f2777a; /* Red */
|
||||
--base09: #f99157; /* Orange */
|
||||
--base0A: #ffcc66; /* Yellow */
|
||||
--base0B: #99cc99; /* Green */
|
||||
--base0C: #66cccc; /* Cyan */
|
||||
--base0D: #6699cc; /* Blue */
|
||||
--base0E: #cc99cc; /* Purple */
|
||||
--base0F: #d27b53; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #2d2d2d !important;
|
||||
background-color: #e8e6df !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #d3d0c8;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
.hljs-keyword { color: #cc99cc; }
|
||||
.hljs-string { color: #99cc99; }
|
||||
.hljs-number { color: #f99157; }
|
||||
.hljs-comment { color: #747369; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #212337;
|
||||
--background-base-lowest: #212337 !important;
|
||||
--background-base-lower: #323449 !important;
|
||||
--background-surface-high: #212337 !important;
|
||||
--chat-background: #212337;
|
||||
--home-background: #212337;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #323449 !important;
|
||||
--background-surface-highest: #3b4261 !important;
|
||||
--background-accent: #3b4261 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #ebfafa;
|
||||
--text-strong: #ebfafa !important;
|
||||
--text-muted: #a1abe0 !important;
|
||||
--text-subtle: #7081d0;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #f0f2f4 !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #f0f2f4;
|
||||
--control-brand-foreground: #f0f2f4;
|
||||
--text-link: #39ddfd !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #37f499;
|
||||
--status-warning: #f1fc79;
|
||||
--status-danger: #f16c75;
|
||||
--icon-voice-muted: #f16c75;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #f0f2f4;
|
||||
--scrollbar-auto-thumb: #f0f2f4;
|
||||
:root {
|
||||
--base00: #212337; /* Black */
|
||||
--base01: #323449; /* Bright Black */
|
||||
--base02: #3b4261; /* Grey */
|
||||
--base03: #7081d0; /* Brighter Grey */
|
||||
--base04: #a1abe0; /* Bright Grey */
|
||||
--base05: #ebfafa; /* White */
|
||||
--base06: #f0f2f4; /* Brighter White */
|
||||
--base07: #ffffff; /* Bright White */
|
||||
--base08: #f16c75; /* Red */
|
||||
--base09: #f7c67f; /* Orange */
|
||||
--base0A: #f1fc79; /* Yellow */
|
||||
--base0B: #37f499; /* Green */
|
||||
--base0C: #04d1f9; /* Cyan */
|
||||
--base0D: #39ddfd; /* Blue */
|
||||
--base0E: #a48cf2; /* Purple */
|
||||
--base0F: #f265b5; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #212337 !important;
|
||||
background-color: #f0f2f4 !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #ebfafa;
|
||||
background: #212337;
|
||||
}
|
||||
.hljs-keyword { color: #a48cf2; }
|
||||
.hljs-string { color: #37f499; }
|
||||
.hljs-number { color: #f7c67f; }
|
||||
.hljs-comment { color: #7081d0; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #16130f;
|
||||
--background-base-lowest: #16130f !important;
|
||||
--background-base-lower: #2c2620 !important;
|
||||
--background-surface-high: #16130f !important;
|
||||
--chat-background: #16130f;
|
||||
--home-background: #16130f;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #2c2620 !important;
|
||||
--background-surface-highest: #433b32 !important;
|
||||
--background-accent: #433b32 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #a39a90;
|
||||
--text-strong: #a39a90 !important;
|
||||
--text-muted: #8a8075 !important;
|
||||
--text-subtle: #5a5047;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #beb6ae !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #beb6ae;
|
||||
--control-brand-foreground: #beb6ae;
|
||||
--text-link: #6d5782 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #57826d;
|
||||
--status-warning: #6d8257;
|
||||
--status-danger: #826d57;
|
||||
--icon-voice-muted: #826d57;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #beb6ae;
|
||||
--scrollbar-auto-thumb: #beb6ae;
|
||||
:root {
|
||||
--base00: #16130f; /* Black */
|
||||
--base01: #2c2620; /* Bright Black */
|
||||
--base02: #433b32; /* Grey */
|
||||
--base03: #5a5047; /* Brighter Grey */
|
||||
--base04: #8a8075; /* Bright Grey */
|
||||
--base05: #a39a90; /* White */
|
||||
--base06: #beb6ae; /* Brighter White */
|
||||
--base07: #dbd6d1; /* Bright White */
|
||||
--base08: #826d57; /* Red */
|
||||
--base09: #828257; /* Orange */
|
||||
--base0A: #6d8257; /* Yellow */
|
||||
--base0B: #57826d; /* Green */
|
||||
--base0C: #576d82; /* Cyan */
|
||||
--base0D: #6d5782; /* Blue */
|
||||
--base0E: #82576d; /* Purple */
|
||||
--base0F: #825757; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #16130f !important;
|
||||
background-color: #beb6ae !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #a39a90;
|
||||
background: #16130f;
|
||||
}
|
||||
.hljs-keyword { color: #82576d; }
|
||||
.hljs-string { color: #57826d; }
|
||||
.hljs-number { color: #828257; }
|
||||
.hljs-comment { color: #5a5047; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #d1d6db;
|
||||
--background-base-lowest: #d1d6db !important;
|
||||
--background-base-lower: #aeb6be !important;
|
||||
--background-surface-high: #d1d6db !important;
|
||||
--chat-background: #d1d6db;
|
||||
--home-background: #d1d6db;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #aeb6be !important;
|
||||
--background-surface-highest: #909aa3 !important;
|
||||
--background-accent: #909aa3 !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #323b43;
|
||||
--text-strong: #323b43 !important;
|
||||
--text-muted: #47505a !important;
|
||||
--text-subtle: #75808a;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #20262c !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #20262c;
|
||||
--control-brand-foreground: #20262c;
|
||||
--text-link: #82576d !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #6d8257;
|
||||
--status-warning: #57826d;
|
||||
--status-danger: #576d82;
|
||||
--icon-voice-muted: #576d82;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #20262c;
|
||||
--scrollbar-auto-thumb: #20262c;
|
||||
:root {
|
||||
--base00: #d1d6db; /* Black */
|
||||
--base01: #aeb6be; /* Bright Black */
|
||||
--base02: #909aa3; /* Grey */
|
||||
--base03: #75808a; /* Brighter Grey */
|
||||
--base04: #47505a; /* Bright Grey */
|
||||
--base05: #323b43; /* White */
|
||||
--base06: #20262c; /* Brighter White */
|
||||
--base07: #0f1316; /* Bright White */
|
||||
--base08: #576d82; /* Red */
|
||||
--base09: #578282; /* Orange */
|
||||
--base0A: #57826d; /* Yellow */
|
||||
--base0B: #6d8257; /* Green */
|
||||
--base0C: #826d57; /* Cyan */
|
||||
--base0D: #82576d; /* Blue */
|
||||
--base0E: #6d5782; /* Purple */
|
||||
--base0F: #575782; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #d1d6db !important;
|
||||
background-color: #20262c !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #323b43;
|
||||
background: #d1d6db;
|
||||
}
|
||||
.hljs-keyword { color: #6d5782; }
|
||||
.hljs-string { color: #6d8257; }
|
||||
.hljs-number { color: #578282; }
|
||||
.hljs-comment { color: #75808a; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #efefef;
|
||||
--background-base-lowest: #efefef !important;
|
||||
--background-base-lower: #bebed2 !important;
|
||||
--background-surface-high: #efefef !important;
|
||||
--chat-background: #efefef;
|
||||
--home-background: #efefef;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #bebed2 !important;
|
||||
--background-surface-highest: #9e9eaf !important;
|
||||
--background-accent: #9e9eaf !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #313145;
|
||||
--text-strong: #313145 !important;
|
||||
--text-muted: #505063 !important;
|
||||
--text-subtle: #7c7c98;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #22223a !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #22223a;
|
||||
--control-brand-foreground: #22223a;
|
||||
--text-link: #471397 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #0073a8;
|
||||
--status-warning: #ff669b;
|
||||
--status-danger: #f43979;
|
||||
--icon-voice-muted: #f43979;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #22223a;
|
||||
--scrollbar-auto-thumb: #22223a;
|
||||
:root {
|
||||
--base00: #efefef; /* Black */
|
||||
--base01: #bebed2; /* Bright Black */
|
||||
--base02: #9e9eaf; /* Grey */
|
||||
--base03: #7c7c98; /* Brighter Grey */
|
||||
--base04: #505063; /* Bright Grey */
|
||||
--base05: #313145; /* White */
|
||||
--base06: #22223a; /* Brighter White */
|
||||
--base07: #1a1a2f; /* Bright White */
|
||||
--base08: #f43979; /* Red */
|
||||
--base09: #d22a8b; /* Orange */
|
||||
--base0A: #ff669b; /* Yellow */
|
||||
--base0B: #0073a8; /* Green */
|
||||
--base0C: #2155d6; /* Cyan */
|
||||
--base0D: #471397; /* Blue */
|
||||
--base0E: #6916b6; /* Purple */
|
||||
--base0F: #8d17a5; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #efefef !important;
|
||||
background-color: #22223a !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #313145;
|
||||
background: #efefef;
|
||||
}
|
||||
.hljs-keyword { color: #6916b6; }
|
||||
.hljs-string { color: #0073a8; }
|
||||
.hljs-number { color: #d22a8b; }
|
||||
.hljs-comment { color: #7c7c98; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,185 @@
|
|||
/* Tinty Template: Discord Visual Refresh
|
||||
Mapped from Catppuccin Mocha Pink
|
||||
*/
|
||||
/**
|
||||
* @name Stylix
|
||||
* @author Stylix
|
||||
* @version 0.0.0
|
||||
* @description Theme configured via NixOS or Home Manager.
|
||||
**/
|
||||
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh .theme-dark {
|
||||
/* Main Backgrounds */
|
||||
--app-frame-background: #0c1118;
|
||||
--background-base-lowest: #0c1118 !important;
|
||||
--background-base-lower: #181c22 !important;
|
||||
--background-surface-high: #0c1118 !important;
|
||||
--chat-background: #0c1118;
|
||||
--home-background: #0c1118;
|
||||
|
||||
/* UI Accents & Surfaces */
|
||||
--background-surface-higher: #181c22 !important;
|
||||
--background-surface-highest: #22262d !important;
|
||||
--background-accent: #22262d !important;
|
||||
|
||||
/* Text Colors */
|
||||
--text-default: #afaba2;
|
||||
--text-strong: #afaba2 !important;
|
||||
--text-muted: #949088 !important;
|
||||
--text-subtle: #7b776e;
|
||||
|
||||
/* Branding & Interactives (Using base06/base0D for accents) */
|
||||
--brand-500: #cac6bd !important; /* This was Pink (#f5c2e7) */
|
||||
--text-brand: #cac6bd;
|
||||
--control-brand-foreground: #cac6bd;
|
||||
--text-link: #008dd1 !important;
|
||||
|
||||
/* Syntax & Status */
|
||||
--status-positive: #7f8b00;
|
||||
--status-warning: #bb8801;
|
||||
--status-danger: #f04339;
|
||||
--icon-voice-muted: #f04339;
|
||||
|
||||
/* Scrollbars */
|
||||
--scrollbar-thin-thumb: #cac6bd;
|
||||
--scrollbar-auto-thumb: #cac6bd;
|
||||
:root {
|
||||
--base00: #0c1118; /* Black */
|
||||
--base01: #181c22; /* Bright Black */
|
||||
--base02: #22262d; /* Grey */
|
||||
--base03: #7b776e; /* Brighter Grey */
|
||||
--base04: #949088; /* Bright Grey */
|
||||
--base05: #afaba2; /* White */
|
||||
--base06: #cac6bd; /* Brighter White */
|
||||
--base07: #e7e2d9; /* Bright White */
|
||||
--base08: #f04339; /* Red */
|
||||
--base09: #df5923; /* Orange */
|
||||
--base0A: #bb8801; /* Yellow */
|
||||
--base0B: #7f8b00; /* Green */
|
||||
--base0C: #00948b; /* Cyan */
|
||||
--base0D: #008dd1; /* Blue */
|
||||
--base0E: #6a7fd2; /* Purple */
|
||||
--base0F: #e3488e; /* Magenta */
|
||||
|
||||
--primary-630: var(--base00); /* Autocomplete background */
|
||||
--primary-660: var(--base00); /* Search input background */
|
||||
}
|
||||
|
||||
/* Button Recoloring */
|
||||
.visual-refresh.theme-dark button.vc-btn-primary,
|
||||
.visual-refresh .theme-dark button.vc-btn-primary {
|
||||
color: #0c1118 !important;
|
||||
background-color: #cac6bd !important;
|
||||
.theme-light,
|
||||
.theme-dark,
|
||||
.theme-darker,
|
||||
.theme-midnight,
|
||||
.visual-refresh {
|
||||
--activity-card-background: var(--base01) !important;
|
||||
--background-accent: var(--base03) !important;
|
||||
--background-floating: var(--base02) !important;
|
||||
--background-mentioned-hover: var(--base02) !important;
|
||||
--background-mentioned: var(--base01) !important;
|
||||
--background-message-highlight: var(--base01) !important;
|
||||
--background-message-hover: var(--base00) !important;
|
||||
--background-modifier-accent: var(--base02) !important;
|
||||
--background-modifier-active: var(--base02) !important;
|
||||
--background-modifier-hover: var(--base00) !important;
|
||||
--background-modifier-selected: var(--base01) !important;
|
||||
--background-primary: var(--base00) !important;
|
||||
--background-secondary-alt: var(--base01) !important;
|
||||
--background-secondary: var(--base01) !important;
|
||||
--background-surface-highest: var(--base02) !important;
|
||||
--background-surface-higher: var(--base02) !important;
|
||||
--background-surface-high: var(--base02) !important;
|
||||
--background-tertiary: var(--base00) !important;
|
||||
--background-base-low: var(--base01) !important;
|
||||
--background-base-lower: var(--base00) !important;
|
||||
--background-base-lowest: var(--base00) !important;
|
||||
--background-base-tertiary: var(--base00) !important;
|
||||
--background-code: var(--base02) !important;
|
||||
--background-mod-subtle: var(--base02) !important;
|
||||
--bg-base-secondary: var(--base01) !important;
|
||||
--bg-base-tertiary: var(--base00) !important;
|
||||
--bg-brand: var(--base03) !important;
|
||||
--bg-mod-faint: var(--base01) !important;
|
||||
--bg-overlay-2: var(--base01) !important;
|
||||
--bg-overlay-3: var(--base01) !important;
|
||||
--bg-overlay-color-inverse: var(--base03) !important;
|
||||
--bg-surface-raised: var(--base02) !important;
|
||||
--bg-surface-overlay: var(--base00) !important;
|
||||
--black: var(--base00) !important;
|
||||
--blurple-50: var(--base0B) !important;
|
||||
--border-faint: var(--base02) !important;
|
||||
--brand-05a: var(--base01) !important;
|
||||
--brand-10a: var(--base01) !important;
|
||||
--brand-15a: var(--base01) !important;
|
||||
--brand-260: var(--base0D) !important;
|
||||
--brand-360: var(--base0D) !important;
|
||||
--brand-500: var(--base0F) !important;
|
||||
--brand-560: var(--base01) !important;
|
||||
--button-danger-background: var(--base08) !important;
|
||||
--button-filled-brand-background: var(--base0D) !important;
|
||||
--button-filled-brand-background-hover: var(--base03) !important;
|
||||
--button-filled-brand-text: var(--base00) !important;
|
||||
--button-filled-brand-text-hover: var(--base05) !important;
|
||||
--button-outline-positive-border: var(--base0B) !important;
|
||||
--button-outline-danger-background-hover: var(--base08) !important;
|
||||
--button-outline-danger-border-hover: var(--base08) !important;
|
||||
--button-positive-background: var(--base0B) !important;
|
||||
--button-positive-background-hover: var(--base03) !important;
|
||||
--button-secondary-background: var(--base02) !important;
|
||||
--button-secondary-background-hover: var(--base03) !important;
|
||||
--card-primary-bg: var(--base02) !important;
|
||||
--channel-icon: var(--base04) !important;
|
||||
--channels-default: var(--base04) !important;
|
||||
--channel-text-area-placeholder: var(--base03) !important;
|
||||
--channeltextarea-background: var(--base01) !important;
|
||||
--chat-background-default: var(--base02) !important;
|
||||
--checkbox-background-checked: var(--base0D) !important;
|
||||
--checkbox-border-checked: var(--base0D) !important;
|
||||
--checkbox-background-default: var(--base02) !important;
|
||||
--checkbox-border-default: var(--base03) !important;
|
||||
--control-brand-foreground-new: var(--base0D) !important;
|
||||
--control-brand-foreground: var(--base04) !important;
|
||||
--custom-notice-text: var(--base01) !important;
|
||||
--green-330: var(--base0B) !important;
|
||||
--green-360: var(--base0B) !important;
|
||||
--header-primary: var(--base04) !important;
|
||||
--header-secondary: var(--base04) !important;
|
||||
--home-background: var(--base00) !important;
|
||||
--info-warning-foreground: var(--base0A) !important;
|
||||
--input-background: var(--base02) !important;
|
||||
--interactive-active: var(--base05) !important;
|
||||
--interactive-hover: var(--base05) !important;
|
||||
--interactive-muted: var(--base03) !important;
|
||||
--interactive-normal: var(--base05) !important;
|
||||
--mention-background: var(--base03) !important;
|
||||
--mention-foreground: var(--base05) !important;
|
||||
--menu-item-danger-active-bg: var(--base08) !important;
|
||||
--menu-item-danger-hover-bg: var(--base08) !important;
|
||||
--menu-item-default-hover-bg: var(--base03) !important;
|
||||
--message-reacted-background: var(--base02) !important;
|
||||
--message-reacted-text: var(--base05) !important;
|
||||
--modal-background: var(--base01) !important;
|
||||
--modal-footer-background: var(--base00) !important;
|
||||
--notice-background-positive: var(--base0B) !important;
|
||||
--notice-text-positive: var(--base01) !important;
|
||||
--plum-23: var(--base02) !important;
|
||||
--primary-130: var(--base05) !important;
|
||||
--primary-300: var(--base05) !important;
|
||||
--primary-500: var(--base02) !important;
|
||||
--primary-600: var(--base00) !important;
|
||||
--primary-630: var(--base01) !important;
|
||||
--primary-660: var(--base00) !important;
|
||||
--primary-800: var(--base00) !important;
|
||||
--red-400: var(--base08) !important;
|
||||
--red-460: var(--base08) !important;
|
||||
--red-500: var(--base08) !important;
|
||||
--red-630: var(--base08) !important;
|
||||
--red: var(--base08) !important;
|
||||
--scrollbar-auto-thumb: var(--base00) !important;
|
||||
--scrollbar-thin-thumb: var(--base00) !important;
|
||||
--status-danger-background: var(--base08) !important;
|
||||
--status-danger: var(--base08) !important;
|
||||
--status-negative: var(--base08) !important;
|
||||
--status-positive-background: var(--base0B) !important;
|
||||
--status-positive-text: var(--base0B) !important;
|
||||
--status-positive: var(--base0B) !important;
|
||||
--status-success: var(--base0B) !important;
|
||||
--status-warning-background: var(--base03) !important;
|
||||
--status-warning: var(--base09) !important;
|
||||
--teal-430: var(--base0C) !important;
|
||||
--text-brand: var(--base07) !important;
|
||||
--text-feedback-positive: var(--base0B) !important;
|
||||
--text-feedback-negative: var(--base08) !important;
|
||||
--text-feedback-warning: var(--base09) !important;
|
||||
--text-feedback-success: var(--base0B) !important;
|
||||
--text-link: var(--base04) !important;
|
||||
--text-muted: var(--base05) !important;
|
||||
--text-negative: var(--base08) !important;
|
||||
--text-normal: var(--base05) !important;
|
||||
--text-positive: var(--base0B) !important;
|
||||
--text-primary: var(--base05) !important;
|
||||
--text-secondary: var(--base04) !important;
|
||||
--text-tertiary: var(--base03) !important;
|
||||
--text-warning: var(--base09) !important;
|
||||
--textbox-markdown-syntax: var(--base05) !important;
|
||||
--theme-base-color: var(--base00) !important;
|
||||
--white: var(--base05) !important;
|
||||
--yellow-360: var(--base0A) !important;
|
||||
--yellow-300: var(--base0A) !important;
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Section */
|
||||
.visual-refresh.theme-dark.hljs,
|
||||
.visual-refresh .theme-dark.hljs {
|
||||
color: #afaba2;
|
||||
background: #0c1118;
|
||||
}
|
||||
.hljs-keyword { color: #6a7fd2; }
|
||||
.hljs-string { color: #7f8b00; }
|
||||
.hljs-number { color: #df5923; }
|
||||
.hljs-comment { color: #7b776e; }
|
||||
/* Syntax Highlighting */
|
||||
.hljs-attr, .hljs-attribute, .hljs-number, .hljs-selector-class { color: var(--base06) !important; }
|
||||
.hljs-comment, .hljs-meta { color: var(--base03) !important; }
|
||||
.hljs-subst { color: var(--base0D) !important; }
|
||||
.hljs-selector-pseudo, .hljs-section, .hljs-string { color: var(--base0B) !important; }
|
||||
.hljs-keyword, .hljs-variable { color: var(--base08) !important; }
|
||||
.hljs-built_in { color: var(--base09) !important; }
|
||||
.hljs-title { color: var(--base0E) !important; }
|
||||
|
||||
/* Note: To keep the response concise, standard SVG filters and
|
||||
individual icon overrides from your CSS have been omitted.
|
||||
They generally use --white and --brand-500 variables defined above.
|
||||
*/
|
||||
/* Visual Refresh Specifics */
|
||||
.visual-refresh {
|
||||
.bg__960e4, .wrapper_ef3116, .sidebar_c48ade, .members_c8ffbb { background-color: var(--base00) !important; }
|
||||
.chatContent_f75fb0 { background-color: var(--base01) !important; }
|
||||
.searchBar__97492, .channelTextArea_f75fb0, .voiceBar__7aaec { background-color: var(--base02) !important; }
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue