PySide6实现SVG图标颜色动态切换的方法问询

方法一：动态渲染SVG并指定颜色（最灵活） #

准备好内部元素使用fill="currentColor"的SVG文件，通过QSvgRenderer手动渲染图标并指定颜色，切换主题时重新生成图标即可：

from PySide6.QtSvg import QSvgRenderer
from PySide6.QtGui import QPixmap, QPainter, QColor, QIcon
from PySide6.QtCore import Qt

def render_svg(svg_path, color, icon_size):
    # 初始化SVG渲染器
    renderer = QSvgRenderer(svg_path)
    # 创建透明底的pixmap
    pixmap = QPixmap(icon_size)
    pixmap.fill(Qt.transparent)
    # 绘制并设置颜色
    painter = QPainter(pixmap)
    painter.setBrush(QBrush(color))
    painter.setPen(QPen(color))
    renderer.render(painter)
    painter.end()
    return QIcon(pixmap)

# 切换主题时调用
def switch_theme(is_dark):
    if is_dark:
        icon_color = QColor("#ffffff")
    else:
        icon_color = QColor("#333333")
    # 更新按钮图标
    self.menu_button.setIcon(render_svg("menu.svg", icon_color, QSize(24, 24)))

方法二：QSS结合自定义属性切换图标 #

如果不想写渲染逻辑，可以准备两套对应明暗模式的SVG（或同一SVG的不同颜色版本），通过自定义属性配合QSS切换：

1. 给按钮设置自定义属性：

# 初始化默认主题（浅色）
self.menu_button.setProperty("theme", "light")

2. 编写对应的QSS：

#menu_button[theme="light"] {
    qproperty-icon: url(icons/menu_light.svg);
}
#menu_button[theme="dark"] {
    qproperty-icon: url(icons/menu_dark.svg);
}

3. 切换主题时更新属性并刷新样式：

def switch_theme(is_dark):
    theme = "dark" if is_dark else "light"
    self.menu_button.setProperty("theme", theme)
    # 刷新样式使属性生效
    self.menu_button.style().unpolish(self.menu_button)
    self.menu_button.style().polish(self.menu_button)
    self.menu_button.update()

方法三：修改SVG内部CSS变量 #

在SVG中定义CSS变量，切换主题时动态替换变量值：

1. 修改SVG文件，使用CSS变量控制填充色：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
    <style>
        path { fill: var(--icon-color); }
    </style>
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>

2. 编写更新函数替换变量：

from PySide6.QtGui import QIcon, QPixmap, QImage
from PySide6.QtGui import QColor

def update_svg_icon(svg_path, color):
    with open(svg_path, "r", encoding="utf-8") as f:
        svg_content = f.read()
    # 替换CSS变量为目标颜色
    updated_content = svg_content.replace("--icon-color", color.name())
    # 转换为QIcon返回
    image = QImage.fromData(updated_content.encode())
    return QIcon(QPixmap.fromImage(image))

# 切换主题时调用
def switch_theme(is_dark):
    color = QColor("#ffffff") if is_dark else QColor("#333333")
    self.menu_button.setIcon(update_svg_icon("menu.svg", color))

关于原方法失效的原因 #

QSS中的color属性默认仅作用于控件的文本内容，不会自动传递给QIcon加载的SVG元素，即使SVG设置了fill="currentColor"也无法继承控件的颜色值，因此需要通过上述手动渲染、属性切换或修改SVG内容的方式实现动态变色。

内容的提问来源于stack exchange，提问作者max