mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-08-01 19:18:28 -04:00
matugen/vesktop/vencord: replace midnight template with a new more
modest template
This commit is contained in:
bbedward
@@ -1,242 +0,0 @@
|
||||
/**
|
||||
* @name DMS
|
||||
* @description Material Design 3 theme generated by DankMaterialShell
|
||||
* @author DankMaterialShell
|
||||
* @version 2.0.0
|
||||
* @website https://github.com/bbedward/DankMaterialShell
|
||||
*/
|
||||
|
||||
* {
|
||||
font-family: 'Adwaita Sans', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
|
||||
--app-bg: {{colors.background.default.hex}};
|
||||
--background-primary: {{colors.background.default.hex}};
|
||||
--background-secondary: {{colors.background.default.hex}};
|
||||
--background-secondary-alt: {{colors.background.default.hex}};
|
||||
--background-tertiary: {{colors.background.default.hex}};
|
||||
|
||||
--primary-500: {{colors.background.default.hex}};
|
||||
--primary-600: {{colors.background.default.hex}};
|
||||
--primary-630: {{colors.background.default.hex}};
|
||||
--primary-645: {{colors.background.default.hex}};
|
||||
--primary-660: {{colors.background.default.hex}};
|
||||
--primary-700: {{colors.background.default.hex}};
|
||||
|
||||
--channeltextarea-background: {{colors.background.default.hex}};
|
||||
--custom-channel-members-bg: {{colors.background.default.hex}};
|
||||
|
||||
--sidebar-background: {{colors.background.default.hex}};
|
||||
--sidebar-color: {{colors.background.default.hex}};
|
||||
--server-container: {{colors.background.default.hex}};
|
||||
--main-color: {{colors.background.default.hex}};
|
||||
--main-content-color: {{colors.background.default.hex}};
|
||||
|
||||
--profile-gradient-primary-color: {{colors.background.default.hex}};
|
||||
--profile-gradient-secondary-color: {{colors.background.default.hex}};
|
||||
--profile-body-background-color: {{colors.background.default.hex}};
|
||||
--bg-overlay-1: {{colors.background.default.hex}};
|
||||
--bg-overlay-2: {{colors.background.default.hex}};
|
||||
--bg-overlay-3: {{colors.background.default.hex}};
|
||||
--home-background: {{colors.background.default.hex}};
|
||||
|
||||
--__header-bar-background: {{colors.background.default.hex}} !important;
|
||||
--header-secondary: {{colors.background.default.hex}};
|
||||
--channel-header-bg: {{colors.background.default.hex}};
|
||||
--__channel-header-background: {{colors.background.default.hex}} !important;
|
||||
|
||||
--bg-base-tertiary: {{colors.background.default.hex}};
|
||||
|
||||
--card-primary-bg: {{colors.surface_container.default.hex}};
|
||||
--input-background: {{colors.surface_container.default.hex}};
|
||||
--autocomplete-bg: {{colors.surface_container.default.hex}};
|
||||
--background-nested-floating: {{colors.surface_container.default.hex}};
|
||||
--background-floating: {{colors.surface_container.default.hex}};
|
||||
--scrollbar-auto-track: {{colors.surface_container.default.hex}};
|
||||
--scrollbar-thin-track: {{colors.surface_container.default.hex}};
|
||||
|
||||
--border-subtle: {{colors.background.default.hex}};
|
||||
--background-base-lowest: {{colors.background.default.hex}};
|
||||
--background-surface-high: {{colors.background.default.hex}};
|
||||
|
||||
--button-secondary-background: {{colors.surface_container_high.default.hex}};
|
||||
--background-surface-higher: {{colors.surface_container_high.default.hex}};
|
||||
--background-base-lower: {{colors.surface_container_high.default.hex}};
|
||||
|
||||
--background-message-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent);
|
||||
--button-secondary-background-hover: {{colors.surface_container_highest.default.hex}};
|
||||
--background-base-low: {{colors.surface_container_highest.default.hex}};
|
||||
--background-surface-highest: {{colors.surface_container_highest.default.hex}};
|
||||
--chat-background-default: {{colors.surface_container_highest.default.hex}};
|
||||
|
||||
--button-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}}, {{colors.primary.default.hex}} 20%);
|
||||
|
||||
--scrollbar-auto-thumb: {{colors.outline.default.hex}};
|
||||
--scrollbar-thin-thumb: {{colors.outline.default.hex}};
|
||||
--interactive-muted: {{colors.outline.default.hex}};
|
||||
--text-muted: {{colors.outline.default.hex}};
|
||||
--background-modifier-hover: {{colors.surface_container_high.default.hex}};
|
||||
--background-modifier-active: {{colors.surface_container_highest.default.hex}};
|
||||
--background-modifier-accent: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
|
||||
--background-accent: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
|
||||
--background-mentioned: color-mix(in srgb, {{colors.primary.default.hex}} 8%, transparent);
|
||||
--background-mentioned-hover: color-mix(in srgb, {{colors.primary.default.hex}} 12%, transparent);
|
||||
--mention-foreground: {{colors.primary.default.hex}};
|
||||
--info-warning-foreground: {{colors.primary.default.hex}};
|
||||
|
||||
--input-border: {{colors.outline_variant.default.hex}};
|
||||
--border-normal: {{colors.outline_variant.default.hex}};
|
||||
--icon-secondary: {{colors.on_surface_variant.default.hex}};
|
||||
--icon-tertiary: {{colors.on_surface_variant.default.hex}};
|
||||
--channel-icon: {{colors.on_surface_variant.default.hex}};
|
||||
--channels-default: {{colors.on_surface_variant.default.hex}};
|
||||
--header-primary: {{colors.on_surface.default.hex}};
|
||||
--__lottieIconColor: {{colors.on_surface_variant.default.hex}};
|
||||
--interactive-normal: {{colors.on_surface_variant.default.hex}};
|
||||
|
||||
--red-400: {{colors.error.default.hex}};
|
||||
--background-modifier-selected: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent);
|
||||
|
||||
--notice-background-positive: {{colors.primary_container.default.hex}};
|
||||
--notice-text-positive: {{colors.on_primary_container.default.hex}};
|
||||
|
||||
--status-danger: {{colors.error.default.hex}};
|
||||
--button-outline-danger-border: {{colors.error.default.hex}};
|
||||
--button-outline-danger-text: {{colors.error.default.hex}};
|
||||
--button-danger-background: {{colors.error.default.hex}};
|
||||
|
||||
--yellow-300: {{colors.tertiary.default.hex}};
|
||||
|
||||
--brand-experiment: {{colors.primary.default.hex}};
|
||||
--brand-experiment-360: {{colors.primary.default.hex}};
|
||||
--brand-experiment-500: {{colors.primary.default.hex}};
|
||||
--profile-gradient-button-color: {{colors.primary.default.hex}};
|
||||
|
||||
--green-360: {{colors.primary.default.hex}};
|
||||
|
||||
--text-normal: {{colors.on_surface.default.hex}};
|
||||
--text-link: {{colors.primary.default.hex}};
|
||||
--interactive-active: {{colors.on_surface.default.hex}};
|
||||
}
|
||||
|
||||
rect[fill="#d83a41"] {
|
||||
fill: {{colors.error.default.hex}} !important;
|
||||
}
|
||||
|
||||
rect[fill="#cc954c"] {
|
||||
fill: {{colors.tertiary.default.hex}} !important;
|
||||
}
|
||||
|
||||
rect[fill="#40a258"] {
|
||||
fill: {{colors.primary.default.hex}} !important;
|
||||
}
|
||||
|
||||
[class*="repliedTextContent"],
|
||||
[class*="repliedMessage"] [class*="username"],
|
||||
[class*="repliedMessage"] [class*="repliedTextPreview"] {
|
||||
color: {{colors.on_surface_variant.default.hex}} !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
.guilds__5e434,
|
||||
.scroller_ef3116 {
|
||||
background: {{colors.surface.default.hex}} !important;
|
||||
}
|
||||
|
||||
.sidebarList__5e434,
|
||||
.container__2637a,
|
||||
.scroller__629e4 {
|
||||
background: {{colors.surface.default.hex}} !important;
|
||||
}
|
||||
|
||||
.container_c8ffbb,
|
||||
.members_c8ffbb,
|
||||
.member_c8ffbb,
|
||||
.membersWrap_c8ffbb {
|
||||
background: {{colors.surface.default.hex}} !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.chatContent_f75fb0,
|
||||
.messagesWrapper__36d07,
|
||||
.chatGradient__36d07 {
|
||||
background: {{colors.surface.default.hex}} !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.subtitleContainer_f75fb0,
|
||||
.title_f75fb0,
|
||||
.container__9293f,
|
||||
.headerBar__8a7fc,
|
||||
.title_c38106 {
|
||||
background: {{colors.surface.default.hex}} !important;
|
||||
}
|
||||
|
||||
.panels__5e434 {
|
||||
background: {{colors.surface_container.default.hex}} !important;
|
||||
}
|
||||
|
||||
.channelTextArea_f75fb0,
|
||||
.form_f75fb0,
|
||||
.wrapper__44df5,
|
||||
.channelBottomBarArea_f75fb0,
|
||||
.attachWrapper__0923f,
|
||||
.themedBackground__74017,
|
||||
.stackedBars__74017 {
|
||||
background: {{colors.surface_container.default.hex}} !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.slateTextArea_ec4baf {
|
||||
background: {{colors.surface_container.default.hex}} !important;
|
||||
color: {{colors.on_surface.default.hex}} !important;
|
||||
}
|
||||
|
||||
.slateTextArea_ec4baf [data-slate-placeholder],
|
||||
.slateTextArea_ec4baf [data-slate-node],
|
||||
.slateTextArea_ec4baf span[data-slate-zero-width],
|
||||
[data-slate-placeholder],
|
||||
[class*="placeholder"],
|
||||
[class*="slateTextArea"] [class*="placeholder"] {
|
||||
color: {{colors.on_surface_variant.default.hex}} !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
.message__5126c::before,
|
||||
.mentioned__5126c::before,
|
||||
.replying__5126c::before,
|
||||
.ephemeral__5126c::before {
|
||||
background: none !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
[class*="mention"][class*="channel"],
|
||||
a[href*="/channels/"][class*="mention"] {
|
||||
color: {{colors.primary.default.hex}} !important;
|
||||
background: {{colors.surface_container_high.default.hex}} !important;
|
||||
}
|
||||
|
||||
[class*="numberBadge"],
|
||||
[class*="mentionsBadge"] {
|
||||
background-color: {{colors.primary.default.hex}} !important;
|
||||
color: {{colors.on_primary.default.hex}} !important;
|
||||
}
|
||||
|
||||
.newMessagesBar__0f481 {
|
||||
background-color: {{colors.primary.default.hex}} !important;
|
||||
color: {{colors.on_primary.default.hex}} !important;
|
||||
}
|
||||
|
||||
.divider__908e2 {
|
||||
border-color: {{colors.primary.default.hex}} !important;
|
||||
}
|
||||
|
||||
[class*="channel"]:not([class*="muted"]) [class*="name"],
|
||||
[class*="channel"]:not([class*="muted"]) [class*="link"] {
|
||||
color: {{colors.on_surface.default.hex}} !important;
|
||||
}
|
||||
|
||||
[class*="channel"][class*="muted"] [class*="name"],
|
||||
[class*="channel"][class*="muted"] [class*="link"] {
|
||||
color: {{colors.on_surface_variant.default.hex}} !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
/**
|
||||
* @name DMS Discord Base CSS
|
||||
* @author DMS Team
|
||||
* @version 3.0.0
|
||||
* @description Minimal Discord color theme - stock layout with DMS colors
|
||||
* @source https://github.com/yourusername/dankdots
|
||||
*/
|
||||
|
||||
body {
|
||||
--font-primary: var(--font), 'gg sans';
|
||||
--font-display: var(--font), 'gg sans';
|
||||
--font-code: var(--code-font), 'gg mono';
|
||||
}
|
||||
|
||||
@property --colors {
|
||||
syntax: 'off | on';
|
||||
inherits: false;
|
||||
initial-value: on;
|
||||
}
|
||||
|
||||
@container root style(--colors: on) {
|
||||
.visual-refresh body,
|
||||
.visual-refresh .theme-dark:not(.custom-user-profile-theme),
|
||||
.visual-refresh .theme-light:not(.custom-user-profile-theme) {
|
||||
--activity-card-background: var(--bg-3);
|
||||
--autocomplete-bg: var(--bg-3);
|
||||
--background-accent: var(--bg-4);
|
||||
--background-floating: var(--bg-3);
|
||||
--background-nested-floating: var(--bg-2);
|
||||
--background-mentioned: color-mix(in srgb, var(--accent-2), transparent 90%);
|
||||
--background-mentioned-hover: color-mix(in srgb, var(--accent-2), transparent 85%);
|
||||
--background-message-highlight: color-mix(in srgb, var(--text-3), transparent 95%);
|
||||
--background-message-highlight-hover: color-mix(in srgb, var(--text-3), transparent 92%);
|
||||
--background-message-hover: var(--message-hover);
|
||||
--background-primary: var(--bg-2);
|
||||
--background-secondary: var(--bg-3);
|
||||
--background-secondary-alt: var(--bg-3);
|
||||
--background-tertiary: var(--bg-2);
|
||||
--bg-base-primary: var(--bg-2);
|
||||
--bg-base-secondary: var(--bg-2);
|
||||
--bg-base-tertiary: var(--bg-3);
|
||||
--background-mod-subtle: var(--hover);
|
||||
--background-mod-normal: var(--active);
|
||||
--background-mod-strong: var(--active-2);
|
||||
--background-base-low: var(--bg-2);
|
||||
--background-base-lower: var(--bg-2);
|
||||
--background-base-lowest: var(--bg-2);
|
||||
--background-surface-high: var(--bg-3);
|
||||
--background-surface-higher: var(--bg-4);
|
||||
--background-surface-highest: var(--bg-4);
|
||||
--bg-surface-overlay: var(--bg-2);
|
||||
--bg-surface-raised: var(--bg-3);
|
||||
--chat-background-default: var(--bg-3);
|
||||
--chat-text-muted: var(--text-5);
|
||||
--input-background: var(--bg-3);
|
||||
--modal-background: var(--bg-2);
|
||||
--modal-footer-background: var(--bg-2);
|
||||
--background-modifier-accent: var(--hover);
|
||||
--background-modifier-active: var(--active);
|
||||
--background-modifier-hover: var(--hover);
|
||||
--background-modifier-selected: var(--active);
|
||||
--bg-mod-faint: var(--hover);
|
||||
--bg-mod-subtle: var(--bg-3);
|
||||
--bg-mod-strong: var(--bg-3);
|
||||
--bg-brand: var(--accent-2);
|
||||
--border-faint: transparent;
|
||||
--border-subtle: transparent;
|
||||
--border-normal: transparent;
|
||||
--border-strong: transparent;
|
||||
--input-border: transparent;
|
||||
--button-danger-background: var(--red-3);
|
||||
--button-danger-background-active: var(--red-5);
|
||||
--button-danger-background-hover: var(--red-4);
|
||||
--button-danger-background-disabled: var(--red-5);
|
||||
--button-danger-border: transparent;
|
||||
--button-filled-brand-text: var(--text-0);
|
||||
--button-filled-brand-background: var(--accent-3);
|
||||
--button-filled-brand-background-active: var(--accent-5);
|
||||
--button-filled-brand-background-hover: var(--accent-4);
|
||||
--button-filled-brand-border: transparent;
|
||||
--button-filled-brand-inverted-background: var(--text-1);
|
||||
--button-filled-brand-inverted-background-active: var(--text-3);
|
||||
--button-filled-brand-inverted-background-hover: var(--text-2);
|
||||
--button-filled-brand-inverted-text: var(--bg-1);
|
||||
--button-filled-white-background: var(--text-1);
|
||||
--button-filled-white-background-active: var(--text-3);
|
||||
--button-filled-white-background-hover: var(--text-2);
|
||||
--button-filled-white-text: var(--bg-1);
|
||||
--button-outline-danger-background: var(--bg-3);
|
||||
--button-outline-danger-background-active: var(--text-5);
|
||||
--button-outline-danger-background-hover: var(--bg-2);
|
||||
--button-outline-danger-border: transparent;
|
||||
--button-outline-danger-border-active: transparent;
|
||||
--button-outline-danger-border-hover: transparent;
|
||||
--button-outline-danger-text: var(--red-1);
|
||||
--button-outline-danger-text-active: var(--red-1);
|
||||
--button-outline-danger-text-hover: var(--red-1);
|
||||
--button-outline-primary-background: transparent;
|
||||
--button-outline-primary-background-active: var(--active);
|
||||
--button-outline-primary-background-hover: var(--hover);
|
||||
--button-outline-primary-border: transparent;
|
||||
--button-outline-primary-border-active: transparent;
|
||||
--button-outline-primary-border-hover: transparent;
|
||||
--button-outline-primary-text: var(--text-3);
|
||||
--button-outline-primary-text-active: var(--text-3);
|
||||
--button-outline-primary-text-hover: var(--text-3);
|
||||
--button-positive-background: var(--green-2);
|
||||
--button-positive-background-active: var(--green-4);
|
||||
--button-positive-background-hover: var(--green-3);
|
||||
--button-positive-background-disabled: var(--green-4);
|
||||
--button-positive-border: transparent;
|
||||
--button-secondary-background: var(--bg-4);
|
||||
--button-secondary-background-active: var(--text-5);
|
||||
--button-secondary-background-hover: var(--bg-3);
|
||||
--button-secondary-background-disabled: var(--bg-3);
|
||||
--button-secondary-text: var(--text-3);
|
||||
--button-transparent-background: var(--hover);
|
||||
--button-transparent-background-active: var(--active-2);
|
||||
--button-transparent-background-hover: var(--active);
|
||||
--button-transparent-text: var(--text-3);
|
||||
--redesign-button-secondary-text: var(--text-3);
|
||||
--card-primary-bg: var(--bg-3);
|
||||
--card-secondary-bg: var(--bg-4);
|
||||
--channel-icon: var(--text-4);
|
||||
--channels-default: var(--text-4);
|
||||
--embed-title: var(--text-2);
|
||||
--header-primary: var(--text-2);
|
||||
--header-secondary: var(--text-4);
|
||||
--header-muted: var(--text-4);
|
||||
--icon-muted: var(--text-5);
|
||||
--icon-primary: var(--text-3);
|
||||
--icon-secondary: var(--text-4);
|
||||
--icon-tertiary: var(--text-4);
|
||||
--text-brand: var(--accent-1);
|
||||
--text-danger: var(--red-1);
|
||||
--text-link: var(--accent-1);
|
||||
--text-low-contrast: var(--text-4);
|
||||
--text-muted: var(--text-5);
|
||||
--text-muted-on-default: var(--text-4);
|
||||
--text-normal: var(--text-3);
|
||||
--text-positive: var(--green-1);
|
||||
--text-primary: var(--text-3);
|
||||
--text-secondary: var(--text-4);
|
||||
--text-warning: var(--yellow-1);
|
||||
--text-default: var(--text-3);
|
||||
--text-tertiary: var(--text-4);
|
||||
--user-profile-overlay-background: var(--bg-2);
|
||||
--user-profile-overlay-background-hover: var(--bg-4);
|
||||
--status-danger: var(--red-2);
|
||||
--status-danger-background: var(--red-3);
|
||||
--status-danger-text: var(--white);
|
||||
--status-dnd: var(--dnd);
|
||||
--status-idle: var(--idle);
|
||||
--status-offline: var(--offline);
|
||||
--status-online: var(--online);
|
||||
--status-positive: var(--green-2);
|
||||
--status-positive-background: var(--green-2);
|
||||
--status-positive-text: var(--white);
|
||||
--status-speaking: var(--green-2);
|
||||
--status-warning: var(--yellow-2);
|
||||
--interactive-normal: var(--text-4);
|
||||
--interactive-hover: var(--text-3);
|
||||
--interactive-active: var(--text-3);
|
||||
--interactive-muted: var(--text-5);
|
||||
--mention-foreground: var(--accent-1);
|
||||
--mention-background: color-mix(in srgb, var(--accent-2), transparent 90%);
|
||||
--channel-text-area-placeholder: var(--text-5);
|
||||
--message-reacted-text: var(--text-2);
|
||||
--message-reacted-background: color-mix(in srgb, var(--accent-2), transparent 90%);
|
||||
--custom-channel-members-bg: var(--bg-2);
|
||||
--redesign-input-control-selected: var(--accent-2);
|
||||
--scrollbar-auto-thumb: var(--bg-4);
|
||||
--scrollbar-auto-track: transparent;
|
||||
--scrollbar-thin-thumb: var(--bg-4);
|
||||
--scrollbar-thin-track: transparent;
|
||||
--white: var(--text-0);
|
||||
--white-500: var(--text-0);
|
||||
--redesign-button-overlay-alpha-text: var(--text-2);
|
||||
--brand-360: var(--accent-2);
|
||||
--brand-500: var(--accent-2);
|
||||
--blurple-50: var(--accent-2);
|
||||
--red-400: var(--red-2);
|
||||
--red-500: var(--red-3);
|
||||
--green-360: var(--green-2);
|
||||
--primary-400: var(--text-4);
|
||||
--deprecated-text-input-bg: var(--bg-3);
|
||||
--deprecated-text-input-border: transparent;
|
||||
--background-code: var(--bg-3);
|
||||
}
|
||||
|
||||
.visual-refresh {
|
||||
.bg__960e4 { background: var(--bg-1); }
|
||||
.base_c48ade { background: var(--bg-1); }
|
||||
.colorPickerSwatch__459fb[style*="rgb(88, 101, 242)"],
|
||||
.newBadge_faa96b,
|
||||
.mentioned__5126c:before { background-color: var(--accent-2) !important; }
|
||||
.botTagRegular__82f07 { background-color: var(--accent-2); }
|
||||
.container__87bf1.checked__87bf1 { background-color: var(--accent-2) !important; }
|
||||
.container__87bf1.checked__87bf1 .slider__87bf1 > svg > path { fill: var(--accent-2) !important; }
|
||||
.newMessagesBar__0f481 { background-color: var(--accent-3); }
|
||||
.barFill_a562c8 { background-color: var(--accent-2) !important; }
|
||||
::selection,
|
||||
.highlight { background: var(--accent-3); color: var(--text-0); }
|
||||
rect[fill='#82838b'] { fill: var(--offline); }
|
||||
.status_a423bd[style='background-color: rgb(130, 131, 139);'] { background-color: var(--offline) !important; }
|
||||
rect[fill='#43a25a'],
|
||||
path[fill='#43a25a'],
|
||||
path[fill='var(--status-positive)'] { fill: var(--online); }
|
||||
.status_a423bd[style='background-color: rgb(67, 162, 90);'] { background-color: var(--online) !important; }
|
||||
rect[fill='#ca9654'] { fill: var(--idle); }
|
||||
.status_a423bd[style='background-color: rgb(202, 150, 84);'] { background-color: var(--idle) !important; }
|
||||
rect[fill='#d83a42'] { fill: var(--dnd); }
|
||||
.status_a423bd[style='background-color: rgb(216, 58, 66);'] { background-color: var(--dnd) !important; }
|
||||
rect[fill='#9147ff'] { fill: var(--streaming); }
|
||||
div[style*='background-color: rgb(67, 162, 90)'] { background-color: var(--online) !important; }
|
||||
}
|
||||
}
|
||||
@@ -1,99 +1,282 @@
|
||||
/**
|
||||
* @name dms-midnight
|
||||
* @description midnight-discord, generated by dms
|
||||
* @author refact0r
|
||||
* @version 1.6.2
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css
|
||||
* @authorId 508863359777505290
|
||||
* @authorLink https://www.refact0r.dev
|
||||
* @name DMS
|
||||
* @description Material Design 3 recolor generated by DankMaterialShell (matugen). Stock layout, colors only.
|
||||
* @author DankMaterialShell
|
||||
* @version 1.0.0
|
||||
* @website https://github.com/AvengeMedia/DankMaterialShell
|
||||
*/
|
||||
|
||||
/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */
|
||||
.theme-dark,
|
||||
.theme-light,
|
||||
.visual-refresh.theme-dark,
|
||||
.visual-refresh.theme-light,
|
||||
.visual-refresh .theme-dark,
|
||||
.visual-refresh .theme-light {
|
||||
/* base backgrounds — MD3 elevation: content darkest, chrome lighter */
|
||||
--background-base-low: {{colors.surface.default.hex}} !important;
|
||||
--chat-background: {{colors.surface.default.hex}} !important;
|
||||
--chat-background-default: {{colors.surface.default.hex}} !important;
|
||||
--background-primary: {{colors.surface.default.hex}} !important;
|
||||
--bg-base-primary: {{colors.surface.default.hex}} !important;
|
||||
--home-background: {{colors.surface.default.hex}} !important;
|
||||
|
||||
@import url('https://refact0r.github.io/midnight-discord/build/midnight.css');
|
||||
--background-base-lower: {{colors.surface_container_low.default.hex}} !important;
|
||||
--background-secondary: {{colors.surface_container_low.default.hex}} !important;
|
||||
--bg-base-secondary: {{colors.surface_container_low.default.hex}} !important;
|
||||
--custom-channel-members-bg: {{colors.surface_container_low.default.hex}} !important;
|
||||
|
||||
/* customize things here */
|
||||
:root {
|
||||
/* font, change to 'gg sans' for default discord font*/
|
||||
--font: 'gg sans';
|
||||
--background-base-lowest: {{colors.surface_container.default.hex}} !important;
|
||||
--app-frame-background: {{colors.surface_container.default.hex}} !important;
|
||||
--background-tertiary: {{colors.surface_container.default.hex}} !important;
|
||||
--background-secondary-alt: {{colors.surface_container.default.hex}} !important;
|
||||
--bg-base-tertiary: {{colors.surface_container.default.hex}} !important;
|
||||
--__header-bar-background: {{colors.surface_container.default.hex}} !important;
|
||||
|
||||
/* top left corner text */
|
||||
--corner-text: 'Midnight';
|
||||
--background-surface-high: {{colors.surface_container_high.default.hex}} !important;
|
||||
--bg-surface-raised: {{colors.surface_container_high.default.hex}} !important;
|
||||
--card-primary-bg: {{colors.surface_container_high.default.hex}} !important;
|
||||
--activity-card-background: {{colors.surface_container_high.default.hex}} !important;
|
||||
|
||||
/* color of status indicators and window controls */
|
||||
--online-indicator: {{colors.inverse_primary.default.hex}}; /* change to #23a55a for default green */
|
||||
--dnd-indicator: {{colors.error.default.hex}}; /* change to #f13f43 for default red */
|
||||
--idle-indicator: {{colors.tertiary_container.default.hex}}; /* change to #f0b232 for default yellow */
|
||||
--streaming-indicator: {{colors.on_primary.default.hex}}; /* change to #593695 for default purple */
|
||||
--background-surface-higher: {{colors.surface_container_high.default.hex}} !important;
|
||||
--bg-surface-overlay: {{colors.surface_container_high.default.hex}} !important;
|
||||
--background-floating: {{colors.surface_container_high.default.hex}} !important;
|
||||
--background-nested-floating: {{colors.surface_container_high.default.hex}} !important;
|
||||
--autocomplete-bg: {{colors.surface_container_high.default.hex}} !important;
|
||||
|
||||
/* accent colors */
|
||||
--accent-1: {{colors.tertiary.default.hex}}; /* links */
|
||||
--accent-2: {{colors.primary.default.hex}}; /* general unread/mention elements, some icons when active */
|
||||
--accent-3: {{colors.primary.default.hex}}; /* accent buttons */
|
||||
--accent-4: {{colors.surface_bright.default.hex}}; /* accent buttons when hovered */
|
||||
--accent-5: {{colors.primary_fixed_dim.default.hex}}; /* accent buttons when clicked */
|
||||
--mention: {{colors.surface.default.hex}}; /* mentions & mention messages */
|
||||
--mention-hover: {{colors.surface_bright.default.hex}}; /* mentions & mention messages when hovered */
|
||||
--background-surface-highest: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--modal-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--modal-footer-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--background-accent: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--card-secondary-bg: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--user-profile-overlay-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
|
||||
/* text colors */
|
||||
--text-0: {{colors.surface.default.hex}}; /* text on colored elements */
|
||||
--text-1: {{colors.on_surface.default.hex}}; /* other normally white text */
|
||||
--text-2: {{colors.on_surface.default.hex}}; /* headings and important text */
|
||||
--text-3: {{colors.on_surface_variant.default.hex}}; /* normal text */
|
||||
--text-4: {{colors.on_surface_variant.default.hex}}; /* icon buttons and channels */
|
||||
--text-5: {{colors.outline.default.hex}}; /* muted channels/chats and timestamps */
|
||||
--chat-border: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
|
||||
|
||||
/* background and dark colors */
|
||||
--bg-1: {{colors.surface_variant.default.hex}}; /* dark buttons when clicked */
|
||||
--bg-2: {{colors.surface_container_high.default.hex}}; /* dark buttons */
|
||||
--bg-3: {{colors.surface_container_low.default.hex}}; /* spacing, secondary elements */
|
||||
--bg-4: {{colors.surface.default.hex}}; /* main background color */
|
||||
--hover: {{colors.surface_bright.default.hex}}; /* channels and buttons when hovered */
|
||||
--active: {{colors.surface_bright.default.hex}}; /* channels and buttons when clicked or selected */
|
||||
--message-hover: {{colors.surface_bright.default.hex}}; /* messages when hovered */
|
||||
/* text */
|
||||
--text-default: {{colors.on_surface.default.hex}} !important;
|
||||
--text-normal: {{colors.on_surface.default.hex}} !important;
|
||||
--text-primary: {{colors.on_surface.default.hex}} !important;
|
||||
--text-strong: {{colors.on_surface.default.hex}} !important;
|
||||
--header-primary: {{colors.on_surface.default.hex}} !important;
|
||||
--embed-title: {{colors.on_surface.default.hex}} !important;
|
||||
--interactive-active: {{colors.on_surface.default.hex}} !important;
|
||||
--input-text-default: {{colors.on_surface.default.hex}} !important;
|
||||
|
||||
/* amount of spacing and padding */
|
||||
--spacing: 12px;
|
||||
--text-secondary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--text-muted: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--text-subtle: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--text-tertiary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--chat-text-muted: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--header-secondary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--header-muted: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--text-muted-on-default: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--text-low-contrast: {{colors.on_surface_variant.default.hex}} !important;
|
||||
|
||||
/* animations */
|
||||
/* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */
|
||||
--list-item-transition: 0.2s ease; /* channels/members/settings hover transition */
|
||||
--unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */
|
||||
--moon-spin-transition: 0.4s ease; /* moon icon spin */
|
||||
--icon-spin-transition: 1s ease; /* round icon button spin (settings, emoji, etc.) */
|
||||
--interactive-normal: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--channels-default: {{colors.outline.default.hex}} !important;
|
||||
--channel-icon: {{colors.outline.default.hex}} !important;
|
||||
--icon-primary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--icon-secondary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--icon-tertiary: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--interactive-icon-default: {{colors.on_surface_variant.default.hex}} !important;
|
||||
--interactive-hover: {{colors.on_surface.default.hex}} !important;
|
||||
--interactive-icon-hover: {{colors.on_surface.default.hex}} !important;
|
||||
--interactive-icon-active: {{colors.on_surface.default.hex}} !important;
|
||||
--interactive-text-hover: {{colors.on_surface.default.hex}} !important;
|
||||
--interactive-text-active: {{colors.on_surface.default.hex}} !important;
|
||||
|
||||
/* corner roundness (border-radius) */
|
||||
--roundness-xl: 22px; /* roundness of big panel outer corners */
|
||||
--roundness-l: 20px; /* popout panels */
|
||||
--roundness-m: 16px; /* smaller panels, images, embeds */
|
||||
--roundness-s: 12px; /* members, settings inputs */
|
||||
--roundness-xs: 10px; /* channels, buttons */
|
||||
--roundness-xxs: 8px; /* searchbar, small elements */
|
||||
--interactive-muted: {{colors.outline_variant.default.hex}} !important;
|
||||
--icon-muted: {{colors.outline.default.hex}} !important;
|
||||
--channel-text-area-placeholder: {{colors.outline.default.hex}} !important;
|
||||
--input-placeholder-text-default: {{colors.outline.default.hex}} !important;
|
||||
|
||||
/* direct messages moon icon */
|
||||
/* change to block to show, none to hide */
|
||||
--discord-icon: none; /* discord icon */
|
||||
--moon-icon: block; /* moon icon */
|
||||
--moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */
|
||||
--moon-icon-size: auto;
|
||||
--text-link: {{colors.primary.default.hex}} !important;
|
||||
--text-brand: {{colors.primary.default.hex}} !important;
|
||||
--control-brand-foreground: {{colors.primary.default.hex}} !important;
|
||||
--control-brand-foreground-new: {{colors.primary.default.hex}} !important;
|
||||
--badge-text-brand: {{colors.primary.default.hex}} !important;
|
||||
|
||||
/* filter uncolorable elements to fit theme */
|
||||
/* (just set to none, they're too much work to configure) */
|
||||
--login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */
|
||||
--green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */
|
||||
--blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */
|
||||
--text-danger: {{colors.error.default.hex}} !important;
|
||||
--text-feedback-critical: {{colors.error.default.hex}} !important;
|
||||
--text-positive: #23a55a !important;
|
||||
--text-feedback-positive: #23a55a !important;
|
||||
--text-warning: #f0b232 !important;
|
||||
--text-feedback-warning: #f0b232 !important;
|
||||
--text-feedback-info: {{colors.secondary.default.hex}} !important;
|
||||
|
||||
/* interactive state layers — translucent, MD3 opacities */
|
||||
--background-modifier-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
--background-mod-subtle: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
--bg-mod-faint: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
--interactive-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
|
||||
--background-modifier-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
|
||||
--background-mod-normal: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
|
||||
--interactive-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
|
||||
|
||||
--background-modifier-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
--background-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
--bg-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
--interactive-background-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
|
||||
--background-modifier-accent: color-mix(in srgb, {{colors.on_surface.default.hex}} 6%, transparent) !important;
|
||||
--background-message-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;
|
||||
--message-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;
|
||||
|
||||
--background-message-highlight: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
|
||||
--background-message-highlight-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;
|
||||
--message-highlight-background-default: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
|
||||
--message-highlight-background-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;
|
||||
|
||||
--background-mentioned: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
|
||||
--background-mentioned-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
--message-mentioned-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
|
||||
--message-mentioned-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
|
||||
--mention-background: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
|
||||
--mention-foreground: {{colors.primary.default.hex}} !important;
|
||||
|
||||
--message-reacted-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
|
||||
--message-reacted-text-default: {{colors.on_surface.default.hex}} !important;
|
||||
|
||||
/* brand ramp — absolute lightness steps, mode-safe */
|
||||
--brand-100: color-mix(in srgb, {{colors.primary.default.hex}} 12%, #ffffff) !important;
|
||||
--brand-200: color-mix(in srgb, {{colors.primary.default.hex}} 25%, #ffffff) !important;
|
||||
--brand-260: color-mix(in srgb, {{colors.primary.default.hex}} 33%, #ffffff) !important;
|
||||
--brand-300: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #ffffff) !important;
|
||||
--brand-360: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #ffffff) !important;
|
||||
--brand-400: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #ffffff) !important;
|
||||
--brand-500: {{colors.primary.default.hex}} !important;
|
||||
--brand-560: color-mix(in srgb, {{colors.primary.default.hex}} 90%, #000000) !important;
|
||||
--brand-600: color-mix(in srgb, {{colors.primary.default.hex}} 85%, #000000) !important;
|
||||
--brand-700: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #000000) !important;
|
||||
--brand-800: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #000000) !important;
|
||||
--brand-900: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #000000) !important;
|
||||
--brand-experiment: {{colors.primary.default.hex}} !important;
|
||||
--brand-experiment-360: {{colors.primary.default.hex}} !important;
|
||||
--brand-experiment-500: {{colors.primary.default.hex}} !important;
|
||||
--blurple-50: {{colors.primary.default.hex}} !important;
|
||||
--blue-500: {{colors.primary.default.hex}} !important;
|
||||
|
||||
/* buttons and controls — on-color state layers */
|
||||
--bg-brand: {{colors.primary.default.hex}} !important;
|
||||
--control-primary-background-default: {{colors.primary.default.hex}} !important;
|
||||
--control-primary-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
|
||||
--control-primary-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
|
||||
--button-filled-brand-background: {{colors.primary.default.hex}} !important;
|
||||
--button-filled-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
|
||||
--button-filled-brand-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
|
||||
--button-filled-brand-text: {{colors.on_primary.default.hex}} !important;
|
||||
|
||||
--control-secondary-background-default: {{colors.surface_container_high.default.hex}} !important;
|
||||
--control-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--control-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
|
||||
--control-secondary-text-default: {{colors.on_surface.default.hex}} !important;
|
||||
--button-secondary-background: {{colors.surface_container_high.default.hex}} !important;
|
||||
--button-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--button-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
|
||||
--button-secondary-text: {{colors.on_surface.default.hex}} !important;
|
||||
--redesign-button-secondary-text: {{colors.on_surface.default.hex}} !important;
|
||||
|
||||
--button-danger-background: {{colors.error.default.hex}} !important;
|
||||
--button-danger-background-hover: color-mix(in srgb, {{colors.error.default.hex}} 92%, {{colors.on_error.default.hex}}) !important;
|
||||
--button-danger-background-active: color-mix(in srgb, {{colors.error.default.hex}} 85%, {{colors.on_error.default.hex}}) !important;
|
||||
--button-danger-text: {{colors.on_error.default.hex}} !important;
|
||||
--control-critical-primary-background-default: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-text: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-text-hover: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-text-active: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-border: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-border-hover: {{colors.error.default.hex}} !important;
|
||||
--button-outline-danger-border-active: {{colors.error.default.hex}} !important;
|
||||
|
||||
--button-positive-background: #23a55a !important;
|
||||
--button-positive-background-hover: color-mix(in srgb, #23a55a 90%, #ffffff) !important;
|
||||
|
||||
--button-outline-primary-text: {{colors.on_surface.default.hex}} !important;
|
||||
--button-outline-primary-text-hover: {{colors.on_surface.default.hex}} !important;
|
||||
--button-outline-primary-text-active: {{colors.on_surface.default.hex}} !important;
|
||||
--button-outline-primary-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
--button-outline-primary-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
|
||||
--button-outline-brand-text: {{colors.primary.default.hex}} !important;
|
||||
--button-outline-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
|
||||
--button-transparent-text: {{colors.on_surface.default.hex}} !important;
|
||||
--button-transparent-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
|
||||
--button-transparent-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
|
||||
|
||||
--redesign-input-control-selected: {{colors.primary.default.hex}} !important;
|
||||
--focus-primary: {{colors.primary.default.hex}} !important;
|
||||
--__adaptive-focus-ring-color: {{colors.primary.default.hex}} !important;
|
||||
|
||||
/* status — keep Discord semantics, theme only offline */
|
||||
--status-online: #23a55a !important;
|
||||
--status-positive: #23a55a !important;
|
||||
--status-speaking: #23a55a !important;
|
||||
--text-status-online: #23a55a !important;
|
||||
--icon-status-online: #23a55a !important;
|
||||
--status-idle: #f0b232 !important;
|
||||
--text-status-idle: #f0b232 !important;
|
||||
--icon-status-idle: #f0b232 !important;
|
||||
--status-dnd: #f13f43 !important;
|
||||
--text-status-dnd: #f13f43 !important;
|
||||
--icon-status-dnd: #f13f43 !important;
|
||||
--status-danger: #f13f43 !important;
|
||||
--status-offline: {{colors.outline.default.hex}} !important;
|
||||
--text-status-offline: {{colors.outline.default.hex}} !important;
|
||||
--icon-status-offline: {{colors.outline.default.hex}} !important;
|
||||
|
||||
/* feedback, notices, badges */
|
||||
--background-feedback-critical: {{colors.error_container.default.hex}} !important;
|
||||
--notice-background-critical: {{colors.error_container.default.hex}} !important;
|
||||
--notice-text-critical: {{colors.on_error_container.default.hex}} !important;
|
||||
--icon-feedback-critical: {{colors.error.default.hex}} !important;
|
||||
--background-feedback-positive: {{colors.primary_container.default.hex}} !important;
|
||||
--notice-background-positive: {{colors.primary_container.default.hex}} !important;
|
||||
--notice-text-positive: {{colors.on_primary_container.default.hex}} !important;
|
||||
--background-feedback-info: {{colors.secondary_container.default.hex}} !important;
|
||||
--notice-background-info: {{colors.secondary_container.default.hex}} !important;
|
||||
--notice-text-info: {{colors.on_secondary_container.default.hex}} !important;
|
||||
--background-feedback-warning: {{colors.tertiary_container.default.hex}} !important;
|
||||
--notice-background-warning: {{colors.tertiary_container.default.hex}} !important;
|
||||
--notice-text-warning: {{colors.on_tertiary_container.default.hex}} !important;
|
||||
--badge-notification-background: {{colors.error.default.hex}} !important;
|
||||
--red-400: {{colors.error.default.hex}} !important;
|
||||
--red-430: {{colors.error.default.hex}} !important;
|
||||
--red-500: {{colors.error.default.hex}} !important;
|
||||
|
||||
/* inputs, code, spoilers */
|
||||
--input-background-default: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--input-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--channeltextarea-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--deprecated-text-input-bg: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--input-border-default: {{colors.outline_variant.default.hex}} !important;
|
||||
--input-border: {{colors.outline_variant.default.hex}} !important;
|
||||
--deprecated-text-input-border: {{colors.outline_variant.default.hex}} !important;
|
||||
--background-code: {{colors.surface_container.default.hex}} !important;
|
||||
--spoiler-hidden-background: {{colors.surface_container_highest.default.hex}} !important;
|
||||
--spoiler-revealed-background: {{colors.surface_container.default.hex}} !important;
|
||||
|
||||
/* scrollbars */
|
||||
--scrollbar-auto-thumb: {{colors.outline_variant.default.hex}} !important;
|
||||
--scrollbar-thin-thumb: {{colors.outline_variant.default.hex}} !important;
|
||||
--scrollbar-auto-scrollbar-color-thumb: {{colors.outline_variant.default.hex}} !important;
|
||||
--scrollbar-auto-track: transparent !important;
|
||||
--scrollbar-thin-track: transparent !important;
|
||||
--scrollbar-auto-scrollbar-color-track: transparent !important;
|
||||
|
||||
/* borders */
|
||||
--border-faint: color-mix(in srgb, {{colors.outline_variant.default.hex}} 30%, transparent) !important;
|
||||
--border-subtle: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
|
||||
--border-muted: {{colors.outline_variant.default.hex}} !important;
|
||||
--border-normal: {{colors.outline_variant.default.hex}} !important;
|
||||
--border-strong: {{colors.outline.default.hex}} !important;
|
||||
}
|
||||
|
||||
/* Selected chat/friend text */
|
||||
.selected_f5eb4b,
|
||||
.selected_f6f816 .link_d8bfb3 {
|
||||
color: var(--text-0) !important;
|
||||
background: var(--accent-3) !important;
|
||||
::selection {
|
||||
background: color-mix(in srgb, {{colors.primary.default.hex}} 35%, transparent);
|
||||
}
|
||||
|
||||
.selected_f6f816 .link_d8bfb3 * {
|
||||
color: var(--text-0) !important;
|
||||
fill: var(--text-0) !important;
|
||||
.theme-dark .highlight,
|
||||
.theme-light .highlight {
|
||||
background: color-mix(in srgb, {{colors.primary.default.hex}} 30%, transparent);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user