Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a complete (I think) dark color palette for the Qt 5 Fusion theme, as well as a nice style sheet for the tool tips that make them blend better with the rest of the theme. To have immediate effect, be sure to put this in your main function before showing the parent window. Child windows should automatically inherit the palette unless you …
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; }");
@ofbeaton
Copy link

ofbeaton commented Nov 28, 2018

This one doesn't handle disabled text (everything will appear enabled). Jorgen-VikingGod's appears to handle disabled controls properly.

@funlw65
Copy link

funlw65 commented Dec 31, 2018

Yeah, but this is a color palette, and the one you refer is a "skin".
So, people that look for a color palette, needs to add colors for disabled controls and text.

@matejk
Copy link

matejk commented Jun 18, 2019

How can one add palette for disabled controls to qtquickcontrols2.conf? Or is this done in some other way?

@mherrmann
Copy link

mherrmann commented Jul 2, 2019

Nice! I use this for my Qt dark theme example of a text editor.

image

@eduardathome
Copy link

eduardathome commented Oct 18, 2019

Hi, ok, quick question... I got the dark theme working and all but I got this annoying white border, like 1-2px wide. Currently I'm looking at Jorgen-VikingGod's example trying to figure out exactly what is the property that disables that border but maybe someone can enlighten me. Thanks !

@leplatrem
Copy link

leplatrem commented Mar 18, 2020

I had to fix appearance of disabled widgets:

    QColor darkGray(53, 53, 53);
    QColor gray(128, 128, 128);
    QColor black(25, 25, 25);
    QColor blue(42, 130, 218);

    QPalette darkPalette;
    darkPalette.setColor(QPalette::Window, darkGray);
    darkPalette.setColor(QPalette::WindowText, Qt::white);
    darkPalette.setColor(QPalette::Base, black);
    darkPalette.setColor(QPalette::AlternateBase, darkGray);
    darkPalette.setColor(QPalette::ToolTipBase, blue);
    darkPalette.setColor(QPalette::ToolTipText, Qt::white);
    darkPalette.setColor(QPalette::Text, Qt::white);
    darkPalette.setColor(QPalette::Button, darkGray);
    darkPalette.setColor(QPalette::ButtonText, Qt::white);
    darkPalette.setColor(QPalette::Link, blue);
    darkPalette.setColor(QPalette::Highlight, blue);
    darkPalette.setColor(QPalette::HighlightedText, Qt::black);

    darkPalette.setColor(QPalette::Active, QPalette::Button, gray.darker());
    darkPalette.setColor(QPalette::Disabled, QPalette::ButtonText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::WindowText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Text, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Light, darkGray);

@palucki
Copy link

palucki commented Apr 5, 2020

Thanks @leplatrem, @QuantumCD

I've used the style in my steganography app.
All the best to you guys!

@ZENALC
Copy link

ZENALC commented Feb 4, 2021

I had to fix appearance of disabled widgets:

    QColor darkGray(53, 53, 53);
    QColor gray(128, 128, 128);
    QColor black(25, 25, 25);
    QColor blue(42, 130, 218);

    QPalette darkPalette;
    darkPalette.setColor(QPalette::Window, darkGray);
    darkPalette.setColor(QPalette::WindowText, Qt::white);
    darkPalette.setColor(QPalette::Base, black);
    darkPalette.setColor(QPalette::AlternateBase, darkGray);
    darkPalette.setColor(QPalette::ToolTipBase, blue);
    darkPalette.setColor(QPalette::ToolTipText, Qt::white);
    darkPalette.setColor(QPalette::Text, Qt::white);
    darkPalette.setColor(QPalette::Button, darkGray);
    darkPalette.setColor(QPalette::ButtonText, Qt::white);
    darkPalette.setColor(QPalette::Link, blue);
    darkPalette.setColor(QPalette::Highlight, blue);
    darkPalette.setColor(QPalette::HighlightedText, Qt::black);

    darkPalette.setColor(QPalette::Active, QPalette::Button, gray.darker());
    darkPalette.setColor(QPalette::Disabled, QPalette::ButtonText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::WindowText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Text, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Light, darkGray);

Awesome thank you! For Python, use this:

palette.setColor(QPalette.Disabled, QPalette.Button, QColor(35, 35, 35))

@J-Kappes
Copy link

J-Kappes commented May 30, 2022

When I had floating docks using this I got white lines on the left edge.
Setting QPallete::Light to the same color as QPalette::Window fixed it.

darkPalette.setColor(QPalette::Light,QColor(53, 53, 53));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment