Comments (15)
Which distribution, and synaptic version is this? And how did you install the theme?
from arc-theme.
from arc-theme.
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?
from arc-theme.
.Deb package
from arc-theme.
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.
from arc-theme.
@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.
from arc-theme.
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?
from arc-theme.
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.
from arc-theme.
@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? :-)
from arc-theme.
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.
from arc-theme.
@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":
- 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.
- 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.
from arc-theme.
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.
from arc-theme.
@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.
from arc-theme.
@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.
from arc-theme.
This should be fixed with the above commit.
Thanks for the report, and thank you @rik-shaw for the help with debugging.
from arc-theme.
Related Issues (20)
- Why does it need gnome-shell HOT 1
- Display goes black when switching to Arc themes HOT 3
- Some windows are undreadable with the darker variants HOT 2
- Problems with tiled windows. HOT 2
- Change icon color in file chooser ? HOT 4
- Cannot install the arc-theme on Ubuntu >= 22.04, gnome-shell 43 HOT 2
- GtkSourceView gutter rendered in white when using Arc-Dark HOT 3
- Thick border on top bar / weird Java application border HOT 13
- GNOME Shell 44 regressions HOT 5
- Some application windows unreadable with darker variant HOT 1
- Have trouble building HOT 6
- Cannot install 20221218 via apt
- Top right corner extension drop down menus look bad on GNOME Shell 45 HOT 4
- Theme not applying in some apps HOT 1
- Feat req: add color change script/option HOT 1
- manual installation failing due to inkscape error HOT 4
- Alignment Issues With Nautilus HOT 2
- What about the icons? HOT 1
- [SOLVED] Gnome Shell quick settings looks bad HOT 2
- 2024 Release? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from arc-theme.