{"id":44487,"date":"2023-10-07T13:08:54","date_gmt":"2023-10-07T13:08:54","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=44487"},"modified":"2023-10-07T13:08:54","modified_gmt":"2023-10-07T13:08:54","slug":"qt-apps-follow-system-light-dark-style-ubuntu-22-04","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2023\/10\/qt-apps-follow-system-light-dark-style-ubuntu-22-04\/","title":{"rendered":"Make Qt Apps follow System Light\/Dark Style in Ubuntu 22.04"},"content":{"rendered":"<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-39672\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo-250x250.webp\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo-250x250.webp 250w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo-300x300.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo-600x600.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo-768x768.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2020\/07\/qt-logo.webp 1200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p>This simple tutorial shows how to make Qt-based applications automatically change their theme to be light or dark, according to system color style in Ubuntu 22.04.<\/p>\n<p>Ubuntu has global option to change system color scheme to light or dark since 22.04. However, Qt apps (e.g., VirtualBox, qBittorrent, keepassxc) always stick to their own color style, except for the title-bar.<\/p>\n<p>To make Qt applications fit into GNOME environment as well as possible, Fedora Linux is working on <a href=\"https:\/\/github.com\/FedoraQt\" target=\"_blank\" rel=\"noopener\">some projects<\/a> to do the job.<\/p>\n<p>So far, <a href=\"https:\/\/github.com\/FedoraQt\/QGnomePlatform\" target=\"_blank\" rel=\"noopener\">QGnomePlatform theme<\/a> is a good choice, though the upstream has been switching to <a href=\"https:\/\/github.com\/FedoraQt\/QAdwaitaDecorations\" target=\"_blank\" rel=\"noopener\">QAdwaitaDecorations<\/a>.<\/p>\n<p>With it, your Qt applications will:<\/p>\n<ul>\n<li>take use GNOME Adwaita style theme.<\/li>\n<li>automatically switch to light or dark, depends on system color style.<\/li>\n<li>have native header-bar and borders, even when running against Wayland<\/li>\n<\/ul>\n<div style=\"width: 610px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-44487-1\" width=\"610\" height=\"275\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qt5-apps-autoswitch-lightdark.webm?_=1\" \/><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qt5-apps-autoswitch-lightdark.webm\">https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qt5-apps-autoswitch-lightdark.webm<\/a><\/video><\/div>\n<h3>Install the QGnomePlatform Theme<\/h3>\n<p>The QGnomePlatform Theme package is available in system repositories since Ubuntu 23.04. <b>Sadly, it&#8217;s built for Qt5 applications only!<\/b><\/p>\n<p>For Ubuntu 22.04, I&#8217;ve made it into this <a href=\"https:\/\/launchpad.net\/~ubuntuhandbook1\/+archive\/ubuntu\/qgnomeplatform\" target=\"_blank\" rel=\"noopener\">unofficial PPA<\/a> for amd64, arm64\/hf architectures support.<\/p>\n<p>To install it, press <b>Ctrl+Alt+T<\/b> on keyboard to open terminal. Then, run the 2 commands below one by one:<\/p>\n<ol>\n<li>Run command to add the PPA:\n<pre>sudo add-apt-repository ppa:ubuntuhandbook1\/qgnomeplatform<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44489\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa-600x216.webp\" alt=\"\" width=\"600\" height=\"216\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa-600x216.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa-300x108.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa-768x277.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/qgnomeplatform-ppa.webp 786w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/li>\n<li>Then install the theme package:\n<pre>sudo apt install qgnomeplatform-qt5<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44491\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5-600x217.webp\" alt=\"\" width=\"600\" height=\"217\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5-600x217.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5-300x108.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5-768x277.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/apt-qgnome-platformqt5.webp 786w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/li>\n<\/ol>\n<p><i>NOTE: Ubuntu 23.04 and Ubuntu 23.10 users can directly run the last <code>apt install<\/code> command without adding PPA.<\/i><\/p>\n<p>After installation, the new theme package should be automatically taken use for your Qt (qt5) apps. Some Qt apps use their own theme options, you have to open their &#8216;Preferences&#8217; or &#8216;Settings&#8217; dialog to switch to default or system theme.<\/p>\n<p>If NOT, open &#8216;Files&#8217; and press Ctrl+H to view hidden files. Then, click editing the &#8216;<b>.profile<\/b>&#8216; file and adding the new line below in the end:<\/p>\n<pre>export QT_QPA_PLATFORMTHEME='gnome'<\/pre>\n<p>Finally, log out and back in to apply change.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44490\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome-600x343.webp\" alt=\"\" width=\"600\" height=\"343\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome-600x343.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome-300x172.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome-768x439.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome-1320x755.webp 1320w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/10\/export-qgnomeplatform-gnome.webp 1365w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h3>Uninstall:<\/h3>\n<p>You can remove the Ubuntu PPA after installation, since it will no longer receive updates. To do so, open terminal and run command:<\/p>\n<pre>sudo add-apt-repository --remove ppa:ubuntuhandbook1\/qgnomeplatform<\/pre>\n<p>To remove the theme package, run:<\/p>\n<pre>sudo apt remove --autoremove qgnomeplatform-qt5<\/pre>\n<p>Also remember to restore the <code>.profile<\/code> file in your user home.<\/p>","protected":false},"excerpt":{"rendered":"<p>This simple tutorial shows how to make Qt-based applications automatically change their theme to be light or dark, according to system color style in Ubuntu 22.04. Ubuntu has global option to change system color scheme to light or dark since 22.04. However, Qt apps (e.g., VirtualBox, qBittorrent, keepassxc) always stick to their own color style, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":39672,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[1350],"class_list":["post-44487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos","tag-qt"],"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/44487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=44487"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/44487\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/39672"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=44487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=44487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=44487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}