Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use alternative stylesheet for dark mode #1973

Closed
4e554c4c opened this issue Jan 24, 2023 · 2 comments · Fixed by #2470
Closed

Use alternative stylesheet for dark mode #1973

4e554c4c opened this issue Jan 24, 2023 · 2 comments · Fixed by #2470
Labels
enhancement New feature or request

Comments

@4e554c4c
Copy link
Contributor

GTK css lacks media queries, and thus usual methods to toggle between dark and light mode in CSS (such as the prefers-color-scheme query) cannot be used.
Instead, waybar should check if dark-mode is enabled (say, by using adw_style_manager_get_dark) and include a different CSS file (e.g. style-dark.css).
This allows the user to have a dark and light configuration without re-templating or re-symlinking their configuration files every time they would like to change their theme (the solution to #1136)
@Alexays Alexays added the enhancement New feature or request label Jan 24, 2023
@4e554c4c
Copy link
Contributor Author

It would probably be easiest to depend on a library for detecting this sort of thing, since interfacing with xdg-desktop-portal manually is a bit difficult.
From what I can tell, there are two main C libraries that provide information on the current theme, and signals for when it changes: libhandy and libadwaita.
@Alexays any opposition to depending on one of these?

@4e554c4c
Copy link
Contributor Author

4e554c4c commented Feb 4, 2023

@Alexays ping

4e554c4c added a commit to 4e554c4c/Waybar that referenced this issue Sep 6, 2023
@4e554c4c
search for dark or light mode stylesheet
0894f79 
summary:
-------
This commit adds xdg-desktop-portal support to waybar. If a portal
supporting `org.freedesktop.portal.Settings` exists, then it will be
queried for the current colorscheme. This colorscheme will then be used
to prefer a `style-light.css` or `style-dark.css` over the basic
`style.css`.

technical details:
-----------------
Appearance is provided by several libraries, such as libhandy (mobile)
and libadwaita. However, waybar links to neither of these libraries. As
the amount of code required to communicate with xdg-desktop portal as a
client is rather minimal, I believe doing so is better than linking to
an additional library.

The Gio library for communicating with dbus is rather messy, Instead of
the `Portal` class containing a `Gio::Dbus::Proxy`, it extends it which
simplifies signal handling.

`Portal` then exposes its own signal, which can be listened to by waybar
to update CSS.

test plan:
---------
If no desktop portal which provides `Settings` exists, then waybar
continues with the log line
```
[2023-09-06 14:14:37.754] [info] Unable to receive desktop appearance: GDBus.Error:org.freedesktop.DBus.Error.UnknownMethod: No such interface “org.freedesktop.portal.Settings” on object at path /org/freedesktop/portal/desktop
```

Furthermore, if `style-light.css` or `style-dark.css` do not exist, then
`style.css` will still be searched for.

Finally, waybar has been tested with both light and dark startup. E.g.
if the appearance is dark on startup the log lines
```
[2023-09-06 14:27:45.379] [info] Discovered appearance 'dark'
[2023-09-06 14:27:45.379] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [info] Using CSS file /home/pounce/.config/waybar/style-dark.css
```
will be observed.
If the color then changes to light during the operation of waybar, it
will change css files:
```
[2023-09-06 14:28:17.173] [info] Received new appearance 'dark'
[2023-09-06 14:28:17.173] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [info] Using CSS file /home/pounce/.config/waybar/style-light.css
```

Finally, tested resetting waybar and toggling style (works, and style is
only changed once).

fixes: Alexays#1973
4e554c4c added a commit to 4e554c4c/Waybar that referenced this issue Sep 6, 2023
@4e554c4c
search for dark or light mode stylesheet
511786a 
summary:
-------
This commit adds xdg-desktop-portal support to waybar. If a portal
supporting `org.freedesktop.portal.Settings` exists, then it will be
queried for the current colorscheme. This colorscheme will then be used
to prefer a `style-light.css` or `style-dark.css` over the basic
`style.css`.

technical details:
-----------------
Appearance is provided by several libraries, such as libhandy (mobile)
and libadwaita. However, waybar links to neither of these libraries. As
the amount of code required to communicate with xdg-desktop portal as a
client is rather minimal, I believe doing so is better than linking to
an additional library.

The Gio library for communicating with dbus is rather messy, Instead of
the `Portal` class containing a `Gio::Dbus::Proxy`, it extends it which
simplifies signal handling.

`Portal` then exposes its own signal, which can be listened to by waybar
to update CSS.

For a reference implementation, please see another one of my projects:
https://github.com/4e554c4c/darkman.nvim/blob/main/portal.go

test plan:
---------
If no desktop portal which provides `Settings` exists, then waybar
continues with the log line
```
[2023-09-06 14:14:37.754] [info] Unable to receive desktop appearance: GDBus.Error:org.freedesktop.DBus.Error.UnknownMethod: No such interface “org.freedesktop.portal.Settings” on object at path /org/freedesktop/portal/desktop
```

Furthermore, if `style-light.css` or `style-dark.css` do not exist, then
`style.css` will still be searched for.

Finally, waybar has been tested with both light and dark startup. E.g.
if the appearance is dark on startup the log lines
```
[2023-09-06 14:27:45.379] [info] Discovered appearance 'dark'
[2023-09-06 14:27:45.379] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [info] Using CSS file /home/pounce/.config/waybar/style-dark.css
```
will be observed.
If the color then changes to light during the operation of waybar, it
will change css files:
```
[2023-09-06 14:28:17.173] [info] Received new appearance 'dark'
[2023-09-06 14:28:17.173] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [info] Using CSS file /home/pounce/.config/waybar/style-light.css
```

Finally, tested resetting waybar and toggling style (works, and style is
only changed once).

fixes: Alexays#1973
4e554c4c added a commit to 4e554c4c/Waybar that referenced this issue Sep 6, 2023
@4e554c4c
search for dark or light mode stylesheet
7bb3c4a 
summary:
-------
This commit adds xdg-desktop-portal support to waybar. If a portal
supporting `org.freedesktop.portal.Settings` exists, then it will be
queried for the current colorscheme. This colorscheme will then be used
to prefer a `style-light.css` or `style-dark.css` over the basic
`style.css`.

technical details:
-----------------
Appearance is provided by several libraries, such as libhandy (mobile)
and libadwaita. However, waybar links to neither of these libraries. As
the amount of code required to communicate with xdg-desktop portal as a
client is rather minimal, I believe doing so is better than linking to
an additional library.

The Gio library for communicating with dbus is rather messy, Instead of
the `Portal` class containing a `Gio::Dbus::Proxy`, it extends it which
simplifies signal handling.

`Portal` then exposes its own signal, which can be listened to by waybar
to update CSS.

For a reference implementation, please see another one of my projects:
https://github.com/4e554c4c/darkman.nvim/blob/main/portal.go

test plan:
---------
If no desktop portal which provides `Settings` exists, then waybar
continues with the log line
```
[2023-09-06 14:14:37.754] [info] Unable to receive desktop appearance: GDBus.Error:org.freedesktop.DBus.Error.UnknownMethod: No such interface “org.freedesktop.portal.Settings” on object at path /org/freedesktop/portal/desktop
```

Furthermore, if `style-light.css` or `style-dark.css` do not exist, then
`style.css` will still be searched for.

Waybar has been tested with both light and dark startup. E.g. if the
appearance is dark on startup the log lines
```
[2023-09-06 14:27:45.379] [info] Discovered appearance 'dark'
[2023-09-06 14:27:45.379] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [info] Using CSS file /home/pounce/.config/waybar/style-dark.css
```
will be observed.
If the color then changes to light during the operation of waybar, it
will change css files:
```
[2023-09-06 14:28:17.173] [info] Received new appearance 'dark'
[2023-09-06 14:28:17.173] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [info] Using CSS file /home/pounce/.config/waybar/style-light.css
```

Finally, tested resetting waybar and toggling style (works, and style is
only changed once).

fixes: Alexays#1973
4e554c4c added a commit to 4e554c4c/Waybar that referenced this issue Sep 6, 2023
@4e554c4c
search for dark or light mode stylesheet
09873f0 
summary:
-------
This commit adds xdg-desktop-portal support to waybar. If a portal
supporting `org.freedesktop.portal.Settings` exists, then it will be
queried for the current colorscheme. This colorscheme will then be used
to prefer a `style-light.css` or `style-dark.css` over the basic
`style.css`.

technical details:
-----------------
Appearance is provided by several libraries, such as libhandy (mobile)
and libadwaita. However, waybar links to neither of these libraries. As
the amount of code required to communicate with xdg-desktop portal as a
client is rather minimal, I believe doing so is better than linking to
an additional library.

The Gio library for communicating with dbus is rather messy, Instead of
the `Portal` class containing a `Gio::Dbus::Proxy`, it extends it which
simplifies signal handling.

`Portal` then exposes its own signal, which can be listened to by waybar
to update CSS.

For a reference implementation, please see another one of my projects:
https://github.com/4e554c4c/darkman.nvim/blob/main/portal.go

test plan:
---------
If no desktop portal which provides `Settings` exists, then waybar
continues with the log line
```
[2023-09-06 14:14:37.754] [info] Unable to receive desktop appearance: GDBus.Error:org.freedesktop.DBus.Error.UnknownMethod: No such interface “org.freedesktop.portal.Settings” on object at path /org/freedesktop/portal/desktop
```

Furthermore, if `style-light.css` or `style-dark.css` do not exist, then
`style.css` will still be searched for.

Waybar has been tested with both light and dark startup. E.g. if the
appearance is dark on startup the log lines
```
[2023-09-06 14:27:45.379] [info] Discovered appearance 'dark'
[2023-09-06 14:27:45.379] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-dark.css
[2023-09-06 14:27:45.379] [info] Using CSS file /home/pounce/.config/waybar/style-dark.css
```
will be observed.
If the color then changes to light during the operation of waybar, it
will change css files:
```
[2023-09-06 14:28:17.173] [info] Received new appearance 'dark'
[2023-09-06 14:28:17.173] [debug] Try expanding: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [debug] Found config file: $XDG_CONFIG_HOME/waybar/style-light.css
[2023-09-06 14:28:17.173] [info] Using CSS file /home/pounce/.config/waybar/style-light.css
```

Finally, tested resetting waybar and toggling style (works, and style is
only changed once).

fixes: Alexays#1973
@4e554c4c 4e554c4c mentioned this issue Sep 6, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

search for dark or light mode stylesheet 4e554c4c/Waybar
2 participants
@4e554c4c @Alexays