[Feature request] Synchronise window border color with GNOME accent color

[vinchatl]

GNOME 47 introduced 9 accent-colors to choose from in the Settings:

https://release.gnome.org/47/

It would be nice to be able to synchronise the window border color with GNOME's accent color automatically. I'm currently doing it manually, it is not difficult to do, but it would be amazing to have it done directly by your extension!
This page may help for background implementation since you're using libadwaita. It would probably also require to add a toggle button in the Preferences page in the Window border section.

If you want to go even further, there are also extensions to customise the desktop accent color like Custom Accent Colors or even to synchronise it with the wallpaper dominant color like Auto accent colour. I don't know they work and if that means a lot of work to support their implementation.

[domferr]

Hey, thank you for sharing this. It is a great idea!

[EdiDD]

Hi there and greetings. Is there any progress on this ?

[domferr]

Hi @EdiDD, unfortunately I had no time to work on it yet. I am open to anyone who wants to contribute! Feel free to comment here and I'll provide full support!

[vinchatl]

Hey @domferr, I'd like to start working on this feature and it would be great to have a feedback from early ideas and potential implementation.

By the way I've never use TypeScript/JavaScript, but I did a lot of C/C++/Python/Rust so even if I'm ok doing this, feel free to make any comments as there may be some TypeScript-specific concepts I'm not aware of !

UI side

I was thinking about:

• adding a toggle between Width and Border color called Automatic border color
• renaming Border color to Custom border color

The extension would then automatically synchronize the color with the global accent color when the toggle is activated, or use the custom border color when deactivated.

Backend side

Some settings would be added/modified:

• add a new setting called WINDOW_BORDER_COLOR_AUTO (or some other variant name if you prefer) that would hold the toggle state and would be register in the gschema
• rename WINDOW_BORDER_COLOR to WINDOW_BORDER_COLOR_CUSTOM
• add a new setting called WINDOW_BORDER_COLOR that would return WINDOW_BORDER_COLOR_CUSTOM or the global accent color based on WINDOW_BORDER_COLOR_AUTO state

Here I differenciate the general color from the custom color, so the previously user-defined color isn't overwritten when auto coloring is used.

Looking at GNOME-Auto-Accent-Color implementation, it looks like it's a simple call to Gio.Settings({ schema: INTERFACE_SCHEMA }).get_string(ACCENT_COLOR).
Plus some signal management when the accent color is changed after startup.

What do you think about this ?

[domferr]

Hey, first of all, thank you so much!

Your idea of changing the current WINDOW_BORDER_COLOR to return WINDOW_BORDER_COLOR_CUSTOM or the global accent color based on WINDOW_BORDER_COLOR_AUTO state is a cool idea!

How Tiling Shell stores the window border color setting

What you see in the preferences window is a pair, the setting key and its value. The key is stored in Settings.KEY_WINDOW_BORDER_COLOR. It must match with the key specified in Tiling Shell gschema here.

To add a new setting (for example the boolean you called WINDOW_BORDER_COLOR_AUTO) you can follow the guide I wrote here but just the steps 1 and 2.

How Tiling Shell shows the window border color

The management of window border is in WindowBorderManager class. Here is where I set the border color according to the user setting. The class Settings has the goal to make extremely easy (like one line of code) to get and set the settings and listen to the user changes of the setting. It exposes a static field for each setting and its getter and setter (like here) gets/sets the value from/to Gio.Settings.

GNOME's accent color setting

From your link, then, I can say that it looks like GNOME 47+ stores the accent color to the schema org.gnome.desktop.interface, with key accent-color. I don't have GNOME 47 so it might be worth to double check if you can! (using tools like dconf or getting the key value from terminal, let me know if you need help on this)

Signal management: listen to accent-color changes

Having that association there is awesome! In Tiling Shell there is already another example of signal management to listen to changes of Gio.Settings keys, have a look here! Something like this then:

this._signals.connect(
            new Gio.Settings({ schema: 'org.gnome.desktop.interface' }),
            'changed::accent-color',
            (_interfaceSettings: Gio.Settings) => {
                    ... this code here is executed when the accent-color key changes its value
            }
);

_signals is an object of class SignalHandling which I created to have a class that simplifies connecting and disconnecting to signals. You can find it already used in WindowBorderManager class.

Add a new setting in the preferences

All the code of the preferences window is in src/prefs.ts file.

How to react to the user enabling or disabling the use of the accent color

You need to listen via signals to changes in the settings. Here for example, I listen to changes the user makes to the window border color setting (e.g. from the preferences window).

this._signals.connect(Settings, Settings.KEY_WINDOW_BORDER_COLOR, () =>
            this._border?.updateStyle(),
);

In the code above I listen to changes in the Settings (e.g. changes made from Tiling Shell's preferences window). Specifically, I listen to changes of the key KEY_WINDOW_BORDER_COLOR. If it changes then the following function is run

() =>
            this._border?.updateStyle(),
)

(this is similar to C++ lambda functions!)
You can do a similar thing but with something like KEY_WINDOW_BORDER_COLOR_AUTO.

[domferr]

To simplify, I can think of those steps:

1. Add in Tiling Shell's gschema a new setting with key window-border-color-auto which value is a boolean and default value is false
2. Update class Settings to introduce KEY_WINDOW_BORDER_COLOR_AUTO and getter/setter of WINDOW_BORDER_COLOR_AUTO. This returns/sets a boolean, which defaults to false in case of any error. You can follow other boolean settings in the Settings class
3. Listen to KEY_WINDOW_BORDER_COLOR_AUTO changes in WindowBorderManager class (like we listen to changes of KEY_WINDOW_BORDER_COLOR)
4. In WindowBorderManager class, listen to GNOME's accent-color changes to update the style of the border (like we listen to changes of KEY_WINDOW_BORDER_COLOR)
5. Update src/prefs.ts file to add a new row in the preferences window to with your new flag Automatic border color

Reach me out for anything you may need! Feel free to open a pull request whenever you want

[vinchatl]

Thanks for all the indications, they are really valuable and I truly appreciate them !

This doesn't seem too difficult so I think I'll come back in a few days/weeks with a working solution in a PR. 😄

[domferr]

Hey @vinchatl did you manage to implement this? I'd love to give this update to everybody, let me know if you are working on it so I don't begin the development myself 😎

[my-name-ez]

It's litteraly my first time seeing a gnome's extension code, and I never contributed to a project but I could try if you don't mind the additional time it could take @domferr
I don't really know but it seems like it might not be too hard, plus you already described how it could be done

[my-name-ez]

It ended up being pretty straight forward thanks to your indications x)