Skip to content
GitLab
  • Menu
Projects Groups Snippets
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • I Initiatives
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Issues 23
    • Issues 23
    • List
    • Boards
    • Service Desk
    • Milestones
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Create a new issue
  • Issue Boards
Collapse sidebar
  • GNOME
  • Initiatives
  • Wiki
  • Dark Style Preference

Dark Style Preference · Changes

Page history
Update Dark Style Preference authored Apr 12, 2022 by Alexander Mikhaylenko's avatar Alexander Mikhaylenko
Hide whitespace changes
Inline Side-by-side
Dark-Style-Preference.md
View page @ 500609af
...@@ -19,14 +19,14 @@ If most of the application is content and not UI, the content should follow the ...@@ -19,14 +19,14 @@ If most of the application is content and not UI, the content should follow the
## GTK4 + libadwaita ## GTK4 + libadwaita
Applications follow the preference by default, so design 1 doesn't require any changes. Applications follow the preference by default, so design 1 doesn't require any changes.
To implement design 2 can use the following snippet to request dark variant and still support light appearance: To implement design 2, use the following snippet to request dark style and still support light appearance:
```c ```c
adw_style_manager_set_color_scheme (adw_style_manager_get_default (), adw_style_manager_set_color_scheme (adw_style_manager_get_default (),
ADW_COLOR_SCHEME_PREFER_DARK); ADW_COLOR_SCHEME_PREFER_DARK);
``` ```
or the following one otherwise: or the following one to always use the dark style unconditionally:
```c ```c
adw_style_manager_set_color_scheme (adw_style_manager_get_default (), adw_style_manager_set_color_scheme (adw_style_manager_get_default (),
...@@ -39,13 +39,15 @@ Applications that provide color scheme preferences as per designs 3 and 4 should ...@@ -39,13 +39,15 @@ Applications that provide color scheme preferences as per designs 3 and 4 should
See [`AdwStyleManager:color-scheme`](color-scheme) for more details. See [`AdwStyleManager:color-scheme`](color-scheme) for more details.
Important: Don't use [`GtkSettings:gtk-application-prefer-dark-theme`](prefer-dark-theme) or [`GtkSettings:gtk-theme-name`](gtk-theme-name) for checking if the application is currently using dark appearance! Neither of them will change in this case. Important: Don't use [`GtkSettings:gtk-theme-name`](gtk-theme-name) for checking if the application is currently using dark appearance!
Instead, if you need to vary other aspects of the UI (e.g. the `GtkSourceView` color scheme), use the [`AdwStyleManager:dark`](dark) property, and to check for the high contrast mode, use [`AdwStyleManager:high-contrast`](high-contrast). Instead, if you need to vary other aspects of the UI (e.g. the `GtkSourceView` color scheme), use the [`AdwStyleManager:dark`](dark) property, and to check for the high contrast mode, use [`AdwStyleManager:high-contrast`](high-contrast).
[`GtkSettings:gtk-application-prefer-dark-theme`](prefer-dark-theme) can be used as well - if can be a good option if you're adapting a library that depends on GTK, but not Libadwaita. There's no similar way to check high contrast mode though.
To only show a switch when running on an system without a system-wide preference, the [`AdwStyleManager:system-supports-color-schemes`](supports-color-schemes) property can be used; libadwaita demo has [an example](https://gitlab.gnome.org/GNOME/libadwaita/-/blob/2bf94101/examples/adw-demo-window.c#L41-62). To only show a switch when running on an system without a system-wide preference, the [`AdwStyleManager:system-supports-color-schemes`](supports-color-schemes) property can be used; libadwaita demo has [an example](https://gitlab.gnome.org/GNOME/libadwaita/-/blob/2bf94101/examples/adw-demo-window.c#L41-62).
If the application bundles custom CSS which needs changes for dark appearance or vice versa, [`AdwApplication`](AdwApplication) provides an easy way to do that via `style.css` and `style-dark.css` resoures. If the application bundles custom CSS which needs changes for dark appearance or vice versa, [`AdwApplication`](AdwApplication) provides an easy way to do that via `style.css` and `style-dark.css` resources.
## GTK3 + libhandy ## GTK3 + libhandy
If possible, consider porting to GTK4 and libadwaita first. libadwaita has a significant amount of changes in its stylesheet, aimed to improve the contrast in dark variant. For example: If possible, consider porting to GTK4 and libadwaita first. libadwaita has a significant amount of changes in its stylesheet, aimed to improve the contrast in dark variant. For example:
...@@ -143,12 +145,14 @@ Screenshots: ...@@ -143,12 +145,14 @@ Screenshots:
## GNOME 42 ## GNOME 42
If you have a GNOME 42 system, for example a jhbuild session or a GNOME OS VM, use the Appearance panel in Settings to change the color scheme. If you have a GNOME 42 system, for example a jhbuild session or a GNOME OS VM, use the Appearance panel in Settings to change the color scheme.
You can also use dconf-editor or `gsettings` CLI to edit the following preference: `org.gnome.desktop.interface.color-scheme`. You can also use dconf-editor or `gsettings` CLI to edit the following preference: `org.gnome.desktop.interface.color-scheme`:
## libadwaita * Default (called "Light" in Settings): `gsettings set org.gnome.desktop.interface color-scheme default`
Libadwaita provides a `GtkInspector` page. If libadwaita is present in the SDK, it should work out of the box, and for apps that bundle libadwaita, it can be enabled via `"--env=GTK_PATH=/app/lib/gtk-4.0"` in `finish-args` in their manifest. * Dark: `gsettings set org.gnome.desktop.interface color-scheme prefer-dark`
* Light (not exposed in Settings at the moment): `gsettings set org.gnome.desktop.interface color-scheme prefer-light`
If it's set up correctly, open inspector with `Ctrl+Shift+D` and there should be a libadwaita page providing toggles for the system color scheme, high contrast and emulating an older system without color schemes. ## libadwaita
Libadwaita provides a `GtkInspector` page. Open inspector with `Ctrl+Shift+D` and there should be an "Adwaita" page providing toggles for the system color scheme, high contrast and emulating an older system without color schemes.
## Other ## Other
The following project can be used to test the preference: https://gitlab.gnome.org/exalm/color-scheme-simulator The following project can be used to test the preference: https://gitlab.gnome.org/exalm/color-scheme-simulator
......
Clone repository
  • App Menu Retirement
  • App Metadata
  • Avatar Consistency
  • Dark Style Preference
  • DevOps with Flatpak
  • GNOME apps mobile
  • Sandbox all the WebKit!
  • Update App Screenshots
  • View switcher pattern migration
  • app icon redesign
  • Home