Cluster/config/theme.py
2025-07-17 17:04:56 +08:00

262 lines
7.1 KiB
Python

"""
Theme and styling configuration for the Cluster4NPU UI application.
This module contains the complete QSS (Qt Style Sheets) theme definitions and color
constants used throughout the application. It provides a harmonious dark theme with
complementary color palette optimized for professional ML pipeline development.
Main Components:
- HARMONIOUS_THEME_STYLESHEET: Complete QSS dark theme definition
- Color constants and theme utilities
- Consistent styling for all UI components
Usage:
from cluster4npu_ui.config.theme import HARMONIOUS_THEME_STYLESHEET
app.setStyleSheet(HARMONIOUS_THEME_STYLESHEET)
"""
# Harmonious theme with complementary color palette
HARMONIOUS_THEME_STYLESHEET = """
QWidget {
background-color: #1e1e2e;
color: #cdd6f4;
font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
font-size: 13px;
}
QMainWindow {
background-color: #181825;
}
QDialog {
background-color: #1e1e2e;
border: 1px solid #313244;
}
QLabel {
color: #f9e2af;
font-weight: 500;
}
QLineEdit, QTextEdit, QSpinBox, QDoubleSpinBox, QComboBox {
background-color: #313244;
border: 2px solid #45475a;
padding: 8px 12px;
border-radius: 8px;
color: #cdd6f4;
selection-background-color: #74c7ec;
font-size: 13px;
}
QLineEdit:focus, QTextEdit:focus, QSpinBox:focus, QDoubleSpinBox:focus, QComboBox:focus {
border-color: #89b4fa;
background-color: #383a59;
outline: none;
}
QLineEdit:hover, QTextEdit:hover, QSpinBox:hover, QDoubleSpinBox:hover, QComboBox:hover {
border-color: #585b70;
}
QPushButton {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
color: #1e1e2e;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
min-height: 16px;
}
QPushButton:hover {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #a6c8ff, stop:1 #89dceb);
}
QPushButton:pressed {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #7287fd, stop:1 #5fb3d3);
}
QPushButton:disabled {
background-color: #45475a;
color: #6c7086;
}
QDialogButtonBox QPushButton {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
color: #1e1e2e;
min-width: 90px;
margin: 2px;
}
QDialogButtonBox QPushButton:hover {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #a6c8ff, stop:1 #89dceb);
}
QDialogButtonBox QPushButton[text="Cancel"] {
background-color: #585b70;
color: #cdd6f4;
border: 1px solid #6c7086;
}
QDialogButtonBox QPushButton[text="Cancel"]:hover {
background-color: #6c7086;
}
QListWidget {
background-color: #313244;
border: 2px solid #45475a;
border-radius: 8px;
outline: none;
}
QListWidget::item {
padding: 12px;
border-bottom: 1px solid #45475a;
color: #cdd6f4;
border-radius: 4px;
margin: 2px;
}
QListWidget::item:selected {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
color: #1e1e2e;
border-radius: 6px;
}
QListWidget::item:hover {
background-color: #383a59;
border-radius: 6px;
}
QSplitter::handle {
background-color: #45475a;
width: 3px;
height: 3px;
}
QSplitter::handle:hover {
background-color: #89b4fa;
}
QCheckBox {
color: #cdd6f4;
spacing: 8px;
}
QCheckBox::indicator {
width: 18px;
height: 18px;
border: 2px solid #45475a;
border-radius: 4px;
background-color: #313244;
}
QCheckBox::indicator:checked {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
border-color: #89b4fa;
}
QCheckBox::indicator:hover {
border-color: #89b4fa;
}
QScrollArea {
border: none;
background-color: #1e1e2e;
}
QScrollBar:vertical {
background-color: #313244;
width: 14px;
border-radius: 7px;
margin: 0px;
}
QScrollBar::handle:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
border-radius: 7px;
min-height: 20px;
margin: 2px;
}
QScrollBar::handle:vertical:hover {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #a6c8ff, stop:1 #89dceb);
}
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
border: none;
background: none;
height: 0px;
}
QMenuBar {
background-color: #181825;
color: #cdd6f4;
border-bottom: 1px solid #313244;
padding: 4px;
}
QMenuBar::item {
padding: 8px 12px;
background-color: transparent;
border-radius: 6px;
}
QMenuBar::item:selected {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
color: #1e1e2e;
}
QMenu {
background-color: #313244;
color: #cdd6f4;
border: 1px solid #45475a;
border-radius: 8px;
padding: 4px;
}
QMenu::item {
padding: 8px 16px;
border-radius: 4px;
}
QMenu::item:selected {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
color: #1e1e2e;
}
QComboBox::drop-down {
border: none;
width: 30px;
border-radius: 4px;
}
QComboBox::down-arrow {
image: none;
border: 5px solid transparent;
border-top: 6px solid #cdd6f4;
margin-right: 8px;
}
QFormLayout QLabel {
font-weight: 600;
margin-bottom: 4px;
color: #f9e2af;
}
QTextEdit {
line-height: 1.4;
}
/* Custom accent colors for different UI states */
.success {
color: #a6e3a1;
}
.warning {
color: #f9e2af;
}
.error {
color: #f38ba8;
}
.info {
color: #89b4fa;
}
"""
# Color constants for programmatic use
class Colors:
"""Color constants used throughout the application."""
# Background colors
BACKGROUND_MAIN = "#1e1e2e"
BACKGROUND_WINDOW = "#181825"
BACKGROUND_WIDGET = "#313244"
BACKGROUND_HOVER = "#383a59"
# Text colors
TEXT_PRIMARY = "#cdd6f4"
TEXT_SECONDARY = "#f9e2af"
TEXT_DISABLED = "#6c7086"
# Accent colors
ACCENT_PRIMARY = "#89b4fa"
ACCENT_SECONDARY = "#74c7ec"
ACCENT_HOVER = "#a6c8ff"
# State colors
SUCCESS = "#a6e3a1"
WARNING = "#f9e2af"
ERROR = "#f38ba8"
INFO = "#89b4fa"
# Border colors
BORDER_NORMAL = "#45475a"
BORDER_HOVER = "#585b70"
BORDER_FOCUS = "#89b4fa"
def apply_theme(app):
"""Apply the harmonious theme to the application."""
app.setStyleSheet(HARMONIOUS_THEME_STYLESHEET)