mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-08-01 19:18:28 -04:00
bbedward
305 lines
20 KiB
CSS
305 lines
20 KiB
CSS
/**
|
|
* @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
|
|
*/
|
|
|
|
.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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--chat-border: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
|
|
|
|
/* 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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
--background-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.primary.default.hex}} !important;
|
|
--background-feedback-notification: {{colors.primary.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;
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, {{colors.primary.default.hex}} 35%, transparent);
|
|
}
|
|
|
|
.theme-dark .highlight,
|
|
.theme-light .highlight {
|
|
background: color-mix(in srgb, {{colors.primary.default.hex}} 30%, transparent);
|
|
color: inherit;
|
|
}
|
|
|
|
/* unread pills + notification badges → primary */
|
|
.theme-dark span[class*="unreadPill"],
|
|
.theme-light span[class*="unreadPill"] {
|
|
--interactive-text-active: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
.theme-dark div[class*="numberBadge"],
|
|
.theme-light div[class*="numberBadge"],
|
|
.theme-dark div[class*="newBadge"],
|
|
.theme-light div[class*="newBadge"],
|
|
.theme-dark div[class*="divider"] [class*="endCap"],
|
|
.theme-light div[class*="divider"] [class*="endCap"],
|
|
.theme-dark span[class*="botTag"],
|
|
.theme-light span[class*="botTag"],
|
|
.theme-dark div[class*="newMessagesBar"],
|
|
.theme-light div[class*="newMessagesBar"] {
|
|
--white: {{colors.on_primary.default.hex}} !important;
|
|
--white-500: {{colors.on_primary.default.hex}} !important;
|
|
}
|