Is there any way to increase the visibility (e.g. thickness, contrast or colour) of bezel that surrounds the highlighted (aka selected) button in gnome window? TBH sometimes it is barely visible in default version. PS: I am using GNOME 3.28.2.

Here is a screenshot illustrating the issue (from a link posted in a comment):

Faint outline in Nautilus

  • Do you want something like i.stack.imgur.com/Ffk8M.png ? – DK Bose Feb 25 '19 at 16:04
  • I can't really take a screenshot because during it taking the selection of button quickly dissapear but there's a photo of the screen itself: imgur.com/a/MESoj1P When it comes to apps it mostly iritates me with Nautilus but basically affects all GUI apps e.g. Transsmision etc. @DKBose, yes that is exactly what I have in mind. :) – Marek Bocian Feb 26 '19 at 23:12

From the image provided by the poster, it appears that the theme is Ambiance.

The following bit of code will provide some relief:

* {
    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;

Route #1:

This code can be added to ~/.config/gtk-3.0/gtk.css using a plain text editor. (If the file and folder don't exist, just create them.)

* {    
    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;
    outline-radius: 2px;

You can look at CSS outline properties for more options.

It should be noted that

  • code placed in ~/.config/gtk-3.0/gtk.css will affect all gtk3 applications and all gtk3 themes.
  • the values can be tweaked to one's needs.
  • omitting a color maybe preferable so that contrast is available irrespective of the background color involved (as seen in the animation below).

Route #2:

If you like to try other themes, modifying ~/.config/gtk-3.0/gtk.css may not be the best way to go because the code in this file applies to all gtk3 themes: obviously, if a particular theme already has its own way of dealing with the outline issue there could be unwanted effects.

For this reason, I prefer to edit the theme itself so that the change is restricted to a particular theme.

In this case, I edited usr/share/themes/Ambiance/gtk-3.20/gtk-widgets.css so that the top few lines looked like this:

* {
    -GtkHTML-link-color: #f07746; /* @link_color */
    -GtkIMHtml-hyperlink-color: #f07746; /* @link_color */
    -GtkTextView-error-underline-color: #df382c; /* @error_color doesn't work due to a gtk bug */
    -WnckTasklist-fade-overlay-rect: 0;

    background-origin: border-box;
    background-clip: padding-box;

    outline-style: solid;
    outline-offset: -2px;
    outline-width: 2px;

.background {
    color: @fg_color;
    background-color: @bg_color;

The three lines starting with "outline-" are the lines I added.

In the animation below, notice that the outline color differs depending on the background:

Use of "outline" to improve visibility

A couple of images showing the difference that can be made by editing the Ambiance theme or gtk.css as described above:


Before: where the button for the default action could be difficult to discern


After the edit the default action button is obvious

| improve this answer | |
  • 2
    Fantastic! Your solution works like a charm. Thank you so much! :) – Marek Bocian Feb 28 '19 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.