Python GUIs - qprogressbar

Change color in QProgressBar delegate — How to dynamically change QProgressBar colors in a QTableView delegate

2021-03-24T09:00:00+00:00

How can I change the color of a QProgressBar delegate in a QTableView when a process starts or stops? I'm using a delegate to show an indeterminate progress bar (with setRange(0, 0)), and I want it to be green when running and red when stopped, but replacing the delegate doesn't seem to redraw the color.

The issue here comes from how delegates and persistent editors interact. When you call openPersistentEditor, Qt creates the editor widget and keeps it alive. Replacing the delegate on a row doesn't automatically close and recreate those existing editors — so even though you're assigning a new ProgressBarDelegate with a different color, the old progress bar widget is still sitting there unchanged.

The solution is to store the color information in the model data and have a single delegate read that color when it creates or updates the editor. This way, when the data changes, the delegate can update the editor's stylesheet accordingly.

Let's walk through how to set this up properly.

Store state in the model, not the delegate

Rather than creating a new delegate every time a button is clicked, store the running/stopped state in the model itself. You can use a custom Qt.ItemDataRole (or just Qt.UserRole) to hold the color or state for each row. The delegate then reads this value when painting or configuring the editor.

This keeps your architecture clean: the model holds the data, and the delegate is responsible only for presentation.

Use `setEditorData` to update the progress bar

The setEditorData method on your delegate is called whenever the model data changes for an index that has a persistent editor. This is where you update the progress bar's stylesheet based on the current state.

Here's how to write a ProgressBarDelegate that reads a color from the model:

python

class ProgressBarDelegate(QtWidgets.QStyledItemDelegate):
    def paint(self, painter, option, index):
        if index.column() == 2:
            if (
                isinstance(self.parent(), QtWidgets.QAbstractItemView)
                and self.parent().model() is index.model()
            ):
                self.parent().openPersistentEditor(index)
        QtWidgets.QStyledItemDelegate.paint(self, painter, option, index)

    def createEditor(self, parent, option, index):
        editor = QtWidgets.QProgressBar(parent)
        editor.setRange(0, 0)
        editor.setTextVisible(False)
        return editor

    def setEditorData(self, editor, index):
        color = index.data(QtCore.Qt.ItemDataRole.UserRole)
        if color:
            editor.setStyleSheet(
                f"QProgressBar::chunk {{background-color: {color}; "
                f"width: 20px; margin: 0.5px;}}"
            )

    def updateEditorGeometry(self, editor, option, index):
        editor.setGeometry(option.rect)

The delegate no longer stores any color itself. Instead, setEditorData looks up the color from Qt.UserRole on the model index and applies it to the stylesheet. Every time you call setData on the model with Qt.UserRole, Qt will automatically call setEditorData on the persistent editor for that index.

Update the model when the button is clicked

In your button click handler, instead of creating a new delegate, just update the model data:

python

def on_button_clicked(self, index):
    model = self.table_view.model()
    progress_index = model.index(index.row(), 2)

    current_state = progress_index.data(QtCore.Qt.ItemDataRole.DisplayRole)

    if current_state is None or current_state == 0:
        model.setData(progress_index, "green", QtCore.Qt.ItemDataRole.UserRole)
        model.setData(progress_index, 1, QtCore.Qt.ItemDataRole.DisplayRole)
    else:
        model.setData(progress_index, "red", QtCore.Qt.ItemDataRole.UserRole)
        model.setData(progress_index, 0, QtCore.Qt.ItemDataRole.DisplayRole)

The DisplayRole tracks the state (1 for running, 0 for stopped), and UserRole holds the color string. When setData is called, the model emits dataChanged, which triggers setEditorData on the persistent editor — and the progress bar updates its color.

Complete working example

Here's the full example putting everything together. The QTableView shows a list of paths, each with a Start/Stop button and an indeterminate progress bar. Clicking the button toggles the progress bar between green and red using a single delegate that reads color from the model.

python

import sys

from PySide6 import QtCore, QtGui, QtWidgets


class ProgressBarDelegate(QtWidgets.QStyledItemDelegate):
    def paint(self, painter, option, index):
        if index.column() == 2:
            if (
                isinstance(self.parent(), QtWidgets.QAbstractItemView)
                and self.parent().model() is index.model()
            ):
                self.parent().openPersistentEditor(index)
        QtWidgets.QStyledItemDelegate.paint(self, painter, option, index)

    def createEditor(self, parent, option, index):
        editor = QtWidgets.QProgressBar(parent)
        editor.setRange(0, 0)
        editor.setTextVisible(False)
        return editor

    def setEditorData(self, editor, index):
        color = index.data(QtCore.Qt.ItemDataRole.UserRole)
        if color:
            editor.setStyleSheet(
                f"QProgressBar::chunk {{background-color: {color}; "
                f"width: 20px; margin: 0.5px;}}"
            )

    def updateEditorGeometry(self, editor, option, index):
        editor.setGeometry(option.rect)


class PushButtonDelegate(QtWidgets.QStyledItemDelegate):
    clicked = QtCore.Signal(QtCore.QModelIndex)

    def paint(self, painter, option, index):
        if (
            isinstance(self.parent(), QtWidgets.QAbstractItemView)
            and self.parent().model() is index.model()
        ):
            self.parent().openPersistentEditor(index)
        QtWidgets.QStyledItemDelegate.paint(self, painter, option, index)

    def createEditor(self, parent, option, index):
        button = QtWidgets.QPushButton(parent)
        button.clicked.connect(lambda *args, ix=index: self.clicked.emit(ix))
        return button

    def setEditorData(self, editor, index):
        editor.setText("Start/Stop")

    def updateEditorGeometry(self, editor, option, index):
        editor.setGeometry(option.rect)


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setFixedSize(600, 300)

        self.table_view = QtWidgets.QTableView()
        layout = QtWidgets.QHBoxLayout()
        layout.addWidget(self.table_view)
        cw = QtWidgets.QWidget()
        cw.setLayout(layout)
        self.setCentralWidget(cw)

        self.init_model()

        self.button_delegate.clicked.connect(self.on_button_clicked)

    def init_model(self):
        headers = ["Path", "Control", "Progress"]

        self.button_delegate = PushButtonDelegate(self.table_view)
        self.progress_delegate = ProgressBarDelegate(self.table_view)

        self.model = QtGui.QStandardItemModel()
        self.model.setHorizontalHeaderLabels(headers)

        for row in range(5):
            self.model.setItem(
                row, 0, QtGui.QStandardItem(f"some_path{row}")
            )
            self.model.setItem(row, 1, QtGui.QStandardItem())
            self.model.setItem(row, 2, QtGui.QStandardItem())

        self.table_view.setModel(self.model)
        self.table_view.setItemDelegateForColumn(1, self.button_delegate)
        self.table_view.setItemDelegateForColumn(2, self.progress_delegate)
        self.table_view.resizeColumnsToContents()
        self.table_view.horizontalHeader().setSectionResizeMode(
            QtWidgets.QHeaderView.ResizeMode.Stretch
        )

    def on_button_clicked(self, index):
        model = self.table_view.model()
        progress_index = model.index(index.row(), 2)

        current_state = progress_index.data(QtCore.Qt.ItemDataRole.DisplayRole)

        if current_state is None or current_state == 0:
            model.setData(
                progress_index, "green", QtCore.Qt.ItemDataRole.UserRole
            )
            model.setData(
                progress_index, 1, QtCore.Qt.ItemDataRole.DisplayRole
            )
        else:
            model.setData(
                progress_index, "red", QtCore.Qt.ItemDataRole.UserRole
            )
            model.setData(
                progress_index, 0, QtCore.Qt.ItemDataRole.DisplayRole
            )


if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

When you run this, each row has a "Start/Stop" button. Clicking it the first time turns the progress bar green (running). Clicking again turns it red (stopped). Each subsequent click toggles between the two states.

For an in-depth guide to building Python GUIs with PySide6 see my book, Create GUI Applications with Python & Qt6.

Change the color of the ProgressBar indicator text when it exceeds 50%

2020-07-21T09:00:00+00:00

How can I change the text color from black to white of the percentage indicator inside the QProgressBar when it exceeds the value of 50?

When a QProgressBar fills past the halfway mark, the dark-colored chunk behind the text can make the default black percentage label hard to read. A common solution is to switch the text color to white once the value crosses 50%. Let's walk through how to do this in PyQt5 using stylesheets and a signal connection.

Why the text becomes hard to read

By default, QProgressBar draws its percentage text on top of the bar. When the colored "chunk" is small, the text sits against a light background and black text is fine. As the chunk grows and fills most of the bar, the text ends up on top of a dark background — and black-on-dark is difficult to see.

The fix is straightforward: watch for value changes and update the stylesheet to swap the text color at the right moment.

Styling the `QProgressBar` text

The text color on a QProgressBar is controlled by the color property on the QProgressBar selector itself — not on QProgressBar::chunk. The ::chunk sub-control only styles the filled portion of the bar (its background color, border, etc.), while color on QProgressBar sets the text color.

Here's a quick example of setting the text to white:

python

self.progress_bar.setStyleSheet("QProgressBar { color: white; }")

And setting it back to black:

python

self.progress_bar.setStyleSheet("QProgressBar { color: black; }")

Responding to value changes

QProgressBar emits a valueChanged signal every time its value updates. You can connect a slot to this signal that checks the current value and applies the appropriate stylesheet.

python

self.progress_bar.valueChanged.connect(self.update_progress_text_color)

Then define the slot:

python

def update_progress_text_color(self, value):
    if value > 50:
        self.progress_bar.setStyleSheet("""
            QProgressBar {
                color: white;
            }
        """)
    else:
        self.progress_bar.setStyleSheet("""
            QProgressBar {
                color: black;
            }
        """)

Each time the value changes, this method checks whether it's above 50 and sets the text color accordingly.

Preserving other styles

If you already have a stylesheet on your progress bar (for example, customizing the chunk color or the bar's border), you'll want to include those properties in both branches so they aren't lost when the stylesheet is replaced. Every call to setStyleSheet() replaces the previous stylesheet entirely.

For example:

python

BASE_STYLE = """
    QProgressBar {
        border: 1px solid grey;
        border-radius: 5px;
        text-align: center;
    }
    QProgressBar::chunk {
        background-color: #4CAF50;
        border-radius: 5px;
    }
"""

def update_progress_text_color(self, value):
    if value > 50:
        color_style = "QProgressBar { color: white; }"
    else:
        color_style = "QProgressBar { color: black; }"

    self.progress_bar.setStyleSheet(BASE_STYLE + color_style)

Because the color_style rule comes after BASE_STYLE, it overrides the text color while keeping everything else intact.

Complete working example

Here's a full PyQt5 application you can copy and run. It uses a QTimer to increment the progress bar automatically so you can see the text color flip from black to white as the bar crosses 50%.

python

import sys
from PyQt5.QtWidgets import (
    QApplication, QWidget, QVBoxLayout, QProgressBar, QPushButton,
)
from PyQt5.QtCore import QTimer


BASE_STYLE = """
    QProgressBar {
        border: 1px solid grey;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
    }
    QProgressBar::chunk {
        background-color: #3874f2;
        border-radius: 5px;
    }
"""


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QProgressBar Text Color Demo")
        self.resize(400, 120)

        layout = QVBoxLayout()
        self.setLayout(layout)

        self.progress_bar = QProgressBar()
        self.progress_bar.setMinimum(0)
        self.progress_bar.setMaximum(100)
        self.progress_bar.setValue(0)
        self.progress_bar.setStyleSheet(BASE_STYLE + "QProgressBar { color: black; }")
        layout.addWidget(self.progress_bar)

        self.start_button = QPushButton("Start")
        self.start_button.clicked.connect(self.start_progress)
        layout.addWidget(self.start_button)

        self.progress_bar.valueChanged.connect(self.update_progress_text_color)

        self.timer = QTimer()
        self.timer.timeout.connect(self.advance_progress)

    def start_progress(self):
        self.progress_bar.setValue(0)
        self.timer.start(50)

    def advance_progress(self):
        current = self.progress_bar.value()
        if current >= 100:
            self.timer.stop()
            return
        self.progress_bar.setValue(current + 1)

    def update_progress_text_color(self, value):
        if value > 50:
            color_style = "QProgressBar { color: white; }"
        else:
            color_style = "QProgressBar { color: black; }"

        self.progress_bar.setStyleSheet(BASE_STYLE + color_style)


app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())

When you run this, click Start and watch the percentage label. While the bar is at 50% or below, the text is black. The moment it passes 50%, the text switches to white, keeping it readable against the blue chunk.

You can adjust the threshold, the colors, or even add a gradual transition by checking at multiple thresholds — the same pattern applies. Connect to valueChanged, check the value, and set the stylesheet accordingly.

For an in-depth guide to building Python GUIs with PyQt5 see my book, Create GUI Applications with Python & Qt5.

Python GUIs - qprogressbar

Change color in QProgressBar delegate — How to dynamically change QProgressBar colors in a QTableView delegate

Store state in the model, not the delegate

Use setEditorData to update the progress bar

Update the model when the button is clicked

Complete working example

Change the color of the ProgressBar indicator text when it exceeds 50%

Why the text becomes hard to read

Styling the QProgressBar text

Responding to value changes

Preserving other styles

Complete working example

Use `setEditorData` to update the progress bar

Styling the `QProgressBar` text