Embed SVG in a style sheet

q&a
1

I am working on putting together a QSS Stylesheet template that I can use for all of my 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 online.

Based on what I’ve seen, 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?

Thanks for taking the time to read this. I appreciate any help you can give me.