Yaru dark theme does not work properly - white boxes in Gnome Software

I am new to linux and I am using ubuntu 20.04 LTS.

I use the default yaru dark theme and when I open gnome software centre and some other application I see white and blue things (as shown in the images)

Because of this I am unable to read the names of applications in gnome software centre. I have already installed gnome-tweak-tool and tried various other themes but the problem is the same, my theme gets changed but still I see the white boxes in the software centre and the main problem remains the same but cannot fix it.

Actually when I first installed Ubuntu, everything was fine and my yaru dark theme was also working properly, but because I was new to Linux, I was experimenting with the system and by mistakenly, installed the kde-desktop package. And after that everything changed. It installed the kde desktop which I didn’t wanted. And Then I deleted the kde desktop and brought everything back to normal, but It caused changes in my yaru theme and I am not able to fix it now.

So is there any way to bring my theme back to normal?

Solution 1:

If what you're asking is how to change to another dark theme, you can use the Gnome Tweak Tool (gnome-tweaks). Not sure how you changed it to Yaru, and what other dark themes you have, but Gnome Tweak Tool lets you change themes really easily. I have been using Ubuntu for 15 years, and have always used dark themes, and not all are 100% perfect (as you've seen), but you can use others. If you don't have the above installed, run in the terminal:

sudo apt-get install gnome-tweaks

If you need more dark themes, download GTK themes from https://www.gnome-look.org/browse?cat=135&ord=latest (maybe also in the Software Centre?), and to install them Google "Ubuntu 20.04 install GTK theme" (there's lots of info on that).

Solution 2:

OK, I haven't had much luck, because a fix I found applies to Ubuntu Software Centre - editing colour values in softwarecenter.css - but I simply cannot find any .css or .xml file for Gnome Software that corresponds to that file. I'm still looking, but for now I have a workaround - not perfect, but better than what you have: open Gnome Software in another theme. I should have mentioned this earlier, but it isn't so much a fix, and I was really hoping I could find that config file. So to do this - and I'm just listing a theme you'll likely have - here is the command to open it in the Adwaita theme:

GTK_THEME=Adwaita gnome-software

You can either run that in the terminal (Alt+F2 probably won't work: for me, it opened Discover, KDE's software manager, without a theme change), or you can edit the launcher - gnome-software.desktop - and replace the Exec=gnome-software line with Exec=env GTK_THEME=Adwaita gnome-software (I suggest just doing this via the terminal first, to see if any theme works for you). It might not be perfect - the picture shows mine opening in Adwaita, but in a mix with my dark theme, but at least the text is somewhat readable (and you might not even get the dark boxes like I did). But you can try specifying other light themes until you find one that's acceptable. I tried Ambiance and Yaru, and the text was very dark, Ambient-MATE was the same as the pic (note that the text gets slightly clearer when you hover your mouse over each box). So it's far from a fix, but it's something (and you might find a theme that makes it readable).

Solution 3:

PS: You can obviously try other dark themes to see if they are better. While you're getting white boxes with white text while using your default dark theme, and I'm getting dark boxes with dark text opening Gnome Software in light themes, I tried the Blue-Submarine theme, and it looks nice. However, I'm running a dark theme (Ambiant-MATE-Dark) and don't have your issue, and you've already tried changing your theme to other darker ones, but it's at least worth trying.

Solution 4:

This is about as close I've come to a solution to this, and I can't really test it since Gnome Software is being themed properly, but I've come across a config file full of colour definitions: org.gnome.Software.Featured.xml

In /snap/snap-store/ you will find 3 folders: 2 numbered, and current (which is actually just a link). It's the folder with the highest number you will want to go into. For example, mine is 558, so the folder containing the .xml file is /snap/snap-store/558/usr/share/app-info/xmls. Right-click org.gnome.Software.Featured.xml and choose to Edit as Administrator, and when it opens in Text Editor, near the top you will see:

      <value key="GnomeSoftware::FeatureTile-css">border-color: #aaa;
text-shadow: none;
color: #333;
background:
 linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(200,200,200,0.9)),

That might not be the section for the tiles/boxes, but I can see straight away the first RGBA value is white. And further down is text-shadow, also white, and other sections to do with text and background you can try to edit. Now, most of the colours are in RGBA, with only a few being Hex (the ones starting with #), and you can either determine the ones in the file with an online converter or a Linux app.

Online: RGBA and Hex Color Converter Type in the numbers for R (Red) G (Green) B (Blue) & A (Opacity (Alpha)) and the colour will appear on the right. You will see that 255,255,255,0.3 is white, and 200,200,200,0.9 is a light grey.

I suggest using an app, and in the pic you can see I entered the values for the latter in MATE Colour Selection (mate-color-select) - you can also use GNOME Color Chooser (gnome-color-chooser) or KColorChooser (kcolorchooser) - and it shows that light grey. (As for the few hex values, you can copy and paste them into the field - my choice is KColorChooser, because as soon as you paste it in, it shows you the colour, no need to hit Enter).

So you can use this method to determine the colours specified in org.gnome.Software.Featured.xml, and replace them with your own, which you can determine via the colour picker. For example, in the pictured app I clicked one of the dark charcoal presets, giving 46,52,54,15, which you then use to replace the white's 255,255,255,0.3. And of course you can just use 0,0,0,0 for pure black.

Before editing, save a copy (eg: org.gnome.Software.Featured.ORIG.xml) in case you need to restore the original. Then try replacing whites in various sections with black or charcoal, and see if it works. In between opening Gnome Software to see if there are changes, run killall gnome-software in the terminal, as I found during trying different themes in the previous method that a couple of times after I closed it, killing it didn't report "no process found", meaning it was still running in the background.

As I said, I can't test this, but there are a lot of whites in that file, and I'm not seeing those due to my dark theme, so hopefully this is the way to achieve what you want. Best of luck!