✔ Python/4. GUI Programming

[PyQt6] GUI Stylesheet Theme 적용하기 : qt_material

  • -
주제: PyQt6 GUI 스타일/테마/Theme 적용하기
작성: 2023-10-25
수정: 2023-10-29

해당 포스팅은 "PyQt6로 쉽게 GUI 만들기" 시리즈의 4번째 글입니다.

  🖥️ PyQt6로 쉽게 GUI 만들기
1. 구조 이해 - 2023.10.24 - [✔ Python/4. GUI Programming] - [PyQt6] 기본적인 구조부터 이해하기
2. 코드 구현 - 2023.10.25 - [✔ Python/4. GUI Programming] - [PyQt6] QListWidget 활용한 GUI 구현[1/2] (코드 포함)
3. 코드 개선 - 2023.10.24 - [✔ Python/4. GUI Programming] - [PyQt6] QListWidget 활용한 GUI구현 [2/2] (코드 포함)
4. 테마 적용 - 2023.10.25 - [✔ Python/4. GUI Programming] - [PyQt6] GUI Stylesheet Theme 적용하기 : qt_material 

PyQt6를 사용하여 GUI 애플리케이션을 구현하다보면, 종종 스타일 때문에 '밋밋하다'라는 생각이 듭니다. 사실, 실질적으로 기능 구현이 제일 중요한 부분이긴하나, '같은 값이면 다홍치마' 라는 표현처럼 같은 기능구현이 되어 있는 애플리케이션이라면, 시각적으로 보다 매력적이고 사용자 친화적인 디자인이 사용자로 하여금 더 끌리게 되는 건 사실입니다. 

PyQT의 경우에도 커스터마이징을 통해서 그 색상을 조정할 수 있습니다. 다만, 색상 조합을 지정하나, 색상의 디자인적인 센스가 없는 경우에는 오히려 안하는 게 나은 상황이 발생하기도합니다. 그래서 오늘은 qt_material을 통해서 간단한게 적용하여 시간과 노력을 절약할  수 있는 방법을 소개하려고합니다.


1. 기본설정은 회색조 스타일...?

흰색, 회색 기반의 PyQt 기본 디자인 색상

PyQt의 기본적인 색상 스타일은 흰색과 회색을 기반으로 합니다. '심플 이즈 베스트' 라는 말처럼 가장 평범한 기본적인 형태입니다. 하지만, 조금은 심심한 느낌이 있어 커스텀으로 색상을 변경하려고합니다. 다만, 커스텀으로 색상을 변경하려면 스타일을 각각 적용해줘야합니다.  코드가 단순한 경우에는 비교적 간단하게 적용이 가능하지만, 코드가 복잡한 경우에는, 스타일 적용하는것도 만만치 않은 작업입니다.

 

2. 디자인 구원자,  qt_material!

qt_material을 통해서 간단하게 디자인적으로 깔끔한 스타일(테마, theme) 적용이 가능합니다.

qt_material 개발하신 분께 이 자리를 빌어 감사인사를 전합니다!

현재, 이 글 작성일을 기준으로 stylesheet은  PySide2, PySide6, PyQt5, PyQt6 모두 지원합니다. 이와 관련하여 상세한 내용이 필요한 분들은 하단의 공식문서에서 확인할 수 있습니다.

 

3.설치 및 적용 방법 

3-1. 설치방법

설치하는 방법은 간단합니다.

pip install qt-material

 



3-2. Stylesheet 적용하는 방법

또한, 적용방법도 간단합니다. 본인이 개발한 코드에서 딱 한줄만 작성하시면 바로 적용됩니다.
apply_stylesheet(app, theme='dark_teal.xml') 

import sys
from PyQt6 import QtWidgets
from qt_material import apply_stylesheet


app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

apply_stylesheet(app, theme='dark_teal.xml') # 스타일 적용

window.show()
app.exec_()

 

3-3. Stylesheet theme 종류

qt_material 27종의 색상디자인을 제공합니다. 크게, 다크버전과 화이트버전으로 나눠서 제공하고 있습니다.

from qt_material import apply_stylesheet, list_themes
print(list_themes())
['dark_amber.xml', 
'dark_blue.xml', 
'dark_cyan.xml', 
'dark_lightgreen.xml', 
'dark_medical.xml', 
'dark_pink.xml', 
'dark_purple.xml',
'dark_red.xml', 
'dark_teal.xml',
'dark_yellow.xml',
'light_amber.xml', 
'light_blue.xml', 
'light_blue_500.xml', 
'light_cyan.xml', 
'light_cyan_500.xml', 
'light_lightgreen.xml', 
'light_lightgreen_500.xml', 
'light_orange.xml', 
'light_pink.xml', 
'light_pink_500.xml',
'light_purple.xml', 
'light_purple_500.xml', 
'light_red.xml', 
'light_red_500.xml',
'light_teal.xml', 
'light_teal_500.xml', 
'light_yellow.xml']

qt_material dark theme 적용예시(dark_pink / dark_blue / dark_yellow)
qt_material light theme 적용 예시(light_pink / light_blue_500 / light_yellow)

만들어주셔서 감사합니다


해당 포스팅은 "PyQt6로 쉽게 GUI 만들기" 시리즈의 4번째, 마지막 글입니다.

  🖥️ PyQt6로 쉽게 GUI 만들기
1. 구조 이해 - 2023.10.24 - [✔ Python/4. GUI Programming] - [PyQt6] 기본적인 구조부터 이해하기
2. 코드 구현 - 2023.10.25 - [✔ Python/4. GUI Programming] - [PyQt6] QListWidget 활용한 GUI 구현[1/2] (코드 포함)
3. 코드 개선 - 2023.10.24 - [✔ Python/4. GUI Programming] - [PyQt6] QListWidget 활용한 GUI구현 [2/2] (코드 포함)
4. 테마 적용 - 2023.10.25 - [✔ Python/4. GUI Programming] - [PyQt6] GUI Stylesheet Theme 적용하기 : qt_material 

Reference

  1. 공부하는 박사곰 블로그 : https://studyingrabbit.tistory.com/70
  2. qt-material 2.14 : https://pypi.org/project/qt-material/
 

PyQt GUI (18) 괜찮은 테마 소개 : qt_material

PyQt에서는 별다른 스타일 설정을 하지 않으면, GUI는 회색 혹은 흰색의 색 조합으로 구성 됩니다. 위 이미지는 예전에 만들었던 계산기의 기본 UI 입니다. 흰색, 회색, 조금 더 진한 회색 등으로만

studyingrabbit.tistory.com

 

qt-material

Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6.

pypi.org


 

728x90
반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.