2. Home
  4. Docs
  6. QT
  8. Genel
  10. QSS (Qt Style Sheets) ile Modern Karanlık Arayüz (Dark Mode) Tasarımı

QSS (Qt Style Sheets) ile Modern Karanlık Arayüz (Dark Mode) Tasarımı

Print

Standart bir Qt Widgets uygulaması varsayılan olarak işletim sisteminin yerel (genellikle açık gri veya beyaz) sistem paletini kullanır. Ancak günümüz modern yazılımlarında kullanıcıların göz yorgunluğunu azaltan ve estetik bir çekicilik sunan koyu temalar standart bir beklentidir. Web geliştirmedeki CSS mantığını C++ masaüstü dünyasına taşıyan Qt Style Sheets karanlık tema mimarisi (QSS), tek bir stil dosyası ile tüm uygulamanın görsel kimliğini baştan yaratmanızı sağlar.

Bu rehberde; QSS sözdizimi temellerini, sözde sınıfları (Pseudo-states: :hover, :pressed, :disabled), alt denetimleri (Sub-controls), özelleştirilmiş kaydırma çubukları (QScrollBar) ve üretime hazır kapsamlı bir Dark Theme stil şablonunu inceleyeceğiz.

QSS Nasıl Çalışır ve Nasıl Uygulanır?

Qt Style Sheets, W3C CSS2 spesifikasyonundan esinlenerek tasarlanmıştır. Belirli bir widget tipini (örneğin QPushButton), belirli bir nesne adını (ID: #mySpecialButton) veya tüm uygulamayı hedef alabilirsiniz.

Stili Uygulamanın En Temiz Yolu: QFile Üzerinden Yükleme

Stil kodlarını C++ içine string olarak gömmek yerine ayrı bir .qss dosyasında tutmak ve Qt Kaynak Sistemi (.qrc) veya harici dosya üzerinden qApp seviyesinde yüklemek en iyi mimaridir:

#include <QApplication>
#include <QFile>
#include <QTextStream>

void applyDarkTheme(QApplication &app) {
    QFile file(":/styles/dark_theme.qss");
    if (file.open(QFile::ReadOnly | QFile::Text)) {
        QTextStream stream(&file);
        app.setStyleSheet(stream.readAll());
        file.close();
    }
}

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    applyDarkTheme(app);
    // ...
    return app.exec();
}

QSS Sözdiziminin Anatomisi

/* Seçici (Selector) */
QPushButton {
    background-color: #2b2b2b;
    color: #ffffff;
    border: 1px solid #3f3f3f;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
}

/* Durum Durumları (Pseudo-states) */
QPushButton:hover {
    background-color: #383838;
    border-color: #007acc; /* Vurgu mavisi */
}

QPushButton:pressed {
    background-color: #1f1f1f;
}

QPushButton:disabled {
    background-color: #202020;
    color: #666666;
    border-color: #2a2a2a;
}

Üretime Hazır Modern Koyu Tema Şablonu (dark_theme.qss)

Aşağıdaki stil şablonu, genel pencerelerden tablolara, giriş alanlarından kaydırma çubuklarına kadar eksiksiz bir uyum sağlar:

/* --- GENEL PENCERE VE ARKA PLAN --- */
QWidget {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: "Segoe UI", "Inter", Arial, sans-serif;
    font-size: 13px;
    selection-background-color: #0e639c;
    selection-color: #ffffff;
}

/* --- GİRİŞ ALANLARI (QLineEdit, QTextEdit) --- */
QLineEdit, QTextEdit, QPlainTextEdit, QSpinBox, QDoubleSpinBox {
    background-color: #252526;
    color: #cccccc;
    border: 1px solid #3c3c3c;
    border-radius: 3px;
    padding: 5px;
}

QLineEdit:focus, QTextEdit:focus, QPlainTextEdit:focus {
    border: 1px solid #007acc;
}

/* --- AÇILIR KUTU (QComboBox) --- */
QComboBox {
    background-color: #252526;
    border: 1px solid #3c3c3c;
    border-radius: 3px;
    padding: 4px 10px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
    border-left: 1px solid #3c3c3c;
}

QComboBox QAbstractItemView {
    background-color: #252526;
    border: 1px solid #3c3c3c;
    selection-background-color: #094771;
}

/* --- TABLO VE LİSTELER (QTableView, QListView, QTreeView) --- */
QTableView, QListView, QTreeView {
    background-color: #252526;
    border: 1px solid #333333;
    gridline-color: #2d2d2d;
    alternate-background-color: #1f1f1f;
}

QHeaderView::section {
    background-color: #2d2d2d;
    color: #cccccc;
    padding: 5px;
    border: 1px solid #1e1e1e;
    font-weight: bold;
}

/* --- KAYDIRMA ÇUBUĞU (QScrollBar) - Modern ve İnce Tasarım --- */
QScrollBar:vertical {
    background-color: #1e1e1e;
    width: 10px;
    margin: 0px;
}

QScrollBar::handle:vertical {
    background-color: #424242;
    min-height: 25px;
    border-radius: 5px;
}

QScrollBar::handle:vertical:hover {
    background-color: #4f4f4f;
}

QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
    height: 0px;
}

QScrollBar:horizontal {
    background-color: #1e1e1e;
    height: 10px;
}

QScrollBar::handle:horizontal {
    background-color: #424242;
    min-width: 25px;
    border-radius: 5px;
}

/* --- TAB (QTabWidget) --- */
QTabWidget::pane {
    border: 1px solid #333333;
    background-color: #1e1e1e;
}

QTabBar::tab {
    background-color: #2d2d2d;
    color: #969696;
    padding: 8px 16px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-right: 2px;
}

QTabBar::tab:selected {
    background-color: #1e1e1e;
    color: #ffffff;
    border-bottom: 2px solid #007acc;
}

QTabBar::tab:hover:!selected {
    background-color: #383838;
}

Dinamik Tema Değiştirme (Açık / Koyu Geçişi)

Kullanıcının menüden çalışma anında açık veya koyu tema seçebilmesi için qApp->setStyleSheet("") çağrısı yeterlidir:

void onThemeChanged(bool isDarkMode) {
    if (isDarkMode) {
        applyDarkTheme(*qApp);
    } else {
        // Boş string vermek sistemi varsayılan yerel temaya döndürür
        qApp->setStyleSheet("");
    }
}

Bu tercihi QSettings rehberimizde incelediğimiz gibi kalıcı olarak kaydedebilirsiniz:

QSettings settings("MyCompany", "SerialMonitorApp");
settings.setValue("ui/dark_mode", isDarkMode);

Özet

Qt Style Sheets (QSS), platform kısıtlamalarına takılmadan profesyonel, modern ve göz alıcı arayüzler tasarlamanın en hızlı yoludur. CSS benzeri sözdizimi ile butonlar, tablolar ve kaydırma çubukları üzerinde tam denetim kurarak masaüstü yazılımlarınızı yeni nesil karanlık temalarla donatabilirsiniz.

Tags , , , , ,

How can we help?