search

Qalculate / qalculate-gtk

Qalculate! GTK+ UI
https://qalculate.github.io/
GNU General Public License v2.0
945 stars 68 forks source link

Customizing the dark theme colours #462

Open Gitoffthelawn opened 1 year ago

Gitoffthelawn commented 1 year ago

I was looking for a way to customize the colours used by Qalculate's dark theme. I've been reading through many issue reports, and couldn't find a direct answer, but I did find the snippet below.

Is it possible to use a technique like the one mentioned below to customize Qalculate's dark theme colours? If not, could the ability to support a custom Qalculate theme be added?

Originally posted by @hanna-kn in https://github.com/Qalculate/qalculate-gtk/issues/18#issuecomment-604860016

Is it possible to specify a dark theme variant in windows 10?

You can either add environment variable (in advanced system properties) GTK_THEME with value Adwaita:dark, or create a file named settings.ini, in folder C:\Program Files\Qalculate\share\gtk-3.0 (will only change the theme of Qalculate) or C:\Users\[username]\AppData\Local\gtk-3.0, with the following contents

[Settings]
gtk-application-prefer-dark-theme=true
hanna-kn commented 1 year ago

There are many GTK themes available (e.g. at https://www.gnome-look.org/browse?cat=135) which can change the appearance of qalculate-gtk. Unpack the theme in Qalculate\share\themes (or possibly in C:\Users\[username]\AppData\Local\themes) and specify gtk-theme-name in gtk-3.0/settings.ini (as with dark theme in above quote). It is possible that some themes might have additional requirements or does not work properly on Windows.

You can also try experimenting with CSS in gtk.css (placed in same folder as settings.ini).

Primitive example:

* {
        background-color: #000000;
        foreground-color: #ffffff;
}
Gitoffthelawn commented 1 year ago

Thanks Hanna. That looks powerful. I'll play around with it. I'm quite proficient with CSS. Is there a list of IDs or classes that Qalculate uses for each UI element, or does it simply use generic IDs/classes?

hanna-kn commented 1 year ago

See: https://docs.gtk.org/gtk3/css-overview.html https://docs.gtk.org/gtk3/css-properties.html

Set environment variable GTK_DEBUG=interactive to show application specific CSS ids and test CSS rules when running qalculate-gtk.

I would however recommend that you try find an appropriate theme at https://www.gnome-look.org/browse?cat=135 first.