Named Colors
Named Colors
The Adwaita stylesheet provides a number of predefined 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: @accent_bg_color;
color: @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: @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:
@define-color accent_color #c01c28;
@define-color accent_bg_color #e01b24;
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 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 | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.8) |
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 | rgba(0, 0, 0, 0.8) | #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 | rgba(0, 0, 0, 0.8) | #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:
AdwToolbarViewuses it for the top and bottom barsAdwHeaderBarexcept with the.flatstyle classAdwTabBarexcept with the.inlinestyle classGtkHeaderBarexcept with the.flatstyle classGtkSearchBarexcept with the.inlinestyle classGtkActionBar
| Name | Light | Dark | ||
|---|---|---|---|---|
| @headerbar_bg_color | #ffffff | #303030 | ||
| @headerbar_fg_color | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @headerbar_border_color | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @headerbar_backdrop_color | #fafafa | #242424 | ||
| @headerbar_shade_color | rgba(0, 0, 0, 0.12) | rgba(0, 0, 0, 0.36) | ||
| @headerbar_darker_shade_color | rgba(0, 0, 0, 0.12) | rgba(0, 0, 0, 0.9) |
@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.
Sidebar Colors
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 | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @sidebar_backdrop_color | #f2f2f2 | #2a2a2a | ||
| @sidebar_border_color | rgba(0, 0, 0, 0.07) | rgba(0, 0, 0, 0.36) | ||
| @sidebar_shade_color | rgba(0, 0, 0, 0.07) | rgba(0, 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_color is 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
Secondary Sidebar Colors
These colors are used for middle panes in triple-pane layouts, created via nesting two split views within one another.
| Name | Light | Dark | ||
|---|---|---|---|---|
| @secondary_sidebar_bg_color | #f3f3f3 | #2a2a2a | ||
| @secondary_sidebar_fg_color | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @secondary_sidebar_backdrop_color | #f6f6f6 | #272727 | ||
| @secondary_sidebar_border_color | rgba(0, 0, 0, 0.07) | rgba(0, 0, 0, 0.36) | ||
| @secondary_sidebar_shade_color | rgba(0, 0, 0, 0.07) | rgba(0, 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 | rgba(255, 255, 255, 0.08) | ||
| @card_fg_color | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @card_shade_color | rgba(0, 0, 0, 0.07) | rgba(0, 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 | rgba(0, 0, 0, 0.8) | #ffffff |
Since: 1.3
Dialog Colors
These colors are used for AdwAlertDialog.
| Name | Light | Dark | ||
|---|---|---|---|---|
| @dialog_bg_color | #fafafa | #383838 | ||
| @dialog_fg_color | rgba(0, 0, 0, 0.8) | #ffffff |
Since: 1.2
Popover Colors
These colors are used for GtkPopover.
| Name | Light | Dark | ||
|---|---|---|---|---|
| @popover_bg_color | #ffffff | #383838 | ||
| @popover_fg_color | rgba(0, 0, 0, 0.8) | #ffffff | ||
| @popover_shade_color | rgba(0, 0, 0, 0.07) | rgba(0, 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 | rgba(0, 0, 0, 0.07) | rgba(0, 0, 0, 0.25) | ||
| @scrollbar_outline_color | #ffffff | rgba(0, 0, 0, 0.5) |
@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 with a light scrollbar.
Helper Colors
The following colors are derived from the current foreground color
(currentColor) and change between regular and high contrast modes. They should
be used to support the high contrast mode automatically.
| Name | Regular | High contrast |
|---|---|---|
| @borders | alpha(currentColor, 0.15) | alpha(currentColor, 0.5) |
Palette Colors
The stylesheet provides the full GNOME color palette as the following set of named colors:
| 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:
| 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 | mix(@window_bg_color, @view_bg_color, 0.4) |
| @insensitive_fg_color | alpha(@window_fg_color, 0.5) |
| @insensitive_base_color | @view_bg_color |
| @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 |