CSS Variables

The Adwaita stylesheet provides a number of predefined CSS variables for colors that can be used from applications.

UI Colors

These colors are used throughout the UI. They can differ between the light and dark styles.

Many colors are grouped as background/foreground pairs. These colors are always meant to be used together as the background and foreground color, for example:

my-widget {
  background-color: var(--accent-bg-color);
  color: var(--accent-fg-color);
}

Some colors also have standalone versions. They are similar to the background version, but provide better contrast when used as foreground colors on top of a neutral background - for example, colorful text in a window.

my-widget {
  color: var(--accent-color);
}

Standalone colors are typically darker than the corresponding background color for the light style, and lighter than the background for the dark style.

Applications can override any of these colors by re-declaring them, for example:

:root {
  --accent-color: #c01c28;
  --accent-bg-color: #e01b24;
}

Standalone colors can be derived background colors as follows:

Light style:

:root {
  --accent-color: oklab(from var(--accent-bg-color) min(l, 0.5) a b);
}

Dark style:

:root {
  --accent-color: oklab(from var(--accent-bg-color) max(l, 0.85) a b);
}

Accent Colors

The accent color is used across many different widgets, often to indicate that a widget is important, interactive, or currently active. Try to avoid using it on large surfaces, or on too many items on the same view.

The .accent style class allows to use it for widgets such as GtkLabel.

Name	Light	Dark
`--accent-color`	`#1c71d8`	`#78aeed`
`--accent-bg-color`	`#3584e4`	`#3584e4`
`--accent-fg-color`	`#ffffff`	`#ffffff`

Destructive Colors

The destructive color indicates a dangerous action, such as deleting a file. It’s used by GtkButton and AdwButtonRow with the .destructive-action style class.

Name	Light	Dark
`--destructive-color`	`#c01c28`	`#ff7b63`
`--destructive-bg-color`	`#e01b24`	`#c01c28`
`--destructive-fg-color`	`#ffffff`	`#ffffff`

Success Colors

This color is used with the .success style class, or in a GtkLevelBar with the GTK_LEVEL_BAR_OFFSET_HIGH offset.

Name	Light	Dark
`--success-color`	`#1b8553`	`#8ff0a4`
`--success-bg-color`	`#2ec27e`	`#26a269`
`--success-fg-color`	`#ffffff`	`#ffffff`

Warning Colors

This color is used with the .warning style class, or in a GtkLevelBar with the GTK_LEVEL_BAR_OFFSET_LOW offset.

Name	Light	Dark
`--warning-color`	`#9c6e03`	`#f8e45c`
`--warning-bg-color`	`#e5a50a`	`#cd9309`
`--warning-fg-color`	`rgb(0 0 0 / 80%)`	`rgb(0 0 0 / 80%)`

Error Colors

This color is used with the .error style class.

Name	Light	Dark
`--error-color`	`#c01c28`	`#ff7b63`
`--error-bg-color`	`#e01b24`	`#c01c28`
`--error-fg-color`	`#ffffff`	`#ffffff`

Window Colors

These colors are used on GtkWindow, as well as with the .background style class.

Name		Light		Dark
`--window-bg-color`		`#fafafa`		`#242424`
`--window-fg-color`		`rgb(0 0 0 / 80%)`		`#ffffff`

View Colors

These colors are used in a variety of widgets such as GtkTextView, as well as with the .view style class.

Name		Light		Dark
`--view-bg-color`		`#ffffff`		`#1e1e1e`
`--view-fg-color`		`rgb(0 0 0 / 80%)`		`#ffffff`

Header Bar Colors

These colors are used for header bars and similar widgets, generally attached to the top or bottom sides of a window. The full list of widgets using them:

AdwToolbarView uses it for the top and bottom bars
AdwHeaderBar except with the .flat style class
AdwTabBar except with the .inline style class
GtkHeaderBar except with the .flat style class
GtkSearchBar except with the .inline style class
GtkActionBar

Name	Light	Dark
`--headerbar-bg-color`	`#ffffff`	`#303030`
`--headerbar-fg-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--headerbar-border-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--headerbar-backdrop-color`	`#fafafa`	`#242424`
`--headerbar-shade-color`	`rgb(0 0 0 / 12%)`	`rgb(0 0 0 / 36%)`
`--headerbar-darker-shade-color`	`rgb(0 0 0 / 12%)`	`rgb(0 0 0 / 90%)`

--headerbar-border-color has the same default value as --headerbar-fg-color, but doesn’t change along with it. This can be useful if a light window has a dark header bar with light text; in this case it may be desirable to keep the border dark. This variable is only used for vertical borders - for example, separators between the 2 header bars in a split header bar layout.

--headerbar-backdrop-color is used instead of --headerbar-bg-color when the window is not focused. By default it’s an alias of --window-bg-color and changes together with it. When overriding header bar colors, make sure to set it to a value matching your --headerbar-bg-color.

--headerbar-shade-color is used to provide a dark shadow or a border for header bars and similar widgets. This color should always be partially transparent black.

--headerbar-darker-shade-color is used for the ADW_TOOLBAR_RAISED_BORDER border. This color should always be partially transparent black, and is intended to be darker than both --headerbar-bg-color and --headerbar-backdrop-color on top of white color.

These colors are used for sidebars, generally attached to the left or right sides of a window. They are used by AdwNavigationSplitView and AdwOverlaySplitView when they are not collapsed.

Name	Light	Dark
`--sidebar-bg-color`	`#ebebeb`	`#303030`
`--sidebar-fg-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--sidebar-backdrop-color`	`#f2f2f2`	`#2a2a2a`
`--sidebar-border-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 36%)`
`--sidebar-shade-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 25%)`

--sidebar-backdrop-color is used instead of --sidebar-bg-color when the window is not focused. When overriding sidebar colors, make sure to set it to a value matching your --sidebar-bg-color.

--sidebar-shade-color is used to provide a dark border for sidebars, scroll undershoots within sidebars, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --sidebar-bg-color.

--sidebar-border-color is used to provide a dark border for sidebars. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --sidebar-bg-color next to --window-bg-color or --view-bg-color.

--sidebar-shade-coloris used to provide scroll undershoots within sidebars, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --sidebar-bg-color.

Since: 1.4

These colors are used for middle panes in triple-pane layouts, created via nesting two split views within one another.

secondary-sidebar

Name	Light	Dark
`--secondary-sidebar-bg-color`	`#f3f3f3`	`#2a2a2a`
`--secondary-sidebar-fg-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--secondary-sidebar-backdrop-color`	`#f6f6f6`	`#272727`
`--secondary-sidebar-border-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 36%)`
`--secondary-sidebar-shade-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 25%)`

--secondary-sidebar-backdrop-color is used instead of --secondary-sidebar-bg-color when the window is not focused. When overriding secondary sidebar colors, make sure to set it to a value matching your --secondary-sidebar-bg-color.

--secondary-sidebar-border-color is used to provide a dark border for secondary sidebars. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --secondary-sidebar-bg-color next to --sidebar-bg-color.

--secondary-sidebar-shade-color is used to provide scroll undershoots within secondary sidebars, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --secondary-sidebar-bg-color.

--secondary-sidebar-shade-color is used to provide a dark border for secondary sidebars, scroll undershoots within secondary sidebars, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --secondary-sidebar-bg-color.

Since: 1.4

Card Colors

These colors are used for cards and boxed lists.

Name	Light	Dark
`--card-bg-color`	`#ffffff`	`rgb(255 255 255 / 8%)`
`--card-fg-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--card-shade-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 36%)`

--card-shade-color is used to provide separators between boxed list rows and similar widgets. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --card-bg-color.

Thumbnail Colors

These colors are used for AdwTabOverview thumbnails.

Name		Light		Dark
`--thumbnail-bg-color`		`#ffffff`		`#383838`
`--thumbnail-fg-color`		`rgb(0 0 0 / 80%)`		`#ffffff`

Since: 1.3

Dialog Colors

These colors are used for AdwAlertDialog.

Name		Light		Dark
`--dialog-bg-color`		`#fafafa`		`#383838`
`--dialog-fg-color`		`rgb(0 0 0 / 80%)`		`#ffffff`

Since: 1.2

These colors are used for GtkPopover.

Name	Light	Dark
`--popover-bg-color`	`#ffffff`	`#383838`
`--popover-fg-color`	`rgb(0 0 0 / 80%)`	`#ffffff`
`--popover-shade-color`	`rgb(0 0 0 / 7%)`	`rgb(0 0 0 / 25%)`

--popover-shade-color is used for scroll undershoot styles within popovers, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --popover-bg-color. This color is only available since 1.4.

Miscellaneous Colors

Name		Light		Dark
`--shade-color`		`rgb(0 0 0 / 7%)`		`rgb(0 0 0 / 25%)`
`--scrollbar-outline-color`		`#ffffff`		`rgb(0 0 0 / 50%)`

--shade-color is used for scroll undershoots, as well as transitions in AdwNavigationView, AdwOverlaySplitView, AdwLeaflet and AdwFlap. This color should always be partially transparent black, with the opacity tuned to be well visible on top of --window-bg-color.

--scrollbar-outline-color is used by GtkScrollbar to ensure that overlay scrollbars are visible regardless of the content color. It should always be the opposite of the scrollbar color - light with a dark scrollbar and dark

Helpers

These variables are provided for convenience (particularly, automatic high contrast mode support) and should not be overridden.

Opacity

Name	Regular	High contrast
`--border-opacity`	`15%`	`50%`
`--dim-opacity`	`55%`	`90%`
`--disabled-opacity`	`50%`	`40%`

These variables represent the commonly used opacity values.

--border-opacity is used for borders. (see --border-color

--dim-opacity is used for the .dim-label style class and other similar contexts, like window and row subtitles.

--disabled-opacity is used for disabled widgets. (see GtkWidget:sensitive)

These variables can be used to automatically support high contrast mode.

Border Color

Name	Value
`--border-color`	`color-mix(in srgb, currentColor var(--border-opacity), transparent)`

Border color is derived from the current foreground color (currentColor) and changes between regular and high contrast modes. It should be used to support the high contrast mode automatically.

Window Radius

Name	Value
`--window-radius`	12px

Matches the current window radius, whether it’s floating or maximized. Can be used for e.g. rounding focus rings next to the edge of the window while automatically accounting for maximized, fullscreen etc modes.

Palette Colors

The stylesheet provides the full GNOME color palette as the following set of variables:

	Name	Value
	`--blue-1`	`#99c1f1`
	`--blue-2`	`#62a0ea`
	`--blue-3`	`#3584e4`
	`--blue-4`	`#1c71d8`
	`--blue-5`	`#1a5fb4`
	`--green-1`	`#8ff0a4`
	`--green-2`	`#57e389`
	`--green-3`	`#33d17a`
	`--green-4`	`#2ec27e`
	`--green-5`	`#26a269`
	`--yellow-1`	`#f9f06b`
	`--yellow-2`	`#f8e45c`
	`--yellow-3`	`#f6d32d`
	`--yellow-4`	`#f5c211`
	`--yellow-5`	`#e5a50a`
	`--orange-1`	`#ffbe6f`
	`--orange-2`	`#ffa348`
	`--orange-3`	`#ff7800`
	`--orange-4`	`#e66100`
	`--orange-5`	`#c64600`
	`--red-1`	`#f66151`
	`--red-2`	`#ed333b`
	`--red-3`	`#e01b24`
	`--red-4`	`#c01c28`
	`--red-5`	`#a51d2d`
	`--purple-1`	`#dc8add`
	`--purple-2`	`#c061cb`
	`--purple-3`	`#9141ac`
	`--purple-4`	`#813d9c`
	`--purple-5`	`#613583`
	`--brown-1`	`#cdab8f`
	`--brown-2`	`#b5835a`
	`--brown-3`	`#986a44`
	`--brown-4`	`#865e3c`
	`--brown-5`	`#63452c`
	`--light-1`	`#ffffff`
	`--light-2`	`#f6f5f4`
	`--light-3`	`#deddda`
	`--light-4`	`#c0bfbc`
	`--light-5`	`#9a9996`
	`--dark-1`	`#77767b`
	`--dark-2`	`#5e5c64`
	`--dark-3`	`#3d3846`
	`--dark-4`	`#241f31`
	`--dark-5`	`#000000`

Compatibility Colors

A number of colors has been available in Adwaita in GTK3. They are aliases of UI colors or otherwise derived from them. These colors use the older GTK-specific syntax for named colors rather than CSS variables, and don’t pick up overridden colors. As such, it’s recommended to avoid using these colors entirely.

Name	Value
`@theme_bg_color`	`@window_bg_color`
`@theme_fg_color`	`@window_fg_color`
`@theme_base_color`	`@view_bg_color`
`@theme_text_color`	`@view_fg_color`
`@theme_selected_bg_color`	`@accent_bg_color`
`@theme_selected_fg_color`	`@accent_fg_color`
`@insensitive_bg_color`	`color-mix(@window_bg_color 60%, @view_bg_color)`
`@insensitive_fg_color`	`color-mix(in srgb, @window_fg_color 50%, transparent)`
`@insensitive_base_color`	`@view_bg_color`
`@borders`	`color-mix(in srgb, currentColor 15%, transparent)`
`@theme_unfocused_bg_color`	`@window_bg_color`
`@theme_unfocused_fg_color`	`@window_fg_color`
`@theme_unfocused_base_color`	`@view_bg_color`
`@theme_unfocused_text_color`	`@view_fg_color`
`@theme_unfocused_selected_bg_color`	`@accent_bg_color`
`@theme_unfocused_selected_fg_color`	`@accent_fg_color`
`@unfocused_insensitive_color`	`@insensitive_bg_color`
`@unfocused_borders`	`@borders`

CSS Variables

CSS Variables

UI Colors

Accent Colors

Destructive Colors

Success Colors

Warning Colors

Error Colors

Window Colors

View Colors

Header Bar Colors

Sidebar Colors

Secondary Sidebar Colors

Card Colors

Thumbnail Colors

Dialog Colors

Popover Colors

Miscellaneous Colors

Helpers

Opacity

Border Color

Window Radius

Palette Colors

Compatibility Colors