How do I make the focus rectangle in Gtk3 more prominent?

Question

I use the keyboard almost all the time to navigate; it often happens that I forget to turn my battery powered mouse on and I only notice after 15 or 30 minutes :) But with Gnome/Gtk 3 it got harder, because with the default theme (I think Adwaita) the focus indicator rectangle is so thin that it's almost invisible, and my eyes are in decline too. So it's almost a crap shoot: I hit Tab a few times, then Space or an arrow key, and something unexpected happens because the focus is not where I thought it was.

How can I make the focus indicator more visible?

Answer 1

The focus indicator in Gtk3, similar to HTML, is defined as a CSS outline style:

[…]:focus(visible) {
  // We use the outline properties to signal the focus properties
  // to the adwaita engine: using real CSS properties is faster,
  // and we don't use any outlines for now.

  outline-color: gtkalpha(currentColor, 0.3);
  outline-style: dashed;
  outline-offset: -3px;
  outline-width: 1px;
  -gtk-outline-radius: 2px;
}

You can override this through themes, through a custom stylesheet, or temporarily (for experiments) through the Inspector CtrlShiftI. So if you want it to look like Hot Dog Stand:

*:focus {
    color: blue;
    background-color: yellow;
    outline-color: red;
    outline-style: solid;
    outline-width: 2px;
}

The custom stylesheet is stored in ~/.config/gtk-3.0/gtk.css and applies regardless of theme.