Material Design 3 dark theme with tonal surfaces, dynamic color, and the Material You design language.
Material Design 3 dark theme colors derived from the tonal palette system. Primary purple (#D0BCFF) anchors the scheme with secondary and tertiary complements. Dark surfaces use tonal elevation rather than shadow to convey depth.
Primary
#D0BCFF
On Primary
#381E72
Primary Container
#4F378B
On Primary Container
#EADDFF
Secondary
#CCC2DC
Secondary Container
#4A4458
Tertiary
#EFB8C8
Tertiary Container
#633B48
Error
#F2B8B5
Error Container
#8C1D18
Surface / Background
#1C1B1F
On Surface
#E6E1E5
On Surface Variant
#CAC4D0
Outline
#938F99
Outline Variant
#49454F
In M3 dark theme, elevation is expressed through tonal surface colors rather than shadow. Higher surfaces receive a subtle primary-tinted white overlay, creating visual hierarchy without traditional drop shadows.
Material Design 3 type scale using Roboto Flex for display/headline roles and Roboto for body/label roles. Five categories (Display, Headline, Title, Body, Label) each with three sizes provide complete typographic hierarchy.
Material
Dark Theme
Tonal Surfaces
Dynamic Color
Elevation System
Surface Containers
Component Hierarchy
Navigation Labels
Card Subheads
Body text is set in Roboto at 16px. Generous letter-spacing of 0.5px ensures readability against dark surfaces where contrast demands precision.
Secondary body text at 14px works for supporting content and descriptions within cards and dialogs.
Captions and helper text at 12px for form fields and metadata.
BUTTON LABELS & CHIPS
FORM LABELS & NAVIGATION
OVERLINES & BADGES
Material Design uses a 4px baseline grid. All spacing increments are multiples of 4, creating consistent rhythm across components: 4, 8, 16, 24, 32, 48, 64 pixels.
M3 defines a shape scale from None to Full. Corner radii communicate component roles: small radii for utility, large radii for prominent actions.
M3 provides five button types ranked by emphasis. Filled for highest emphasis, text for lowest. All use the full (pill) shape with 40px default height. FABs use larger shapes with elevation for primary actions.
M3 offers both outlined and filled text field variants. Outlined is the default, with a visible border that transforms on focus. Labels float above the field. Supporting text provides hints and validation.
We'll never share your email
Username must be at least 3 characters
M3 defines three card variants: Elevated (shadow + surface tint), Filled (higher surface container), and Outlined (border). Each serves different emphasis levels in the layout hierarchy.
Design System
Dynamic color extraction creates personalized palettes from wallpaper content, applied across the entire system UI.
Theming
Tonal surfaces replace shadow-based elevation. Higher surfaces receive subtle primary-tinted overlays for visual depth.
Components
M3 shape scale ranges from None (0px) to Full (pill). Corner radii communicate component importance and function within the layout.
Motion
Standard easing and emphasized easing curves create natural, physics-based motion that guides attention without distraction.
Tokens
Systematic naming conventions for colors, typography, and spacing ensure consistency across platforms and implementations.
Typography
Variable font with weight, width, and optical size axes for responsive type.
Accessibility
Dark theme colors meet WCAG AA requirements for text readability.
Status messages use semantic color containers from the M3 palette. Each alert type pairs a container color with appropriate on-container text for guaranteed readability. Snackbars use inverse surface for temporary messages.
Information
Success
Warning
Error
Snackbars use inverse surface colors to stand out from the dark theme. They appear temporarily at the bottom of the screen with optional actions.