fix: adapt provider icons to dark mode

[xxynet]

Fixes #9645.

Provider icons rendered as external SVG images cannot inherit the dashboard's
theme color. This made monochrome provider icons hard to see in dark mode.

Modifications / 改动点

• Added a provider icon classification for icons that require dark-mode inversion.

• Applied the inversion only to classified provider icons in the provider source
  list, add-provider dialog, and provider cards.

• Kept color provider icons unchanged.

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Improve dark-mode support for monochrome provider icons across the dashboard.

New Features:

• Classify provider icons that require dark-mode inversion via a dedicated utility helper.

Enhancements:

• Apply conditional inversion styling to monochrome provider icons in add-provider dialogs, provider source lists, and provider cards without affecting colored icons.
• Propagate monochrome icon metadata through provider source composables and shared card components for consistent theming behavior in dark mode.

[sourcery-ai]

Hey - I've found 2 issues, and left some high level feedback:

• The .provider-icon--monochrome dark-theme filter is duplicated across multiple components; consider moving the selector to a shared stylesheet or global theme file to keep the styling defined in one place.
• The hard-coded list of monochrome provider types in isMonochromeProviderIcon may be brittle as new providers are added; consider deriving this flag from provider template metadata instead of maintaining a static list in the utility.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `.provider-icon--monochrome` dark-theme filter is duplicated across multiple components; consider moving the selector to a shared stylesheet or global theme file to keep the styling defined in one place.
- The hard-coded list of monochrome provider types in `isMonochromeProviderIcon` may be brittle as new providers are added; consider deriving this flag from provider template metadata instead of maintaining a static list in the utility.

## Individual Comments

### Comment 1
<location path="dashboard/src/components/provider/AddNewProvider.vue" line_range="236-237" />
<code_context>
     object-fit: contain;
 }

+:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
+    filter: brightness(0) invert(1);
+}
+
</code_context>
<issue_to_address>
**suggestion:** The same `.provider-icon--monochrome` dark-theme rule is duplicated in multiple components; consider centralizing it.

This rule (`:global(.v-theme--PurpleThemeDark .provider-icon--monochrome { filter: brightness(0) invert(1); }`) is now duplicated in `AddNewProvider.vue`, `ProviderSourcesPanel.vue`, and `ItemCard.vue`. Moving it into a shared stylesheet or global theme file would avoid duplication and make future changes to the inversion behavior easier and less error‑prone.

Suggested implementation:

```

```

To fully centralize the `.provider-icon--monochrome` dark-theme rule as suggested:
1. Create a shared stylesheet (e.g. `dashboard/src/styles/provider-icons.css` or add to an existing global theme file) with:
   ```css
   :global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
       filter: brightness(0) invert(1);
   }
   ```
2. Ensure this shared stylesheet is imported once at the app level (e.g. in `main.ts`/`main.js` or a global `App.vue` style block).
3. Remove the duplicated rule from `ProviderSourcesPanel.vue` and `ItemCard.vue` in the same way as shown for `AddNewProvider.vue`.
</issue_to_address>

### Comment 2
<location path="dashboard/src/composables/useProviderSources.ts" line_range="87-96" />
<code_context>
     }

-    const types: Array<{ value: string; label: string; icon: string }> = []
+    const types: Array<{ value: string; label: string; icon: string; isMonochrome: boolean }> = []
     for (const [templateName, template] of Object.entries(providerTemplates.value)) {
       if (template.provider_type === selectedProviderType.value) {
</code_context>
<issue_to_address>
**suggestion:** Consider extracting a typed interface for source type items and tightening the `source` type in `isMonochromeSourceIcon`.

The inline `{ value: string; label: string; icon: string; isMonochrome: boolean }` type and `source: any` in `isMonochromeSourceIcon` reduce TypeScript’s ability to catch issues during refactors. Please define or reuse a `SourceType`-style interface with `isMonochrome`, and give `source` a specific type (e.g., a `ProviderSource` with a `provider` field) to improve type safety and detect shape changes earlier.

Suggested implementation:

```typescript
import { providerApi } from '@/api/v1'
import { getProviderIcon, isMonochromeProviderIcon } from '@/utils/providerUtils'
import { askForConfirmation as askForConfirmationDialog, useConfirmDialog } from '@/utils/confirmDialog'
import { normalizeTextInput } from '@/utils/inputValue'

interface ProviderSourceType {
  value: string
  label: string
  icon: string
  isMonochrome: boolean
}

interface ProviderSource {
  provider: string
}

      return []

```

```typescript
    const types: ProviderSourceType[] = []

```

To fully implement the suggestion:
1. Update the `isMonochromeSourceIcon` function signature to use the new `ProviderSource` type instead of `any`, e.g.:
   - `function isMonochromeSourceIcon(source: ProviderSource): boolean { ... }`
2. Inside `isMonochromeSourceIcon`, rely on `source.provider` (already in use) and let TypeScript infer the shape from `ProviderSource`.
3. If there is an existing shared type for provider sources (e.g., `ProviderSource` or similar) elsewhere in the codebase, prefer importing and using that instead of redefining it here, and adjust the interface definitions accordingly.
4. If other functions in this file accept a `source` parameter with a `provider` field (such as a helper returning `getProviderIcon(source.provider)`), update their parameter type to `ProviderSource` for consistency and improved type safety.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}