""" 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)