Dark themes are now available for Windows 10 and Mac and it is increasingly expected that desktop applications will offer a dark theme. Previously Qt support for dark themes was patchy. But I am happy to say that it now seems to work fine with Qt 5.12.2, and I have added dark themes to both Windows and Mac versions of my Easy Data Transform and Hyper Plan applications.
Easy Data Transform for Mac with a dark theme:
Easy Data Transform for Windows with a dark theme:
Hyper Plan for Mac with a dark theme:
Hyper Plan for Windows with a dark theme:
I haven’t decided yet whether to add a dark theme to PerfectTablePlan.
Adding dark themes was a fair amount of work. But a lot of that was scouring forums to work out how to integrate with macOS and Windows. Hopefully this article will mean you don’t have to duplicate that work.
Dark themes work a bit differently on Windows and Mac. On Windows changing the UI theme to dark won’t directly affect your Qt application. But you can use an application stylesheet to set the appearance. On Mac changing the UI theme to dark will automatically change your application palette, unless you explicitly block this in your Info.plist file (see below). On both platforms you will need to change any icons you have set to the appropriate light/dark version when the theme changes. Some of this may change in future as dark themes are more closely integrated into Qt on Windows and Mac.
macOS
You can add the following helper functions to a .mm (Objective-C) file:
#include "Mac.h"
#import <Cocoa/Cocoa.h>
bool macDarkThemeAvailable()
{
if (__builtin_available(macOS 10.14, *))
{
return true;
}
else
{
return false;
}
}
bool macIsInDarkTheme()
{
if (__builtin_available(macOS 10.14, *))
{
auto appearance = [NSApp.effectiveAppearance bestMatchFromAppearancesWithNames:
@[ NSAppearanceNameAqua, NSAppearanceNameDarkAqua ]];
return [appearance isEqualToString:NSAppearanceNameDarkAqua];
}
return false;
}
void macSetToDarkTheme()
{
// https://stackoverflow.com/questions/55925862/how-can-i-set-my-os-x-application-theme-in-code
if (__builtin_available(macOS 10.14, *))
{
[NSApp setAppearance:[NSAppearance appearanceNamed:NSAppearanceNameDarkAqua]];
}
}
void macSetToLightTheme()
{
// https://stackoverflow.com/questions/55925862/how-can-i-set-my-os-x-application-theme-in-code
if (__builtin_available(macOS 10.14, *))
{
[NSApp setAppearance:[NSAppearance appearanceNamed:NSAppearanceNameAqua]];
}
}
void macSetToAutoTheme()
{
if (__builtin_available(macOS 10.14, *))
{
[NSApp setAppearance:nil];
}
}The macSetToLightTheme() and macSetToDarkTheme() are useful if you want to give the user the option to ignore the OS theme. Call macSetToAutoTheme() to set it back to the default.
Corresponding header file:
#ifndef MAC_H
#define MAC_H
bool macDarkThemeAvailable();
bool macIsInDarkTheme();
void macSetToDarkTheme();
void macSetToLightTheme();
void macSetToAutoTheme();
#endif // MAC_HYou then need to add these files into your .pro file:
macx {
...
HEADERS += Mac.h
OBJECTIVE_SOURCES += Mac.mm
}You can detect a change of theme by overriding changeEvent():
void MainWindow::changeEvent( QEvent* e )
{
#ifdef Q_OS_MACX
if ( e->type() == QEvent::PaletteChange )
{
// update icons to appropriate theme
...
}
#endif
QMainWindow::changeEvent( e );
}If you decide you *don’t* want to add a dark theme to your Mac app, the you should add the bold entry below to your Info.plist file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<key>NSRequiresAquaSystemAppearance</key>
<true/>
</dict>
</plist>This will then force it to be shown in a light theme, regardless of the theme the operating system is in.
Windows
To set a dark theme palette you can use a stylesheet:
QFile f( ":qdarkstyle/style.qss" );
if ( !f.exists() )
{
qWarning() << "Unable to set dark stylesheet, file not found";
}
else
{
f.open( QFile::ReadOnly | QFile::Text );
QTextStream ts( &f );
getApp()->setStyleSheet( ts.readAll() );
}The stylesheet I used was a modified version of qdarkstyle from a few years ago.
To unset the stylesheet and return to a light theme just call:
getApp()->setStyleSheet( "" );Alternatively you can do it by changing the application palette.
Windows helper functions:
bool windowsDarkThemeAvailable()
{
// dark mode supported Windows 10 1809 10.0.17763 onward
// https://stackoverflow.com/questions/53501268/win10-dark-theme-how-to-use-in-winapi
if ( QOperatingSystemVersion::current().majorVersion() == 10 )
{
return QOperatingSystemVersion::current().microVersion() >= 17763;
}
else if ( QOperatingSystemVersion::current().majorVersion() > 10 )
{
return true;
}
else
{
return false;
}
}
bool windowsIsInDarkTheme()
{
QSettings settings( "HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize", QSettings::NativeFormat );
return settings.value( "AppsUseLightTheme", 1 ).toInt() == 0;
}Currently there seems to be no way to conect to a signal or event that shows the theme has changed in Windows. So I connected to a signal from a QTimer that fires every 5 seconds to check windowsIsInDarkTheme().
Icons
When the theme changes you potentially need to update any icons you have set, e.g. for the toolbar.
In a light theme you can usually set the active icons and let Qt calculate the corresponding disabled icons. This doesn’t work for a dark theme as you want the disabled icons to be darker than the enabled icons, rather than lighter. So you can either calculate the disabled icons programmatically or you can provide a set of disabled icons as well. I opted for the former.
Assuming your icons are set up as resources under :/icons/dark and :/icons/light you can do something like this:
QString getResourceName( const QString& iconName, bool dark )
{
return QString( ":/icons/%1/%2" ).arg( dark ? "dark" : "light" ).arg( iconName );
}
QPixmap getPixmapResource( const QString& iconName, bool dark )
{
QString resourceName = getResourceName( iconName, dark );
QPixmap pixmap = QPixmap( resourceName );
Q_ASSERT( !pixmap.isNull() );
return pixmap;
}
QIcon getIconResource( const QString& iconName, bool dark )
{
QIcon icon;
QPixmap pixmap = getPixmapResource( iconName, dark );
icon.addPixmap( pixmap );
if ( dark )
{
// automatic disabled icon is no good for dark
// paint transparent black to get disabled look
QPainter p( &pixmap );
p.fillRect( pixmap.rect(), QColor( 48, 47, 47, 128 ) );
icon.addPixmap( pixmap, QIcon::Disabled );
}
return icon;
}Then you can reset the icon for the appropriate theme with:
bool isDark()
{
#ifdef Q_OS_MACX
return macIsInDarkTheme();
#else
return windowsIsInDarkTheme();
#endif
}
...
myButton->setIcon( getIconResource( "my_icon.png", isDark() ) );
...You may also be able to update icons through QIcon::setThemeName(). But I didn’t explore this in any detail.
Note that you probably don’t want the enabled icons to be pure white, as it is a bit too visually jarring against a dark theme.
Successful Software 