CSS Variables
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);
}
Applications can override these colors by re-declaring them, for example:
:root {
--accent-bg-color: #e01b24;
}
Standalone colors
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. They are automatically derived from the background color, so it’s not necesssary to override them manually when setting app-wide accent color.
However, when overriding the background colors for specific widgets, the standalone colors must overridden too, as follows:
my-widget {
--accent-bg-color: var(--purple-3);
--accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
}
The --standalone-color-oklab
variable has the following values for light and
dark styles:
Name | Light | Dark |
---|---|---|
--standalone-color-oklab | min(l, 0.5) a b | 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
.
The background color is available as --accent-bg-color
, the foreground as
--accent-fg-color
and the standalone color as --accent-color
.
The --accent-color
color is derived from --accent-bg-color
as detailed above.
The default values of these colors depend on the system preferences, and will always be one of the following:
Color | Background | Foreground | Standalone (Light) | Standalone (Dark) | ||||
---|---|---|---|---|---|---|---|---|
Blue | #3584e4 | #ffffff | #0461be | #81d0ff | ||||
Teal | #2190a4 | #ffffff | #007184 | #7bdff4 | ||||
Green | #3a944a | #ffffff | #15772e | #8de698 | ||||
Yellow | #c88800 | #ffffff | #905300 | #ffc057 | ||||
Orange | #ed5b00 | #ffffff | #b62200 | #ff9c5b | ||||
Red | #e62d42 | #ffffff | #c00023 | #ff888c | ||||
Pink | #d56199 | #ffffff | #a2326c | #ffa0d8 | ||||
Purple | #9141ac | #ffffff | #8939a4 | #fba7ff | ||||
Slate | #6f8396 | #ffffff | #526678 | #bbd1e5 |
Each background color is also available as a variable, as follows:
Name | Value | |
---|---|---|
--accent-blue | #3584e4 | |
--accent-teal | #2190a4 | |
--accent-green | #3a944a | |
--accent-yellow | #c88800 | |
--accent-orange | #ed5b00 | |
--accent-red | #e62d42 | |
--accent-pink | #d56199 | |
--accent-purple | #9141ac | |
--accent-slate | #6f8396 |
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.
The --destructive-color
color is derived from --destructive-bg-color
as
detailed above.
Name | Light | Dark | ||
---|---|---|---|---|
--destructive-bg-color | #e01b24 | #c01c28 | ||
--destructive-fg-color | #ffffff | #ffffff | ||
--destructive-color | #c30000 | #ff938c |
Success Colors
This color is used with the .success
style class,
or in a GtkLevelBar
with the GTK_LEVEL_BAR_OFFSET_HIGH
offset.
The --success-color
color is derived from --success-bg-color
as detailed above.
Name | Light | Dark | ||
---|---|---|---|---|
--success-bg-color | #2ec27e | #26a269 | ||
--success-fg-color | #ffffff | #ffffff | ||
--success-color | #007c3d | #78e9ab |
Warning Colors
This color is used with the .warning
style class,
or in a GtkLevelBar
with the GTK_LEVEL_BAR_OFFSET_LOW
offset.
The --warning-color
color is derived from --warning-bg-color
as detailed above.
Name | Light | Dark | ||
---|---|---|---|---|
--warning-bg-color | #e5a50a | #cd9309 | ||
--warning-fg-color | rgb(0 0 0 / 80%) | rgb(0 0 0 / 80%) | ||
--warning-color | #905400 | #ffc252 |
Error Colors
This color is used with the .error
style class.
The --error-color
color is derived from --error-bg-color
as detailed above.
Name | Light | Dark | ||
---|---|---|---|---|
--error-bg-color | #e01b24 | #c01c28 | ||
--error-fg-color | #ffffff | #ffffff | ||
--error-color | #c30000 | #ff938c |
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 barsAdwHeaderBar
except with the.flat
style classAdwTabBar
except with the.inline
style classGtkHeaderBar
except with the.flat
style classGtkSearchBar
except with the.inline
style classGtkActionBar
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.
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 | 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-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 | 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
Popover Colors
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 |