How to Change Tooltip Colors in Kate Editor and Other QT5-based Programs

Have you ever struggled to read tooltips in the Kate editor because of illegible colors, such as black text on a dark gray background? You’re not alone. Many find the default setting less than ideal, or hard to read. But there’s good news – with a few tweaks, you can customize these colors to suit your preferences.

Kate is a well-known Linux text editor, great for handling “ordinary text” files. It’s not the prime choice for programming—where editors like Visual Studio Code excel with their syntax highlighting and parameter prompting—but it’s a solid option for everyday editing.

Adjusting Kate’s UI Elements with the QT5 Configuration Tool

Several user interface elements for Kate, and other QT5-based applications, are governed by the “QT5 Configuration Tool”. Original setting files are locked, but you can copy and customize them to your liking.

• Open the QT5 Configuration Tool.
• Click the Style Sheets tab.
• Click on the style name you wish to alter, like “tooltip-simple.qss”.
• Click the “View” button, select all text, copy it, and then click “Create” to paste and edit your new style.

You’ll want to remove the lines that dictate the tooltip background and text color. Mine had this (yeah, weird, I have no idea how it happened):

background: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 palette(window), stop: 1 palette(alternate-window));

and:

color: palette(text);

Substitute your preferred CSS colors. In this example, I use white text on a dark cerulean background.

I also specified the font size for the tooltips. This should be in pixels (using ems didn’t work), e.g. 16px or 18px.

Here is the entire text of the setting file:

QToolTip{

  /* GL colors, white on Primary Darker - Calm Cerulean */
  color: #ffffff;
  background: #284568;  
  font-size: 16px;

  border-radius: 3px;
  border: 1px solid palette(highlight);
  padding: 1px;
}

Here is another example, taken from traynotificationsimple.qss (since traynotificationsimple.qss styles Balloon tips not Tool tips, just copy the color lines):

background-color: palette(base);
color: palette(text);

I saved the new settings with my initials at the beginning: “GL-tooltip-simple.qss”

After saving your new settings, click to put a checkmark by your new Setting.

You may need to restart any QT5-based applications for the changes to take effect.

Remember: It’s about making your work environment as comfortable and personalized as possible. With these customizations, you can ensure that your tools work for you, not against you.

If you need any assistance with WordPress setup, security, or want to learn more about creating engaging content and effective marketing strategies, feel free to contact me. Let’s turn that overwhelm into mastery together.