Light and Dark themes for Seer

Introduction

Some people have asked how to set dark and light themes in Seer. This wiki attempts to outline the steps.

First, Seer is a Qt app. So it relies on Qt Styles to set the theme. This also suggests to use the KDE desktop for better integration. However, this is not required. There are ways to use the Gnome or other desktops. The key is to have Qt Styles installed on your machine.

Default Styles

Qt comes with these styles built in.

• Plastik
• Windows
• Fusion

These affect the look of components (text fields, drop lists, etc.) in Seer, however, they don't affect the color. The color comes from the desktop settings. And for the KDE desktop, there is a config dialog for setting colors.

So, normal Qt Styles honor the desktop's color scheme.

Dark Styles

Some Qt Styles not only affect the look of components, they also include a color scheme. Light or Dark.

Here's a list of Dark themes. They have "dark" in their names. These are not affected by your desktop settings. The colors are set in the style.

How to get Styles

As mentioned, Qt comes with three default styles. If you want others, check your distribution.

Here are github links for some dark Qt Styles.

https://github.com/FedoraQt/adwaita-qt
https://github.com/FedoraQt/QGnomePlatform

And this page is a good reference for mixing Qt and Gnome.

https://wiki.archlinux.org/title/Uniform_look_for_Qt_and_GTK_applications#Styles_for_both_Qt_and_GTK

Setting the Style in Seer

Seer can select a Qt Style via the Seer toolbar. Seer looks on your system and lists the styles available. The ones with "dark" in their names use a dark set of colors. The ones without "dark" or "light" rely on your desktop color scheme.

Select the "dark" style you want to use. Seer will probably look like this.

The entire Seer app has a "dark" color scheme except for the editor area. Seer maintains the color scheme for editors independant of the rest of the app.

Configure the editor area color scheme via:

Settings -> Configuration -> Editor

Select the "dark" theme and click "Apply". You will see the code preview example updated with the new color scheme.

You can further edit the color scheme.

Seer can change the color for certain language constructs (keyword, comment, etc). Think of syntax highlighters. Currently, Seer supports only C or C++ highlighting.

These language constructs can have their own color scheme.

* Text                   General text
* Assembly Text          Text in the assembly tab
* Margin                 Left margin. (Line numbers and breakpoints)
* Current Line           Current line being executed
* Match                  Matching text when searching
* Class                  C++ class name
* Quotation              C/C++ quoted string
* Function               C/C++ function name
* Comment                C/C++ comment   // ...
* Multiline Comment      C/C++ multiline comment   /* ... */
* Keyword                C/C++ keyword (if, else, ...)

For each of them, you can change these text attributes.

* Weight                 Normal or Bold
* Style                  Normal or Italic
* Foreground color       Any color for the text's background
* Background color       Any color the the text

When selecting the color, double-click the current color to bring up a color dialog.

Setting the Style from the command line

If you know the name of a style, you can launch Seer with the style name. You don't need to set the style using the toolbar.

Here's an example using the "kvantum" dark style. Of course you need to change the colors used in the editor tabs.

$ seergdb -style=kvantum --start hellosegv

Saving the new settings

Click "OK" to use the new settings. However, they are not saved permamently. To do that, use

Settings -> Save Configuration ...

This will make the changes permament.