GTK/Qt tooltip mods

I’m using the ‘Arc-Dark‘ theme on all GTK2, GTK3, GTK4, Qt5 and Qt6 applications on Arch Linux. It is a very good-looking, dark(ish) low-contrast theme, saving my poor eyes from the glaring white default themes of the mentioned toolkits. The theme has just one little detail I wanted to change: the tooltips are a bit dull looking, and occasionally difficult to discern from the background.

I ended up doing the following modifications:

  1. Fixing GTK3 and GTK4 is easy:
    Just copy the following to .config/gtk-3.0/gtk.css and .config/gtk-4.0/gtk.css

    1. /* Disable ALL the stupid dropshadows */
    2. * {
    3.     border-radius: 0px;
    4.     box-shadow: none;
    5. }
    6. /* Tooltips modification */
    7. tooltip {
    8.     border-radius: 0px;
    9.     box-shadow: none;
    10.  }
    11. tooltip.background {
    12.     background-color: rgba(64, 69, 82, 1.0);
    13.     background-clip: padding-box;
    14.     border: 2px solid rgba(82, 148, 226, 1.0);
    15. }
    16. tooltip.background label {
    17.     padding: 0px;
    18. }
    19. tooltip decoration {
    20.     background-color: transparent;
    21. }
    22. tooltip * {
    23.     background-color: transparent;
    24.     color: #404552;
    25. }

    Unfortunately, it seems that the good old GTK2 does not support setting the color of the tooltip border separately, so GTK2 tooltips are left as they are.

  2. Fixing Qt5 and Qt6 tooltips is a bit more complicated. First, you need to have qt5ct and/or qt6ct installed.
    Copy this to /usr/share/qt5ct/qss/tooltip-awesome.qss and /usr/share/qt6ct/qss/tooltip-awesome.qss

    1. QToolTip{
    2.   background-color: palette(base);
    3.   border-radius: 0px;
    4.   border: 2px solid palette(highlight);
    5.   padding: 0px;
    6.   color: palette(text);
    7. }

    Then, copy the next to /usr/share/qt5ct/qss/traynotification-awesome.qss and /usr/share/qt6ct/qss/traynotification-awesome.qss. This fixes the balloon notification used by some Qt apps.

    1. QBalloonTip{ 
    2.   background-color: palette(highlight);
    3.   border-radius: 0px;
    4.   border: 2px solid;
    5.   padding: 0px;
    6.   color: palette(text);
    7. }

    After that, start qt5ct and/or qt6ct, go to ‘Style sheets’, choose the abovementioned qss files, and click ‘OK’.

Here’s a partial screenshot of the Dolphin file manager using the modified tooltip:

Dolphin part

This entry was posted in Linux and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *