[Bug] Provider icons not compatible with dark mode

[xxynet]

Description

When dark mode is enabled, icons in provider tab are still black:

Reproduction Steps

1. Open AstrBot WebUI
2. Open provider tab

AstrBot Version

v4.27.2

Operating System

Linux

Deployment Method

Docker

Message Platform Adapter

Not related

Error Log

No error logs

Supplementary Information

No response

Checklist

• I have searched the Issue list for related issues and could not resolve the problem, or this issue has never been reported before.
• I have tried disabling all plugins to rule out issues caused by plugins.
• The issue I am reporting is related to AstrBot itself, not to a specific plugin.
• I have read and agree to the project's Code of Conduct.
• (Optional) I am willing to submit a PR to help fix this issue.

[dosubot]

Hi @xxynet! I'm Dosu and I'm helping the AstrBotTeam team.

根据代码分析，问题出在以下几处：

1. AddNewProvider.vue — 添加提供商对话框中的图标

provider-logo-img 类直接使用 <img> 渲染 getProviderIcon() 返回的 SVG URL，没有任何暗色模式适配 [1]。样式仅定义了尺寸和透明度，无 filter 处理 [2]。

2. ItemCard.vue — Provider 列表卡片背景图标

ProviderPage.vue 通过 :bglogo="getProviderIcon(provider.provider)" 将图标传给 ItemCard.vue [3]，后者以 opacity: 0.2 渲染于卡片右下角 [4]，同样无暗色适配。

3. ProviderSourcesPanel.vue — 侧栏 source 列表图标

侧栏中的 provider source 图标也通过 resolveSourceIcon 以 <v-img> 渲染，同样未做暗色处理 [5]。

根本原因：getProviderIcon() 返回的许多 SVG（如 openai.svg、anthropic.svg、xai.svg 等）是纯黑色设计，在暗色背景上不可见 [6]。而带 -color 后缀的图标（如 gemini-color.svg、dify-color.svg）是彩色的，不受影响。

修复建议：最快的方案是在暗色模式下对黑白图标添加 CSS filter: invert(1)，例如：

.provider-logo-img {
  filter: var(--provider-logo-filter, none);
}

:global(.v-theme--dark) .provider-logo-img {
  --provider-logo-filter: invert(1);
}

但需要注意彩色图标（带 -color 后缀）反转后颜色会失真，需要排除。更精准的做法是在 providerUtils.js 中区分黑白和彩色图标，渲染时对黑白图标动态添加 invert class。如果你提交 PR，这两种方案都可以考虑。

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.