Dark Fusion Theme for Qt 5

My favorite new theme (for Windows applications, at least) is the Fusion theme that came with Qt 5. I was working on an application recently where the people I was making it for wanted to be able to switch between a lighter and darker theme. Luckily, the Fusion theme uses the applications color palette. I’m putting the code up on Github in a gist, but there won’t be the code to switch between the two themes. I’ll post that later as a quick tip/tutorial.

You can find the theme on Github here. Alternatively, I’m posting the code below in a collapsed code box. Feel free to make changes and submit them back on Github though! You can use this theme in all your applications, but be sure to tell me about them if you can. I’d love to see what people do with it. 🙂

qApp->setStyle(QStyleFactory::create("Fusion"));

QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(53,53,53));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25,25,25));
darkPalette.setColor(QPalette::AlternateBase, QColor(53,53,53));
darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
darkPalette.setColor(QPalette::ToolTipText, Qt::white);
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53,53,53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));

darkPalette.setColor(QPalette::Highlight, QColor(42, 130, 218));
darkPalette.setColor(QPalette::HighlightedText, Qt::black);
    
qApp->setPalette(darkPalette);

qApp->setStyleSheet("QToolTip { color: #ffffff; background-color: #2a82da; border: 1px solid white; }");
Advertisements

12 thoughts on “Dark Fusion Theme for Qt 5

  1. Alketi

    Thank you for the article. One question:

    Are you able to switch the palette’s dynamically, while the app is running, as in via a preferences dialog or something similar?

    Using the QPalette on the Fusion style works for me if I launch the app that way, but when switching between light and dark while the app is running, certain elements, like the text of radio buttons, remain locked to the previous style.

    Something seems amiss with the ability of QPalette to override existing widgets.

    Have you run into this at all? Any ideas?

    Reply
    1. TheMachine Post author

      Yes, of course! I may write a blog post on this, as I have done it before.

      Basically, when you set the palette before creating your MainWindow, the palette is inherited by the main window, and subsequently all the child windows. If you need to reset the palette. I ran into some issues with this, as the widgets were not repainting with the new palette. So what I did was loop through all the widgets in my window, as well as all the windows and their widgets, assigning the palette and forcing a repaint.

      Reply
      1. TheMachine Post author

        Hey there Alketi. Take a look at this code: https://gist.github.com/QuantumCD/9863860

        It should get you on the right track. 🙂 If you want to allow completely custom theming, simply make a window that has the appropriate color editors for each palette setting, then serialize those themes and load them back in (not hard, QSettings can automatically serialize QColor, etc.). You can use the Gist code to switch between palettes easily at runtime.

  2. Bart

    checkboxes of checkable items in a table or tree view do not appear. Can someone assist on a stylesheet addition to get this nice? I tried to change the indicator and make a solid border, but resulted in no indication when checked or unchecked.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s