PCsuggest

  • Quick tip
  • SECURITY
  • NETWORKING
  • OpenWrt
  • HARDWARE

How to use dark widget style and color schema in LXQt

Updated - October 15, 2021 by Arnab Satapathi

LXQt is gaining significant popularity recently, it's already available in official Debian and Ubuntu repos.

So I was thinking about to use dark colored widget style in entire LXQt desktop.

It's easy to implement on GTK+ based applications with lxappearance or similar tools, as there are hundreds of nice dark colored gtk2/gtk3 themes available.

But what about Qt apps while not running KDE plasma desktop ? Manjaro Linux already did this with Kwantum (misspelt kvantum ?? ) style, more here.

But I'm going to do this in a different way, use Breeze or whatever widget style, but change the color schema with qt5ct .

Use Plasma Theme Switcher to easily change Qt app color schema, Dark, Light or Solarized. Use any KDE colors file with it.

Contents

  • 1. Install qt5ct
  • 2. Change some Qt related environment variables
  • 3. Set color schema of your choice
  • 4. Matching icon theme, Qt4 widget style and GTK+ theme
  • Conclusion

1. Install qt5ct

Qt5ct is a theming tool for Qt 5 apps, similar to qtconfig-qt4 for Qt 4 apps, but more configurable and much more options.

You're going to need that, here how to build and install qt5ct from source.

If you are running Ubuntu, a well mentained PPA is already available from webupd8.

sudo add-apt-repository ppa:nilarimogard/webupd8

sudo apt-get update

sudo apt-get install qt5ct

2. Change some Qt related environment variables

To actually use qt5ct as Qt 5 application theming tool in LXQt, you need to change two environment variables in  LXQt Session Settings, i.e. in lxqt-config-session .

amazon prime logo
Try AmazonPrime for free
Enjoy free shipping and One-Day delivery, cancel any time.

Add two extra Environment Variables,  QT_PLATFORM_PLUGIN and QT_QPA_PLATFORMTHEME , and set value qt5ct for both of them.

lxqt_session_settings_setenv

Logout from the current session and login again, now you can use Qt5ct  to set color schema and widget style for Qt 5 apps.

Optional: Check environment variables,

printenv  | egrep 'QT_QPA_PLATFORMTHEME|QT_PLATFORM_PLUGIN'

Both of the environment variables should be qt5ct.

3. Set color schema of your choice

Qt5ct stores it's color schemas under the ~/.config/qt5ct/colors/ folder, these are text files with a .conf extension, totally different from KDE color schema.

You can edit the colors one by one under the Palette section, or get some from here.

  1. Breeeze Dark , inspired by Breeze dark color schema of KDE 5.
  2. GreyBird , colors close to Greybird GTK+ theme.

Many KDE, Qt compaitable colors schemes are located at /usr/share/color-schemes/ and ~/.local/share/color-schemes/ folders, Breeze dark is also available there.

Move the color schemas to the ~/.config/qt5ct/colors/ folder to use them.

LXQt_qt5ct_choose_color_schema

4. Matching icon theme, Qt4 widget style and GTK+ theme

With dark widget style, you should use a matching icon theme too, I'm using Antu Dark icon theme, here some elegant icon theme for both Qt and GTK+ based apps.

Well, the dark color schema applied through qt5ct is not going to work properly with Qt4 based apps, they will use the colors defined by ~/.config/Trolltech.conf file or as defined by KDE. You can use qtconfig-qt4 to edit the color palette for Qt4 apps, though it's a bit tedious.

As said before, there are hundreds of dark colored themes for GTK+ based apps, use your favorite one.

Arc-Dark GTK+ theme is a good example, Breeze-Dark is another good alternative.

Here's some elegant LXQt themes, check them out!

Conclusion

So that's it ! Pretty easy, and dark colored widgets are also easy on eyes, perfect for low light condition.

I'm going to write another post soon about how to easily convert KDE color schemas to qt5ct color schemas easily, stay connected and enoy 😀

Filed Under: how to Tagged With: icons, LXQt, Qt, Qt apps

Your comments
  1. Tristan says

    May 25, 2019

    Recent version of qt requests one additional color such as #000000 for every line in the config file.

    For breeze dark, it's now:

    [ColorScheme]
    active_colors=#eff0f1, #31363b, #4c545c, #40464d, #171a1c, #2a2e32, #eff0f1, #ffffff, #eff0f1, #232629, #31363b, #111314, #3daee9, #eff0f1, #2980b9, #7f8c8d, #31363b, #000000, #31363b, #eff0f1, #000000
    disabled_colors=#6e7175, #2e3338, #4a5259, #3e444a, #16191b, #282c30, #65686a, #ffffff, #6e7175, #212427, #2e3338, #101213, #2e3338, #6e7175, #234257, #404648, #2e3338, #000000, #31363b, #eff0f1, #000000
    inactive_colors=#eff0f1, #31363b, #4c545c, #40464d, #171a1c, #2a2e32, #eff0f1, #ffffff, #eff0f1, #232629, #31363b, #111314, #224e65, #eff0f1, #2980b9, #7f8c8d, #31363b, #000000, #31363b, #eff0f1, #000000

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © PCsuggest.com · All rights reserved.

  • Home
  • About
  • Contact
  • Privacy Policy
  • Sitemap