[Python] PyQt6 QSS Style Sheet with Embedded SVG

I am working on putting together a QSS Stylesheet template that I can use for all of my PyQt6 applications. When I use the stylesheet to modify the style of a QComboBox, I lose the down arrow. It's my understanding that if I style one part of the combo box, I have to style the whole combo box, which isn't a problem.

In my stylesheet template, I use flags like background-color: @widget-background;. I then have a separate files for each color theme (i.e. light & dark) with a corresponding entry of @widget-background = #777777 for a light gray color. At runtime I simply read in the template as a sting and perform a replace for each of the color tags. This works awesome and makes it easy to add color themes without recreating the entire stylesheet.

Where I am having my problem is with the down-arrow sub-element of the QComboBox. I know that I can supply a PNG or SVG image in the stylesheet, which works reasonably well. But, it's not as elegant as I would like. First of all, I have to create a separate image file for each color theme. Second, I have to open the SVG file as a text file and manually change the colors (Yes, I know I could automate this). So, what I would like to do is embed the SVG content into the stylesheet directly. It's my understanding that this is possible and I have found an example on StackOverflow (Inline SVG in CSS).

Based on that solution, I've put together the following basic application with a single QComboBox with it's stylesheet applied.

import sys
from PyQt6.QtWidgets import QApplication, QComboBox, QVBoxLayout, QWidget

class ComboBoxTest(QWidget):
def __init__(self):
super().__init__()
self.init_ui()

def init_ui(self):
# Create a QComboBox
combo_box = QComboBox(self)
combo_box.addItems(["Option 1", "Option 2", "Option 3"])

# Minimal stylesheet with embedded SVG for down arrow
combo_box.setStyleSheet("""
QComboBox {
background-color: #f0f0f0;
color: #000000;
border: 1px solid #0078d4;
border-radius: 4px;
padding: 2px;
}
QComboBox::drop-down {
background-color: #dcdcdc;
border: none;
width: 20px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
QComboBox::down-arrow {
image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path style='fill:%23dddddd;stroke:%23ff0000;' d='M 1,4 15,4 8,12 Z'/></svg>");
}
""")

# Layout to hold the combo box
layout = QVBoxLayout(self)
layout.addWidget(combo_box)

self.setLayout(layout)
self.setWindowTitle('QComboBox SVG Test')
self.resize(300, 100)

def main():
app = QApplication(sys.argv)
window = ComboBoxTest()
window.show()
sys.exit(app.exec())

if __name__ == "__main__":
main()


When I run this using Python 3.11 and PyQt6, the arrow doesn't show up. Do you see anything wrong? Does this code work properly for you? Do you have any other ideas of how I can go about this, preferably entirely in my stylesheet?

I appreciate any help you can give me.

Continue reading...