Problems with the Darker variation in Synaptic.

[Initu-Castilhos]

Problems with the Darker variation in Synaptic.

[jnsh]

Which distribution, and synaptic version is this? And how did you install the theme?

[Initu-Castilhos]

Ubuntu 20.04, version of Synaptic is 0.84.6 and installed in the theme folder in root mode. Em qua, 3 de jun de 2020 21:43, jnsh <notifications@github.com> escreveu:

…

Which distribution, and synaptic version is this? And how did you install the theme? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#51 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOFBLX6475SCDEURUVBNVHDRU3UZ3ANCNFSM4NR6KOGQ> .

[jnsh]

installed in the theme folder in root mode.

Sorry, this is still a bit unclear. Did you build and install the theme manually from the source code, or via package manager, or did you install some downloaded .deb package? If you used a package, then which package?

[Initu-Castilhos]

.Deb package

[rik-shaw]

I came to post the same issue for Ubuntu 20.04 (I had previously left an issue at the now defunct "arc-design" repo: arc-design/arc-theme#287.

Anyway, I built the theme from source and confirmed the same issues. The ubuntu repo version of arc-theme (20190917) has the same problems, thus the attempts to update to see if it fixes things, but alas no luck yet.

Also I updated Synaptic to version 0.90 from a PPA (ubuntu focal version is 0.84.x) and still have the same issues.

@jnsh what distro are you on? Do you see something different with synaptic there? BTW it is AWESOME you have picked up the arc-theme mantle: certainly highly appreciated by many!

Note the "dark box" next to the quick search comes after you install apt-xapian-index to provide the quick-search functionality.

[jnsh]

@rik-shaw Thank you for the additional confirmation.

I'm using Arch, which is not .deb based distributon, and therefore synaptic package manager isn't available for me. I'll need to set up ubuntu 20.04 on VM to investigate, and it could be awhile until I can get at it.

[rik-shaw]

Fair enough, it isn't possible to cover the whole world yourself :-) I'll try digging to see if I can find some elements that with some tweaking would address the shortcomings. Mint forked Arc some time back and doesn't have the issue with their theme for example, so I may be able to compare to try and understand if the code bases aren't too far apart. I may need to find an older theme version from them from near the time of forking.

Other Arc derivative themes you could suggest for cross-testing?

[jnsh]

If you want to investigate, you should look at the CSS definitions with GTK inspector, and find out which classes/elements need fixing.

Let me know if you find out anything interesting. Figuring out a proper fix might get trickier, unless you're very familiar with GTK theming.

[rik-shaw]

@jnsh thanks for the tip on GTK Inspector. I have manually hacked around on .css here and there when we have needed a few custom overrides. But I have never done it "properly", and this is a good tip to help me get started.

However, I may be in over my head as the .css files are all compiled, right? In gtk-3.0/gtk.css is only:

@import url("resource:///org/gnome/arc-theme/gtk-main.css");

So then finding gtk-main.css is not easily done. Reading the HACKING.md, looking at the source and making a guess then, this gtk-main.css must get built from:

common/gtk-3.0/3.24/sass/_common.scss

Am I close? :-)

How is the easy way to test possible changes? In the compiled theme, maybe I could just add to Arc-Darker/gtk-3.0/gtk.css since the idea is "last one wins" with .css. Am I on the right track to try some manual testing to see what may need to change for synaptic? I would be happy to learn and become a contributor, since your goal is the same as ours: maintain Arc as it was originally designed.

So, again, manually add to gtk.css to learn what needs to change, then bring that back here to discuss the proper way to add it to the _common.scss Am I on the right track? :-)

[jnsh]

Yes, the compiled in GTK 3 theme is generated from the SASS files in sass/*.scss during build. Most commonly the changes are made to _common.scss, or _applications.scss for application specific tweaks (although I can't tell which one would be the correct approach in this case before investigating this properly).

If you want to test changes locally, I think the easiest way is to either inject your CSS changes with either GTK Inspector, or via ~/.config/gtk-3.0/gtk.css. The latter is also a good way to implement any permanent local tweaks for the gtk3 theme.

I have a hunch that the fix for this specific issue may be rather complicated, or possibly even something that would have to be fixed in synaptic itself. For that reason I'd probably like to have a good look myself before applying any fixes. Let me know if you figure out anything either way. I do certainly appreciate all contributions.

[rik-shaw]

@jnsh thanks for the tips. I had found that I can just directly insert css using GTK Inspector: wow this is pretty convenient!

To the issue with the "synaptic toolbar":

There are 2 approaches to "fix":

1. Make the background of the full toolbar "dark" (kind of like using Nemo for example). This would make the text readable, and would eliminate the weird dark box after the search field in my screenshot above.
2. Keep the "light background", make the text of the buttons darker, also make the "dark box" after the search field match @fg_color

Going with the approach to follow option 1 above, here is what would change that:

toolbar {background-color: #2F343F;}

I couldn't get GTK Inspector to use the color variables (makes sense) so I hard-coded the arc-dark color there. Anyway, here is the result:

It looks pretty good, the only problem is the text to "Quick Filter" doesn't dim when the window is inactive like the other text does. This is because that text is directly affected by the "toobar" element, rather than the other elements being inside "buttons". See this image where only "Quick Filter" is not dimmed:

I can't figure out how to specify "inactive" for the text color to dim it, but in summary this would be a complete set of changes:

toolbar {background-color: #2F343F; color: <when inactive, need to dim color>;}

I will test these changes applied to gtk-3.0/gtk.css to see what it may break. If it breaks things, then we can apply it as an application specific fix?

NOTE: if you prefer to follow option 2 above (keep light colored toolbar, darken text elements), then this would make the dark box next to "Quick Filter" go away:

.primary-toolbar {background-color: <lighter color>;}

But then the text colors need darkening for button (most items) and for toolbar (only "Quick Filter") colors.

[rik-shaw]

Update: by setting toolbar background-color, I see that LibreOffice is now "broken" by having a dark toolbar. There are comments in the _common.scss about LibreOffice toolbar already being an exception, so maybe there is some inter-related things here that can fix each other.

[jnsh]

@rik-shaw Thank you for the thorough investigation.

From a design point of view, I think either the dark or light background option could work. Looks like the toolbar element is currently styled to use $bg_color as the background, which is light gray on the Darker variant. The .primary-toolbar class however is set to use $header_bg, which is dark on Arc-Darker.

Looks like the actual issue here is that the dark background from .primary-toolbar isn't applied to the buttons and the search entry widget, as it should. I not quite sure why this happens and would like to have a better look at this myself when I get the VM set up. If you can figure out the reason for this yourself, let me know :) This could be some common case, that should be fixed in _common.scss, or a synaptic specific oddity, that requires an app-specific fix in _applications.scss and/or upstream synaptic code.

Aside from that, the styling for inactive windows is applied with the :backdrop selector, e.g. button:backdrop { color: $dimmer_color; }. In Arc theme, the :backdrop syling is currently only implemented for titlebars, headerbars, and menubars IIRC. This is the reason why the "Quick filter" dimmed as you'd expect. I think this can be dismissed here as a separate issue.

I've been hoping to extend the :backdrop styling to most elements, in accordance with the default Adwaita theme. Unfortunately this is not the simplest task so I haven't been able to look at it yet. There are number of small things like this that should be improved/implemented for the GTK 3 theme, to get it in sync with Adwaita.

[rik-shaw]

@jnsh thanks again for the patience and great explanations.

This hack seems to "fix" the synaptic toolbar background not inheriting the background-color from .primary-toolbar without then messing up other apps using toolbar, such as libreoffice:

toolbar {background-color: inherit}

I have added this to my gtk-3.0.css and will run with it for a few days to see if there are any obvious issues.

Additionally, thanks to your tips I am setting a .primary-toolbar:backdrop (just with a hardcoded value as the manual additions to gtk-3.0.css don't see the variable names:

.primary-toolbar:backdrop { color: #7A8793}

Again, I'll run with this for a while to see if there are negative side-effects. Thanks again for the help so far.

[jnsh]

This should be fixed with the above commit.

Thanks for the report, and thank you @rik-shaw for the help with debugging.