23

Back in the days of 20.04, we managed to get the Yaru designers to improve the contrast of the ALT+TAB task switcher's selected app just in time for the release.

22.04 is out now and it looks like this has regressed, again...

ALT+TAB on Ubuntu 22.04 - can you tell which app is selected (without reading the caption)?

I admit I'm lucky to work in a bright office but the current contrast (dark gray on black) makes me squint every time I use the thing (and I use a good quality "productivity" monitor).

Hopefully there is a way to improve the contrast by editing some .css file? If this is too hard (really?) I'd be happy to install an extension but don't feel I need to replace the whole UI as suggested here.

1
  • 6
    Let me +1 this question/request (explicitly) with the hope that this may attract someone with a good answer. I suspect that many Ubuntu users suffer from this issue and it strikes me as odd that it wasn't dealt with yet.
    – Yuvalem
    Dec 1, 2022 at 6:49

3 Answers 3

4

I have found the following issue 6907 on gitlab.gnome.org:

https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6907

The following code by Chris Heywood does change the dark-gray by the color white:

Prerequisite, the Gnome extension "User Themes" has to be installed.

(open a shell and you don't have to be 'root')

Activation in white:

# Create a theme which only modifies the app switcher CSS
mkdir -p ~/.themes/TempAppSwitcherContrastCludge/gnome-shell
echo ".switcher-list .item-box:selected { background: #f6f5f4; color: #241f31; }" > ~/.themes/TempAppSwitcherContrastCludge/gnome-shell/gnome-shell.css
# Enable user themes shell extension
gnome-extensions enable [email protected]
# Select the theme
gsettings set org.gnome.shell.extensions.user-theme name TempAppSwitcherContrastCludge

Deactivation:

# Clear theme setting
gsettings set org.gnome.shell.extensions.user-theme name ""
# Disable user themes extension
gnome-extensions disable [email protected]
# Remove theme
rm -r ~/.themes/TempAppSwitcherContrastCludge

It was tested/activated on 23.10 and it works perfectly! I have also tested the deactivation working correctly.

Chris, if you read me, thanks a lot!

3
  • 1
    You're da man! This is going to make many a users' day no doubt. Note on 22.04, you'll need to use dconf write /org/gnome/shell/extensions/user-theme/name "'TempAppSwitcherContrastCludge'" instead of gsettings on the last line (or use the extensions GUI). In any case, you'll need to have the "User Themes" extensions installed. Still don't understand how the horrible out-of-box UX could make it through QA...
    – sxc731
    Nov 13, 2023 at 8:59
  • If anyone fancies something a little more subtle than the white colour proposed in the solution, you can vary it by adjusting the hex value for background: in the echo cmd above. Use a picture editor like Pinta to grab the hex value that works for you. I have mine set to background: #5936B5; (a sort of dark purple). You'll need to switch the user-theme off and back to TempAppSwitcherContrastCludge in order to try different values w/o having to log out.
    – sxc731
    Nov 13, 2023 at 9:18
  • "User Themes" extension required as mentioned
    – Rufus
    Feb 16 at 10:00
1
+50

You can edit the CSS file for your Gnome Shell theme to change the appearance of the alt+taB task switcher. The CSS file can be found in the /usr/share/gnome-shell/theme as well as in your home directory.

  1. Open the file with a text editor:

    nano ~/.config/gtk-3.0/gtk.css
    
  2. Find the lines which resemble with:

    .alt-tab-app-switcher {
        background-color: #333;
    }
    
    .alt-tab-app-switcher .selected {
        background-color: #555;
    }
    
    
  3. Change the background colour for .alt-tab-app-switcher .selected with a lighter color. For example:

    .alt-tab-app-switcher .selected {
        background-color: #ccc;
    }
    
  4. You can use any CSS color code to set the background color. After making the changes, save the file and restart Gnome Shell (Alt +F2) for the changes to show effect.

    Note: Keep in mind that this is just an example and the actual styles in your CSS file may be different. It's would be a good idea to back up the original CSS file before making any changes.

Note that different Gnome Shell themes might have different styles for the alt+tab task switcher, so you may need to modify the CSS styles accordingly.

Good luck

6
  • Thank YOU for giving it a shot at long last! Although it certainly appears to go in the right direction, those CSS files and classes are elusive on my 22.04 system: grep -R alt-tab-app-switcher /usr/share/gnome-shell/theme ~/.config/gtk-* returns nothing...
    – sxc731
    Feb 13, 2023 at 9:56
  • @sxc731 it requires some investigation. For example; the Yaru CSS file in my machine is /usr/share/themes/Yaru/gtk-3.0/gtk.css; and I have also created an instance of it in my home directory by mkdir ~/.themes; mkdir ~/.themes/Yaru ; mkdir ~/.themes/Yaru/gtk-3.0 ; touch ~/.themes/Yaru/gtk-3.0/gtk.css try to find the CSS file and do the necessary edits.
    – Error404
    Feb 13, 2023 at 10:43
  • 2
    @AlwaysAvailable the content of my /usr/share/themes/Yaru/gtk-3.0/gtk.css looks like this: @import url("resource:///com/ubuntu/themes/Yaru/3.0/gtk.css"); If I add to this line the following: .alt-tab-app-switcher .selected { background-color: #ccc; } then nothing changes. Any ideas why?
    – DMT
    Feb 14, 2023 at 15:12
  • @AlwaysAvailable Have attempted this: mkdir -p ~/.themes/Yaru/gtk-3.0 ; cat > ~/.themes/Yaru/gtk-3.0/gtk.css << EOF .alt-tab-app-switcher .selected { background-color: #1fe6d8; } EOF; followed by ALT+F2/r. Ditto with ~/.config/gtk-3.0/gtk.css. Neither produced the expected improvement. grep -R alt-tab-app-switcher /usr/share/themes/ produces no file that contains the CSS class you mention. Did you get this to work on a "stock" Ubuntu 22.04 machine? I think it would help a lot of people if we could nail that!
    – sxc731
    Feb 14, 2023 at 15:47
  • @sxc731 It's possible that your changes to the GTK CSS file are being overridden by a different style rule that takes precedence. To investigate this, you could use a web inspector tool (such as the one built into Firefox or Chrome) to inspect the specific styles being applied to the ALT+TAB task switcher, and see if there are any conflicting or higher-priority style rules that are overriding your changes.
    – Error404
    Feb 14, 2023 at 15:55
1

I am on Ubuntu 23.04 pretty much vanilla I think, and I couldn't find the token alt-tab-app-switcher either in ~/.themes or in /usr/share/themes.

I'm not sure what's changed, there, but I did find another route. Following this page (not as arduous as it looks, 5-10 minutes work):

  • Installed GNOME shell browser integration
  • Installed User-Themes Extension
  • Download & install Dracula theme under ~/.themes
  • sudo apt-get install gnome-tweaks
  • Log off/in to notice the new themes, I think, may not be necessary
  • Open gnome-tweaks from console of Menu/search/tweaks
  • Go to Appearance, and change 'Shell' (which probably says Default) to Dracula.
  • This theme is now live, and looks similar to the default theme, similar enough that I can't see what's changed.
  • Edit ~/.themes/Dracula*/gnome-shell/gnome-shell.css.

Adjust that file as follows to turn the offending grey box red:

.switcher-list .item-box:selected {
    background-color: red; /*rgba(189, 147, 249, 0.5)*/
    color: #f8f8f2; }

[EDIT] Oh, PS, either switch the theme back and forth in gnome-tweaks or log out/in to effect the color change.

2
  • Thanks for your suggestion to use a different theme; I was really after a way to fix this in with the stock Ubuntu "Yaru" theme. FWIW, stock Ubuntu 22.04 doesn't have the alt-tab-app-switcher CSS class referenced in the other answer either; thus that answer doesn't work (which is why I haven't "accepted" it).
    – sxc731
    May 19, 2023 at 13:30
  • 2
    True, this isn't a direct answer to your question. I posted this more for folks like me who are desperate to solve this - this question is one of the most promising hits when googling the issue. I'm barely bothered at all how my screen looks, so Dracula for me is equivalent to Yaru (save for some rather groovy purple logout etc. buttons). I am very bothered by not being able to see what I'm doing, and my new bold red alt-tab highlight box is now bringing a smile to my face every time I switch tasks :). Now if only I could get back the old-style scrollbars that are as wide as my thumb... May 21, 2023 at 22:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .