feat: add theme-aware logo support via optional sourceDark configuration

[Copilot]

Summary

This PR implements support for configuring separate logo images for light and dark themes, solving the issue where solid color icons (such as black) display normally in light theme but blend with the background color in dark theme.

📋 Changes Made

Type Definitions

• Added optional sourceDark field to LogoPreferences interface
• Maintains full backward compatibility

Logo Component Enhancement

• Modified VbenLogo component to accept srcDark prop
• Implemented computed property to auto-select appropriate logo based on theme
• Added :key attribute to VbenAvatar to ensure re-rendering when logo changes
• Fallback to src when sourceDark not provided

Authentication Page Support

• Added logoDark prop to AuthPageLayout component
• Updated authentication layout to compute logo based on theme (isDark)
• Applied to all app auth layouts (web-antd, web-ele, web-naive)
• Added :key attribute to login page logo for smooth theme transitions

Layout Integration

• Updated layout component to pass sourceDark to all logo instances
• Applied to both main logo and side-extra-title logo

Documentation

• Updated Chinese documentation with usage examples
• Updated English documentation with usage examples
• Added clear explanations of the new sourceDark field

💡 Usage Example

export const overridesPreferences = defineOverridesPreferences({
  logo: {
    source: '/logo-for-light-theme.svg', // Logo for light theme (visible on light backgrounds)
    sourceDark: '/logo-for-dark-theme.svg', // Logo for dark theme (visible on dark backgrounds, optional)
  },
});

The logo will automatically switch between light and dark versions on both the login page and main application layout when users toggle the theme.

✅ Testing & Validation

• TypeScript type checking passed
• Build successful (web-antd)
• Code review completed - no issues found
• Security scan (CodeQL) - no vulnerabilities
• Manual testing verified theme switching works correctly on login page
• Manual testing verified theme switching works correctly in main layout
• Backward compatibility verified

🔄 Backward Compatibility

• ✅ 100% backward compatible - existing configurations continue to work
• ✅ sourceDark is optional - defaults to source if not specified
• ✅ No breaking changes to APIs or type definitions

🐛 Bug Fixes

1. Fixed an issue where the logo wasn't updating when switching themes in the main layout by adding :key="logoSrc" to the VbenAvatar component
2. Implemented theme-aware logo support for the authentication/login page with automatic switching

📸 Screenshots

Login page - Light theme:

Login page - Dark theme:

The logo automatically switches between appropriate versions when the user toggles the theme on the login page.

🔒 Security Summary

• No security vulnerabilities detected by CodeQL analysis
• No new dependencies added
• Changes are isolated to logo display logic only

Original prompt

纯色图标（如黑色）在明亮主题时表现正常，在切换为暗色主题时会与背景色相近而非醒目，为黑白主题模式设置不同的应用图标（需尽量兼容现有偏好配置）

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8ec6ee2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[aonoa]

@copilot /**

• @zh_CN 根据主题选择合适的 logo 图标
  */
  const logoSrc = computed(() => {
  // 如果是暗色主题且提供了 srcDark，则使用暗色主题的 logo
  if (props.theme === 'dark' && props.srcDark) {
  console.log(props.srcDark);
  return props.srcDark;
  }
  // 否则使用默认的 src
  console.log(props.src);
  return props.src;
  });
  切换明暗主题时，这个好像没生效

[Copilot]

@copilot /**

• @zh_CN 根据主题选择合适的 logo 图标
  */...

Fixed in commit 8abe4ab. Added :key="logoSrc" to the VbenAvatar component to force re-rendering when the logo source changes. This ensures the logo updates immediately when switching between light and dark themes.

The computed logoSrc property was working correctly, but Vue wasn't re-rendering the Avatar component when only the :src prop changed. The :key attribute forces Vue to destroy and recreate the component whenever the logo source changes, ensuring smooth theme transitions.

[aonoa]

@copilot 为登陆页的logo也加上随主题切换的功能

[Copilot]

@copilot 为登陆页的logo也加上随主题切换的功能

已完成，提交 8011e1e。

为登录页的logo添加了主题切换功能：

• 在 AuthPageLayout 组件中添加了 logoDark prop
• 实现了基于 isDark 的 computed 属性来自动选择合适的 logo
• 更新了所有应用的 auth 布局文件 (web-antd, web-ele, web-naive)
• 添加了 :key 属性确保主题切换时 logo 立即更新

亮色主题登录页：

暗色主题登录页：