Material You Mapping

The hypr desktop maps Gtheme’s 19-color palette to Material You (M3) design tokens. This provides a modern, cohesive design language across all themed applications while still using Gtheme’s standard color variables.

Color mapping

Gtheme variable	M3 token	Usage
background	surface, surface_dim	Main backgrounds
foreground	on_surface	Primary text
blue	primary	Primary accent, active elements
blue-hg	on_primary_container	Text on primary containers
cyan	secondary	Secondary accent
cyan-hg	on_secondary_container	Text on secondary containers
magenta	tertiary	Tertiary accent
magenta-hg	on_tertiary_container	Text on tertiary containers
red	error	Errors, destructive actions
red-hg	on_error_container	Text on error containers
black	surface_container	Elevated surfaces (cards, panels)
black-hg	surface_container_high	Higher elevation surfaces
white	outline	Borders, dividers
white-hg	on_surface_variant	Secondary text, icons
selection-background	inverse_surface	Inverted surface (snackbars, tooltips)
selection-foreground	inverse_on_surface	Text on inverted surfaces
green	surface_bright	Brighter surface variant
green-hg	surface_dim	Dimmer surface variant
yellow	primary_container	Tinted primary surfaces
yellow-hg	on_primary_container	Text on tinted surfaces

Note

This mapping is specific to the hypr desktop. Other desktops can use the standard ANSI color meanings or define their own semantic mappings.

Pattern examples

The hypr desktop generates M3 color files in multiple formats. One pattern themes multiple applications through the same color system.

Hyprland variables

<[output-file]>=~/.config/hypr/colors/colors.conf

# Primary accent
$primary = rgba(<[blue]>ff)
$on_primary = rgba(<[background]>ff)
$primary_container = rgba(<[blue]>ff)
$on_primary_container = rgba(<[blue-hg]>ff)

# Secondary accent
$secondary = rgba(<[cyan]>ff)
$on_secondary = rgba(<[background]>ff)

# Surface / Background
$surface = rgba(<[background]>ff)
$surface_container = rgba(<[black]>ff)
$surface_container_high = rgba(<[black-hg]>ff)
$on_surface = rgba(<[foreground]>ff)
$on_surface_variant = rgba(<[white]>ff)

# Outline
$outline = rgba(<[white]>ff)

Hyprland configs reference these variables with $primary, $surface, etc.

CSS custom properties (Waybar)

<[output-file]>=~/.config/waybar/colors/colors.css

@define-color background #<[background]>;
@define-color on_background #<[foreground]>;
@define-color primary #<[blue]>;
@define-color secondary #<[cyan]>;
@define-color tertiary #<[magenta]>;
@define-color error #<[red]>;
@define-color surface #<[background]>;
@define-color surface_container #<[black]>;
@define-color on_surface #<[foreground]>;
@define-color outline #<[white]>;

Tip

The waybar-colors CSS file is also @imported by swaync and wlogout stylesheets, so a single pattern themes three applications.

Rofi theme

<[output-file]>=~/.config/rofi/colors.rasi

* {
    primary: #<[blue]>;
    secondary: #<[cyan]>;
    tertiary: #<[magenta]>;
    error: #<[red]>;
    surface: #<[background]>;
    on-surface: #<[foreground]>;
    surface-container: #<[black]>;
    outline: #<[white]>;
}

Design principles

The mapping follows these principles:

1. ANSI colors as semantic roles — instead of using blue for “blue things”, blue is the primary accent. Cyan is secondary, magenta is tertiary.
2. Black variants as elevation — black and black-hg represent elevated surfaces (cards, panels, popups) rather than literal black.
3. White variants as secondary text — white is outlines/borders, white-hg is secondary text.
4. Consistent across all apps — the same color tokens are used in Hyprland, Waybar, Rofi, swaync, wlogout, and more.

This means switching themes produces a cohesive look across the entire desktop, not just matching terminal colors.