Dark Theme in my program?

[domasz]

How can I style my program to have a dark theme? Is there any theming in Lazarus? I would like to keep my existing controls (TForm, TPageControl, TPanel etc.) and not write everything from stratch.

[dbannon]

Sadly Domasz, you did not mention what platform you use or target with your apps. It varies....

If you are talking about Lazarus, I believe a Lazarus built with Qt5 can do an acceptable dark theme. GTK2 Lazarus with dark theme looks horrible.

On Linux, gtk2 apps follow the selected theme pretty well. Qt5 app can be instructed to follow a GTK2 theme and that works well on systems with gtk2 themes already installed. Qt5 apps can be controlled with qt5ct.

And Windows, its possible to question the registry to find out of the user has selected a dark theme and darken some controls accordingly. But it keeps changing. See https://github.com/tomboy-notes/tomboy-ng/blob/master/source/mainunit.pas #702

I don't know about MacOS, my mac test box is pre dark theme. As am I.


Davo

[trev]

I don't know about MacOS, my mac test box is pre dark theme. As am I.

macOS takes care of it in Cocoa - nothing needs doing to a Lazarus app to take advantage of it

The user can globally select via System Prefs light or dark or auto (auto does light during the day and dark at night).

[domasz]

Thank you both for answers.

I just noticed there are more and more programs which allow users to toggle Light/Dark mode and both modes are system independent. And this is what I am looking for, for Windows (but would be nice if it also worked on MacOS and Linux).
Delphi has VCL Styles for that.

[paweld]

As @dbannon mentioned you can use QT5.
Attached is an example of how to change the color palette in the app - tested under Windows, but I think it should work on Linux too.
You can download the needed dll's (x86) from: https://files.brudnopis.ovh/qt5_dll.7z

[tetrastes]

@paweld, are you satisfied how PageControl looks in dark mode? It's almost unreadable. And ScrollBar at ListBox (or Memo?) with black arrows is bad looking also.

[domasz]

As @dbannon mentioned you can use QT5.
Attached is an example of how to change the color palette in the app - tested under Windows, but I think it should work on Linux too.
You can download the needed dll's (x86) from: https://files.brudnopis.ovh/qt5_dll.7z

Thanks but I hate using DLLs. They are little black boxes that can break anytime and I won't be able to fix them.

[paweld]

@tetrastes: I don't use dark themes - it's not readable for me.
I made the program for fun, to see how it looks like to play with colors in QT

[Erik@T]

If you want 'native' dark mode in Windows (no external dll's) you should check out the source of Double Commander (an opensource file manager written in Lazarus). Alexander Koblov did some great work to darken the LCL under Windows.
Check the final result in the Double Commander snapshot:
https://doublecmd.sourceforge.io/site/eng/snapshots.php

For your own project, take three required sources from:
https://github.com/doublecmd/doublecmd/tree/master/src/platform/win

uwin32widgetsetdark.pas
udarkstyle.pas
uimport.pas

Include uwin32widgetsetdark and udarkstyle into your project.
Modify udarkstyle a little:
-   Remove 'uEarlyConfig' from uses,
-   In 'procedure InitDarkMode();' change 'AppMode := TPreferredAppMode(gAppMode);' to 'AppMode := pamForceDark;' to force dark mode.

Then your application should turn dark.

Also check this topic 'Dark mode class…'
https://forum.lazarus.freepascal.org/index.php?topic=59351.0

[domasz]

For your own project, take three required sources from:
https://github.com/doublecmd/doublecmd/tree/master/src/platform/win

Thanks, this is great!

[dbannon]

Hmm, if you want to use Qt5 (I do!) then its very easy to play with colours using qt5ct.  You choose the colors you want to use and then set a env var, QT_QPA_PLATFORMTHEME=qt5ct and start your app.

qt5ct comes with a small set of colour themes, but dead easy to copy one and edit its colours, watch your app change (or squirm) as you play. IDK is qt5ct is available on Windows, I use native Windows there.

Another approach, on Linux at least is to make your qt5 app follow the existing selected theme. Again, an env var, this time QT_QPA_PLATFORMTHEME=gtk2 and it matches your other (ie gtk2/3) apps.  You might need to install qt5-style-plugins.

Further, on qt5, you can play with eg Buttons color property, don't try that on gtk2 by the way.

Davo

[d7_2_laz]

Windows x64, Lazarus 2.2.6 x64. Preferring windows widgetset.
The info from Erik@T (as of reply #8) i found to be very very interesting.

I wouldn't have believed that such is possible without, mybe QT, but i tried it out
(i had assumed that for such something like a Lazarus port of the alphaskins would be needed, but i'm not aware of one).

At the first glance that was very surprising. Wow! I was really impressed! (thanks a lot Erik@T for the hint)

I saw some caveats though, at:
- Scrollbars
- Treeview
- Listview (windows common control).
- A Pagecontrol with ATTabs as tab headers.
See pictures attached (but no attabs here) .
The white portion of the listview is easily solvable via Color := clBackground.

But not the column headers and the scrollbars.
But what about the font colors of the? Seems hey cannot be overwritten. Maybe it could be possible via ownerdraw.
Considering the best case, what does certainly remain?
- Scrollbars
- Treeview expand sign and vertical lines
- Listview column headers
- attabs (special case here)
==> Does anybody tried that and does know a trick?
Erik@T, if you should read this: envountered the same and maybe you know more about?

[d7_2_laz]

Need to do a small update.
About the treeview. my sentence about the expand sign was misleading. Occurs only if set to ExpandSignType tvestPlusMinus; But solvable with eg. ExpandSignColor clWhite- Same with the treelines: solvable with eg.: TreeLineColor clWhite;
The not readable colors for the unfocued nodes is solvable via custom draw (did see it in another test app, is not part of the screenshot below. But it can be done).
So an updated picture (minus the color for the treenodes) is attached.

Missing: scrollbars, listview column header, and (new tried:) statusbar.
Attabs - need to look at when i've time.

I'm fully amazed and impressed to see what's possible here, therefore this posting..

[lz57005]

Just add ApplyDarkStyle; in initialization section of uwin32widgetsetdark.pas or in Form1.OnCreate function of your project.

[d7_2_laz]

@z57005:  thanks a lot for the excellent tipp!
That appears to cover the panel's scrollbars too, as well as the Statusbar
(not in my target app itself yet. Still need to find out where's the difference).

Attabs appear to be no problem either (at least for the container.: via ColorBg := clBackground;. For the tabs itself it should be possiple too; later ...).

Still to be pursued:
- Listview's column header and scrollbar

So great!
Attached the picture from the little test.