Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme): add custom color support for badge components #454

Closed
wants to merge 2 commits into from

Conversation

sunnyboy-mu
Copy link
Contributor

feat(theme): add custom color support for badge components

第一次写,不太规范,请指导ヾ(≧▽≦*)o

@pengzhanbo
Copy link
Owner

我更倾向于将 type 的类型扩展为 string,可自定义 type 的值,然后结合 css 来处理 color / bgColor / borderColor

因为从样式风格的角度考虑,Badge 在不同的场景下颜色不同,但在相同的场景下颜色应该是相同的,即它的颜色方案应该是可复用的通用方案。

<Badge type="important" />
/* index.css */
.vp-badge.important {
  color: #ccc;
  background-color: #fff;
  border-color: transparent;
}

[data-theme="dark"] .vp-badge.important {
  color: #ccc;
  background-color: #fff;
  border-color: transparent;
}

这可以很方便的进行复用。也可以适配在 深色/浅色 模式切换时需要设置不同的色值。

当然组件的 color / bg-color / border-color 也可以保留作为一种 fallback ,作为一次性场景的快速方案。

@sunnyboy-mu
Copy link
Contributor Author

sunnyboy-mu commented Feb 5, 2025

关闭此次合并吧,我在改改ヾ(≧▽≦*)o

@sunnyboy-mu sunnyboy-mu closed this Feb 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants