Skip to content

CSS Theme

css_theme

Here the theming of the UI is specified.

Functions:

Attributes:

BACKGROUND_COLOR module-attribute 

BACKGROUND_COLOR = oklch_to_hex(0.276)

The main window background color.

BASE_COLOR module-attribute 

BASE_COLOR = oklch_to_hex(0.2175)

The base color for the settings panel.

BORDER_RADIUS module-attribute 

BORDER_RADIUS = 12

The border radius for panels.

BUTTON_RADIUS module-attribute 

BUTTON_RADIUS = 6

The border radius for buttons.

CHECKED_COLOR module-attribute 

CHECKED_COLOR = oklch_to_hex(0.24675)

The color of checked buttons.

HOVER_COLOR module-attribute 

HOVER_COLOR = oklch_to_hex(0.35)

The color for buttons when hovering.

HOVER_DURATION module-attribute 

HOVER_DURATION = 150

How long the hover animation takes.

LINEEDIT_COLOR module-attribute 

LINEEDIT_COLOR = oklch_to_hex(0.24675)

The color of line edit widgets.

MENU_COLOR module-attribute 

MENU_COLOR = oklch_to_hex(0.25)

The color of menus and combobox pop-ups.

OUTLINE_COLOR module-attribute 

OUTLINE_COLOR = oklch_to_hex(0.4)

The outline color for widgets.

PRESSED_COLOR module-attribute 

PRESSED_COLOR = oklch_to_hex(0.3)

The color of pressed buttons.

PRESS_DURATION module-attribute 

PRESS_DURATION = 75

How long the button press animation takes.

SCROLLBAR_HANDLE_COLOR module-attribute 

SCROLLBAR_HANDLE_COLOR = oklch_to_hex(0.3633)

The color of the scrollbar handle.

SCROLLBAR_HANDLE_HOVER module-attribute 

SCROLLBAR_HANDLE_HOVER = oklch_to_hex(0.4535)

The hover color of the scrollbar handle.

SCROLLBAR_HOVER_COLOR module-attribute 

SCROLLBAR_HOVER_COLOR = oklch_to_hex(0.24)

The hover color for a scrollbar.

SCROLLBAR_MARGIN module-attribute 

SCROLLBAR_MARGIN = 2

The margins of a scrollbar.

SCROLLBAR_THICKNESS module-attribute 

SCROLLBAR_THICKNESS = 11

The thickness of the scrollbar.

TEXT_PRIMARY module-attribute 

TEXT_PRIMARY = oklch_to_hex(0.9)

The primary text color.

TEXT_SECONDARY module-attribute 

TEXT_SECONDARY = oklch_to_hex(0.7)

The secondary text color.

THEME module-attribute 

THEME = f'\nQMainWindow > QWidget, QDialog > QWidget {{\n    background-color: {BACKGROUND_COLOR};\n    color: {TEXT_PRIMARY};\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\nMainWindow {{\n    background-color: {BACKGROUND_COLOR};\n}}\n\nMainWindow > QWidget {{\n    border-radius: 0px;\n}}\n\nQScrollArea {{\n    border-radius: {BORDER_RADIUS}px;\n}}\n\nQWidget {{\n    background-color: transparent;\n    color: {TEXT_PRIMARY};\n    border: none;\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\n/* Button */\nQPushButton, QComboBox, QToolButton {{\n    padding: 3px;\n}}\n\nQPushButton:hover, QComboBox:hover, QToolButton:hover {{\n    background-color: {HOVER_COLOR};\n}}\n\nQPushButton:pressed, QComboBox:pressed, QToolButton:pressed {{\n    background-color: {PRESSED_COLOR};\n}}\n\nQPushButton:disabled,\nQComboBox:disabled,\nQToolButton:disabled,\nAnimatedButton:disabled {{\n    color: {TEXT_SECONDARY};\n}}\n\n/* ComboBox */\nQComboBox QAbstractItemView {{\n    padding: 5px 5px;\n    outline: none;\n    background-color: {MENU_COLOR};\n    border-radius: {BORDER_RADIUS}px;\n}}\n\nQComboBox QAbstractItemView::item {{\n    background-color: transparent;\n    padding: 0px 4px;\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\nQComboBox QAbstractItemView::item:selected {{\n    background-color: {HOVER_COLOR};\n}}\n\nQComboBox::down-arrow {{\n    image: url("{BASE_DIR}/resources/down_arrow.svg");\n    border: none;\n    outline: none;\n    background: transparent;\n    width: 12px;\n    height: 12px;\n}}\n\nQComboBox::drop-down {{\n    border: none;\n}}\n\n/* Button icons */\n\n#plus {{\n    image: url("{BASE_DIR}/resources/plus.svg");\n}}\n#right {{\n    image: url("{BASE_DIR}/resources/right.svg");\n}}\n#left {{\n    image: url("{BASE_DIR}/resources/left.svg");\n}}\n#flip {{\n    image: url("{BASE_DIR}/resources/flip.svg");\n}}\n\n/* LineEdit */\nQLineEdit {{\n    background-color: {SCROLLBAR_HOVER_COLOR};\n    border-radius: {BUTTON_RADIUS}px;\n    padding: 2px;\n}}\n\nQLineEdit:hover {{\n    background-color: {HOVER_COLOR};\n}}\n\n/* CheckBox */\nQCheckBox::indicator {{\n    width: 18px;\n    height: 18px;\n    border-radius: 5px;\n}}\n\nQCheckBox::indicator:hover {{\n    background-color: {HOVER_COLOR};\n}}\n\nQCheckBox::indicator:pressed {{\n    background-color: {PRESSED_COLOR};\n}}\n\nQCheckBox::indicator:unchecked {{\n    image: url("{BASE_DIR}/resources/checkbox_unchecked.svg");\n}}\n\nQCheckBox::indicator:checked {{\n    image: url("{BASE_DIR}/resources/checkbox_checked.svg");\n}}\n\nQCheckBox::indicator:indeterminate {{\n    image: url("{BASE_DIR}/resources/checkbox_halfway.svg");\n}}\n\n/* MenuBar */\nQMenuBar {{\n    background: transparent;\n    spacing: 3px;\n}}\n\nQMenuBar::item {{\n    padding: 5px 7px;\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\nQMenuBar::item:selected {{\n    background-color: {HOVER_COLOR};\n}}\n\nQMenuBar::item:pressed {{\n    background-color: {PRESSED_COLOR};\n}}\n\nQMenu {{\n    background-color: {MENU_COLOR};\n    padding: 10px;\n    border: 1px solid {OUTLINE_COLOR};\n    border-radius: {BORDER_RADIUS}px;\n}}\n\n/* Menu */\nQMenu::item {{\n    padding: 5px 7px;\n}}\n\nQMenu::item:selected {{\n    background-color: {HOVER_COLOR};\n    border: none;\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\nQMenu::item:pressed {{\n    background-color: {PRESSED_COLOR};\n    border: none;\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\n/* ScrollBar */\nQScrollBar:vertical, QScrollBar:horizontal {{\n    background: transparent;\n    border: none;\n    height: {SCROLLBAR_THICKNESS}px;\n    width: {SCROLLBAR_THICKNESS}px;\n}}\n\nQScrollBar:vertical:hover, QScrollBar:horizontal:hover {{\n    background: {SCROLLBAR_HOVER_COLOR};\n}}\n\nQScrollBar::handle:vertical {{\n    background: {SCROLLBAR_HANDLE_COLOR};\n    border-radius: {(SCROLLBAR_THICKNESS - 2 * SCROLLBAR_MARGIN) // 2}px;\n    margin: {SCROLLBAR_MARGIN}px;\n    min-height: 20px;\n}}\n\nQScrollBar::handle:vertical:hover {{\n    background: {SCROLLBAR_HANDLE_HOVER};\n}}\n\nQScrollBar::handle:horizontal {{\n    background: {SCROLLBAR_HANDLE_COLOR};\n    border-radius: {(SCROLLBAR_THICKNESS - 2 * SCROLLBAR_MARGIN) // 2}px;\n    margin: {SCROLLBAR_MARGIN}px;\n    min-width: 20px;\n}}\n\nQScrollBar::handle:horizontal:hover {{\n    background: {SCROLLBAR_HANDLE_HOVER};\n}}\n\nQScrollBar::add-line:vertical,\nQScrollBar::sub-line:vertical,\nQScrollBar::add-line:horizontal,\nQScrollBar::sub-line:horizontal {{\n    background: none;\n    border: none;\n    width: 0;\n    height: 0;\n}}\n\n/* === Remove page areas (optional, keeps track clean) === */\nQScrollBar::add-page:vertical,\nQScrollBar::sub-page:vertical,\nQScrollBar::add-page:horizontal,\nQScrollBar::sub-page:horizontal {{\n    background: none;\n}}\n\n/* Progress bar */\nQProgressDialog {{\n    background-color: {BASE_COLOR}; color: {TEXT_PRIMARY};\n}}\n\nQProgressBar {{\n    border-radius: {BUTTON_RADIUS}px;\n    text-align: center;\n    background-color: {PRESSED_COLOR};\n    height: 16px;  /* thicker bar */\n    color: {TEXT_PRIMARY};\n}}\n\nQProgressBar::chunk {{\n    background-color: {OUTLINE_COLOR};\n    border-radius: {BUTTON_RADIUS}px;\n}}\n\n#scroll {{\n    background-color: {BASE_COLOR};\n    border-radius: {BORDER_RADIUS}px;\n}}\n\nQFileDialog {{\n    background-color: {BACKGROUND_COLOR};\n}}\n'

The main style sheet.

oklch_to_hex 

oklch_to_hex(luminance: float, c=0.0, h=0.0) -> str

Convert from OkLch to hex with.