UI のデザインを変更したい場合、QSS という、CSS とほぼ同じ構文のスタイルシートを使って変更できます。
QSS ファイルの拡張子は qss が一般的なようですが、エディタによっては css のほうが便利かもしれません。
QSS 専用のエディタもあるようです。
環境
- PySide 6.2.2.1
ファイルの読み込みと適用方法
スタイルシートを読み込み、QApplication に対して setStyleSheet() で設定するとアプリケーション全体へ適用されるようです。
QMainWindow {
background-color: #444444;
}
import sys
from PySide6.QtWidgets import QWidget, QApplication, QMainWindow, QVBoxLayout, QPushButton
from PySide6.QtCore import Qt
class MainWindows(QMainWindow):
def __init__(self):
super().__init__()
container = QWidget()
vbox_layout = QVBoxLayout(container)
button = QPushButton('button0')
vbox_layout.addWidget(button, alignment=Qt.AlignCenter)
self.setCentralWidget(container)
if __name__ == "__main__":
try:
with open('style.qss', 'r') as f:
style = f.read()
except:
style = ''
app = QApplication(sys.argv)
app.setStyleSheet(style)
window = MainWindows()
window.show()
window.resize(360, 240)
sys.exit(app.exec())
QSS の書き方については以下のページがとても参考になりました。
特定のウィジェットにのみ適用する方法
setObjectName() で名前を設定し、IDセレクタを使って指定します。
QMainWindow {
background-color: #444444;
}
/* ボタン全体へ適用 */
QPushButton {
background-color: cyan;
color: #444444;
}
/* button0 のみに適用 */
QPushButton#button0 {
background-color: magenta;
color: #ffffff;
}
import sys
from PySide6.QtWidgets import QWidget, QApplication, QMainWindow, QVBoxLayout, QPushButton
from PySide6.QtCore import Qt
class MainWindows(QMainWindow):
def __init__(self):
super().__init__()
container = QWidget()
vbox_layout = QVBoxLayout(container)
button = QPushButton('button0')
button.setObjectName('button0')
vbox_layout.addWidget(button, alignment=Qt.AlignCenter)
button = QPushButton('button1')
vbox_layout.addWidget(button, alignment=Qt.AlignCenter)
button = QPushButton('button2')
vbox_layout.addWidget(button, alignment=Qt.AlignCenter)
self.setCentralWidget(container)
if __name__ == "__main__":
try:
with open('style.css', 'r') as f:
style = f.read()
except:
style = ''
app = QApplication(sys.argv)
app.setStyleSheet(style)
window = MainWindows()
window.show()
window.resize(360, 240)
sys.exit(app.exec())
カスタムウィジェットにスタイルを適用する
QWidget 継承して作ったカスタムウィジェットに QSS を適用するには、paintEvent をオーバーライドする必要があります。
これについては以下の記事に書いています。
