Increase the highlighted button bezel thickness (GNOME)

Question

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):

Answer 1

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:

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

Before:

After: