#### Styles & Appearance

## Dark Style

Libadwaita applications can use a light or a dark appearance. This can be used to request a darker UI, or to support a system-wide dark style preference if one exists.

By default, applications use light appearance unless the system prefers dark appearance, matching the `ADW_COLOR_SCHEME_PREFER_LIGHT` color scheme. The `AdwStyleManager:color-scheme` property allows to change this behavior when set to:

- `ADW_COLOR_SCHEME_PREFER_DARK`: Use dark appearance unless the system prefers light appearance.
- `ADW_COLOR_SCHEME_FORCE_DARK`: Always use dark appearance.
- `ADW_COLOR_SCHEME_FORCE_LIGHT`: Always use light appearance.

App \ System | Prefer Light | No Preference | Prefer Dark
--- | --- | --- | ---
`FORCE_LIGHT` | Light | Light | Light
`PREFER_LIGHT` | Light | Light | Dark
`PREFER_DARK` | Light | Dark | Dark
`FORCE_DARK` | Dark | Dark | Dark

Common use cases:

1. An application wants to use dark UI. Use the `ADW_COLOR_SCHEME_PREFER_DARK` color scheme.

2. An application has a style switcher with the system, light and dark states. Use the following color scheme values:

   - System: `ADW_COLOR_SCHEME_PREFER_LIGHT`
   - Light: `ADW_COLOR_SCHEME_FORCE_LIGHT`
   - Dark: `ADW_COLOR_SCHEME_FORCE_DARK`

If the system does not provide a style preference, the `AdwStyleManager:system-supports-color-schemes` property can be used to provide a fallback. For example, applications with a system/light/dark switcher may want to hide or disable the system value.

All standard GTK and Libadwaita widgets automatically support both styles. Applications that use custom drawing or styles may need to ensure the UI remains legible in both appearances:

- When possible, use CSS variables instead of hardcoded colors. For custom drawing, use `gtk_style_context_get_color()` to get the current text color for your widget, or `gtk_style_context_lookup_color()` to look up other colors.

- If that’s not possible, use the `AdwStyleManager:dark` property to check the current appearance and vary the drawing accordingly.

- The `prefers-color-scheme: dark` CSS media query can be used to add custom styles specific to dark appearance.

- Alternatively, `AdwApplication` allows loading additional styles for dark appearance via the `style-dark.css` resource.

## Accent Color

Libadwaita applications follow the system accent color by default. Applications with custom drawing or styles may need to ensure that they use the actual accent color instead of hardcoding blue:

- Use accent color variables and the `.accent` style class in CSS.

- Use `AdwStyleManager:accent-color-rgba` to get the background accent color programmatically.

- Use `AdwStyleManager:accent-color` and `adw_accent_color_to_standalone_rgba()` to get the standalone accent color programmatically.

Applications can override the accent color using CSS, as follows:

    :root {
      --accent-bg-color: var(--accent-green); /* Always use the green color */
    }

Accent can also be overridden for an individual widget. In this case `--accent-color` must be manually overridden as well:

    my-widget {
      --accent-bg-color: var(--accent-purple); /* Always use the purple color */
      --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
    }

All of the default accent colors use white text as the foreground color. If the custom accent color is too bright, use a dark foreground color instead:

    :root {
      --accent-bg-color: var(--yellow-3);
      --accent-fg-color: rgb(0 0 0 / 80%);
    }

Note

When accent color is overridden, `AdwStyleManager` API will still return the system color.

## High Contrast

The system can provide a high contrast preference. Libadwaita applications automatically support it; applications cannot disable it.

High contrast appearance can be combined with the dark style and is independent from it.

All standard GTK and Libadwaita widgets automatically support the high contrast appearance. Applications that use custom drawing or styles may need to support it manually.

- Use style classes such as `.dimmed` instead of changing widget opacity manually.

- Use the helper variables when possible, instead of hardcoding colors and opacities.

- The `AdwStyleManager:high-contrast` property can be used to check the current appearance.

- The `prefers-contrast: more` CSS media query can be used to add custom styles specific to high contrast.

- Alternatively, `AdwApplication` allows loading additional styles for high contrast appearance via the `style-hc.css` and `style-hc-dark.css` resources.

## Custom Styles

`AdwApplication` provides a simple way to load additional styles from a resource named `style.css`, relative to the application’s base path (see `g_application_set_resource_base_path()`).

To add styles conditionally only for certain color schemes or high contrast, use the following media queries:

- `prefers-color-scheme: dark` for styles used only for dark appearance.
- `prefers-contrast: more` for styles used only when the system high contrast preference is enabled.

## See Also

- Style Classes
- CSS Variables