Autotheming by parsing a css file - Suggestion

[NotMephisto]

It might be possible to implement checking the css file for values, if there are any, then extract them and accept them for gnome-shell. This way the autotheming problem can be solved to some extent #29.

Using accent color from css file:

@define-color accent_color #b4c4ff;

This way the application themes will be look solid and better. What we have in OpenBar 2.0 doesn't give us the ability to customize better app themes. OpenBar doesn't take into count user settings that were changed to change the theme in gnome-shell.

With custom css file:

Without custom css file:

It is possible to implement everything at once, parsing data from css and customizing application themes manually in OpenBar 2.0 for more variability of user usage scenario, but this might be meaningless when Gradience exists.

[neuromorph]

Hello,

Thank you for writing, but it is hard to figure out what is being stated. First of all, Gnome Shell and GTK apps are different entities with different themes. Open Bar supported theming the Top Bar and popup menus either manually or automatically using colors from the desktop background. Open Bar 2.0 improves upon it (better palette and better color assignments) and also allows to extend that theme to the rest of the Gnome Shell. Additionally, for GTK apps, it allows to apply the same Accent color from the Bar/Menus to the apps as well so that it is consistent. It also has some additional options for headerbar/sidebar etc but pretty minimal at this point.

It might be possible to implement checking the css file for values, if there are any, then extract them and accept them for gnome-shell.

The accent color for Gnome Shell can be set from the extension settings, under Popup Menus (or auto generated from background in autotheme). The styles will flow from Bar/Menus -> Rest of the Shell -> GTK apps.

This way the autotheming problem can be solved to some extent issue-29.

That issue is a discussion about improving autotheming/OpenBar2.0 and has many things being talked about. What specific problem are you referring to?

Using accent color from css file: @define-color accent_color #b4c4ff; This way the application themes will be look solid and better. What we have in OpenBar 2.0 doesn't give us the ability to customize better app themes. OpenBar doesn't take into count user settings that were changed to change the theme in gnome-shell.

Here again a bit hazy since it is mixing shell and apps but let me guess that you are only referring to GTK apps. Currently, OpenBar 2.0 does not provide much options for theming the apps. As mentioned earlier, it is minimal and mainly to apply the Accent from Shell to the apps. Also, if you have any custom styles in gtk.css then it is backed up and replaced with the OpenBar gtk.css so you may lose those styles. I am guessing, you want to retain the styles in your custom gtk.css and only add Open Bar changes on top of it? This makes sense and can be looked into, if it works I would also prefer it. In the images, it would have helped to point out what you are referring to since they appear the same except I noticed some variation in the Calculator app background colors. The above idea of retaining styles can help here. However, above you give an example on Accent color to be read from existing css but accent color is the main thing OpenBar currently changes in gtk apps so it wouldn't make sense.

It is possible to implement everything at once, parsing data from css and customizing application themes manually in OpenBar 2.0 for more variability of user usage scenario, but this might be meaningless when Gradience exists.

I have no idea what's being said here.

I will be looking into adding OpenBar css on top of existing one instead of replacing since it makes sense. If you were talking about something else, feel free to elaborate and I will try to address that.

Thanks.

[NotMephisto]

Hey,

The idea is to unify the style of the system. I proposed this idea because it is relatively easy and depends on knowledge of elements from Gtk, Adwaita libraries.

Adwaita-3.0 has almost all the necessary components to do this, as does gtk-4.0 (without adwaita you simply can't change the style of applications on an older version of the gtk library). For example, take the color of an element from the css file and use it for both PopupMenuItem and QuickSettingItem for the panel!

@define-color window_bg_color #1b1b1f;

Also with items in PopupMenu and QuickSetting

@define-color view_bg_color #282833;

Which will be recolored to match the style of the viewed items in the application. Below I will write possible applications of the strings to gnome-shell elements:

@define-color accent_color #b4c4ff; --> all elements related to accent colors

@define-color window_bg_color #1b1b1f;--> background color of shell allover (i.e. PopupMenu with notifications and calendar, quicksettings, notifications, shell pop-ups).

@define-color view_bg_color #282833; --> secondary background color of shell allover (music player in notifications, notifications, and for some elements in QuickSettings|QuickToggle) (see screenshots)

@define-color headerbar_fg_color #c9d5ff; --> can be used for bar_fg

Just give a shot, if the idea turns out to be bad, just forget what I wrote here :)

[neuromorph]

Hey,

Thank you for clarifying the idea and also for providing examples with screenshot! This certainly helps.

So you would like to define colors in a gtk.css and then the idea is that these colors will get applied to Adwaita/Gtk3 and Gtk4 apps. You would like Open Bar to take these colors and also apply them to the Shell. This way both will be consistent.

It is a good idea and something worth trying. I however disagree on the "easy" part :). While building Open Bar , I have realized that these things are far from easy esp. when we think of arbitrary colors. On the Gtk apps part, this would be something like what Gradience offers, except it is much better for most users to do it from the GUI like Gradience where we can easily view and select colors, instead of defining hex codes in css. But even with that what I have seen is it may not work so well for all apps. Apps don't always use these standard defined colors, in which case we need to look into the specific app and override its custom styles. Popular Gtk themes typically do this at least for standard/built-in apps. Then reusing these colors for the Shell is a different ballgame. Gtk css is cooler in terms of offering these "@ color definitions" and some features like modifying icon styles. Shell css is rather lacking. One way to go about it is to define colors in Sass like what Gnome does and then compile the sass to css. This would involve additional installations and compilation though. Also, it takes away finer control on what color-combinations we want to use. This is since by default , besides Accent, shell only uses derived shades of Gray based on Light/Dark theme so they have fewer color definitions for components. It is certainly doable but not with only color definitions but instead going through each widget's css element and assigning colors to it. This is what Open Bar does.

Like I said, I do think it is a good idea just not necessarily simple. And the main issue for Open Bar is that it is not in line with how OpenBar is designed. The flow currently is to go from Top Bar and Menus to the Rest of the Shell and then to the Gtk apps. Open Bar provides GUI to easily set colors for the Bar and Menu along with some additions like Dash/Dock. These colors are then applied to the Shell and for now minimally to the apps. If the app backgrounds were also set similar to the shell then the end result will be same as what you have described. The only difference being, instead of starting from gtk css, you can select colors in settings for menus and they get reused everywhere else in shell and apps. This is more likely the next possible steps in the roadmap. But before that I need to get the current stuff finalized and tested and released.

Moreover, a prime feature it offers is Auto-theming which selects colors from the desktop background which would be totally misaligned with the defining colors in css idea.

Thus, thank you for suggesting the idea, that is always welcome. But I will not be taking it up now, at least not as described. I will look into how to solve the main issue of unifying the themes for the Shell and the Apps. Initially, I will try to retain the styles you may have defined in gtk css and only add on top of it. I will provide an update when that part is ready and would like you to try it out then.

If you go about implementing it as per your suggestion, either with Gradience or otherwise, I would be interested in knowing about it.

Best!

[neuromorph]

If the app backgrounds were also set similar to the shell then the end result will be same as what you have described. The only difference being, instead of starting from gtk css, you can select colors in settings for menus and they get reused everywhere else in shell and apps. This is more likely the next possible steps in the roadmap.

The Gtk/Flatpak Apps section of the extension settings has been updated to include more options to theme them:

• Colors for headerbar, sidebar, dialog, view, window etc
• Window border and radius
• Custom window control buttons
• App popover menus
• Transparency
• etc.

This allows for extending shell theme colors to Gtk Apps as well using the settings GUI.

This completes the main issue to address here but by following the extension's design i.e. gathering config from GUI and generating css accordingly instead of expecting users to write css and then parsing it.

Closing the issue here. Thank you!