Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?
@papuriko

PyQt/PySide/Qt Designer用のダークテーマを作ってみた

はじめに

PyQt、PySide、QtDesignerでダークテーマが使いたいなと思い、簡単にダークテーマが使用できるライブラリ「PyQtDarkTheme」を作成しました。
PyPi、Anaconda両方でインストール可能です。

機能

  • PyQt、PySideにダークテーマを適用する
  • QtDesignerのプレビューにもダークテーマが適用できる
  • Qtのプロパティ機能を使用してサイドバーなどのモダンなスタイルが使用できる

QDarkStyleSheetBreezeStyleSheetsを参考にしました。

見た目

Dark Theme

widget_gallery_dark_theme

Light Theme

Darkテーマとバランスが取れるように独自のLightテーマも用意しています。
widget_gallery_light_them

使い方

PySide6を使った簡単な例を紹介します。
スクリプトで使用する方法は簡単。 qdarktheme.load_stylesheet()でスタイルシートを読み込みsetStyleSheet()でスタイルシートをセットします。

import sys

import qdarktheme
from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton

app = QApplication(sys.argv)
main_win = QMainWindow()
push_button = QPushButton("PyQtDarkTheme!!")
main_win.setCentralWidget(push_button)

# Darkテーマのスタイルシートをロードしてアプリケーションのスタイルシートにセット
app.setStyleSheet(qdarktheme.load_stylesheet())

main_win.show()

app.exec()


実行結果



load_stylesheet()の引数にlightを入れるとLightテーマになります。

app.setStyleSheet(qdarktheme.load_stylesheet("light"))

Qt DesignerでDarkテーマを使用する

GUIアプリケーションでQt Designer用のテンプレートフォルダを作成し、その中にuiファイルを配置することで比較的簡単にダークテーマが使用できるようになります。
スクリーンショット 2021-08-30 6.45.11.png

手順

  1. ターミナルでpython -m qdarktheme.designer_supporterを叩いてTemplate Creatorを起動。   スクリーンショット 2021-08-30 4.30.02.png
  2. 使いたいテーマを選びCreateボタンを押してテンプレートを任意の場所に作成。
  3. テキストボックス内に表示されるスタイルシートをコピー(ボックス内右上のコピーボタンを押すことで一括コピー可能)。
  4. Qt Designerを起動して作成したテンプレートフォルダのルートにuiファイルを保存。
  5. コピーしたスタイルシートをトップレベルのWidgetのスタイルシートプロパティに貼り付ける。(例えばQMainWindowのuiファイルを作成した場合はQMainWindowのスタイルシートプロパティに貼り付ける)
  6. リソースブラウザを開いてテンプレートフォルダ内にあるresource.qrcを登録する。

PyQt6ではリソース機能がサポートされなくなりました。上記の方法で作成したuiファイルをPyQt6で使用したい場合、pyファイルに変換したあと自動生成されたsetStyleSheet()の部分を削除し、qdarktheme.load_stylesheet()でDarkテーマを適用する必要があります。

カスタムプロパティ

PyQtDarkThemeではカスタムプロパティを使用してモダンなスタイルを作成することもできます。
以下の例ではQToolBarのtypeカスタムプロパティにsidebarを設定してサイドバーを作成しています。

sidebar = QToolBar()
sidebar.setProperty("type", "sidebar")





サポートしているカスタムプロパティ

Widget プロパティ デフォルト値
QToolBar type toolbar, sidebar toolbar
QPushButton type outlined, contained, text outlined
QLineEdit state normal, warning, error normal
QFrame type normal, h_line, v_line normal

おわりに

PyQtやPySideでダークテーマを使いたいなと思っている人がいたら是非使ってみてください。
何か問題やリクエストなどがあったらここのコメントやissueで教えていただけると幸いです。
アイコン以外はMITライセンスです。フォークなりクローンなり自由にしていただいて構いません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?