PYQT5 스타일시트 적용

 

 

pyqt5로 기본으로 생성하는 ui창은 생각보다 밋밋하기에 스타일시트를 적용하는데

웹에서 html을 꾸미는 파일이 css 라면 pyqt5에서 꾸미는 파일은 qss를 이용한다.

 

스타일 시트 적용 방법

스타일 시트를 적용시키는 방법은 다음과 같으며

ui를 생성하고 있는 pyqt5 위젯(QWidget) 혹은 윈도우(QMainWindow) 내부에 다음과 같이 써주면 된다.

qss_file = QFile('stylesheet.qss')
qss_file.open(QFile.ReadOnly | QFile.Text)
qss_stream = QTextStream(qss_file)
self.setStyleSheet(qss_stream.readAll())
qss_file.close()

 

뭐 보면 스타일시트를 QFile이라는 객체로 열어주고 setStyleSheet로 적용 후 닫아주는 모습이다.

아래와 같이 따로 함수로 분리해서 쉽게 나타내 줄 수도 있다.

self.load_stylesheet("stylesheet.qss")

 

실행 코드 - main.py

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
from PyQt5.QtCore import QFile, QTextStream
from PyQt5.QtGui import QIcon

class MyApp(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        layout = QVBoxLayout()

        button = QPushButton('Styled Button', self)
        icon = QIcon('google.png')
        button.setIcon(icon)
        layout.addWidget(button)

        self.setLayout(layout)
        self.setWindowTitle('QSS Styled Button')
        self.setGeometry(300, 300, 300, 200)
        self.load_stylesheet()

    def load_stylesheet(self):
        # stylesheet.qss 파일 로드
        qss_file = QFile('stylesheet.qss')
        qss_file.open(QFile.ReadOnly | QFile.Text)
        qss_stream = QTextStream(qss_file)
        self.setStyleSheet(qss_stream.readAll())
        qss_file.close()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MyApp()
    ex.show()
    sys.exit(app.exec_())

 

스타일 시트 - stylesheet.qss

/* stylesheet.qss */
QPushButton {
    background-color: #4CAF50; /* Green */
    border-radius: 2px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

QPushButton:hover {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
}

 

여기다 주 경로에 구글 아이콘을 넣었다.

사이트 아이콘을 쉽게 추출하려면 다음 명령어를 인터넷 창에 입력함으로써 추출 가능하다.

http://www.google.com/s2/favicons?domain=[추출하고싶은 사이트]

 

스타일 시트 적용 전

스타일 시트 적용 후

버튼위에 마우스 x

버튼 위에 마우스 o