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

[bug] 自定义主题时,切换到深蓝模式后,primary样式没有覆盖完成 #80

Closed
AzronChan opened this issue May 17, 2023 · 3 comments

Comments

@AzronChan
Copy link
Contributor

AzronChan commented May 17, 2023

自定义样式

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #ffbf13,  // 黄色
    ),
  ),
  $font-size : (
    'base' : 12px
  ),
);

切换到深蓝模式后,hover 按钮时应用了自定义样式:

没有自定义样式时,深蓝皮肤hover时也没有应用到定义的primary样式:

bug原因是,深蓝模式下,没有完全覆盖原本的 primary样式,只是重写了--el-color-primary,还有--el-color-primary-light-x 没有覆盖,如果需要我可以提供pr

@pany-ang
Copy link
Member

欢迎 PR!不过我始终不喜欢 SCSS 方案,你可以用 CSS 变量的方式非常简单实现你的功能

@AzronChan AzronChan reopened this May 18, 2023
@AzronChan
Copy link
Contributor Author

欢迎 PR!不过我始终不喜欢 SCSS 方案,你可以用 CSS 变量的方式非常简单实现你的功能

PR 链接: #81

确实,SCSS方案变得越来越复杂了,有点和方便开发的初衷违背了;

element-plus 使用了SCSS方案,好在element-plus提供了完善的SCSS mixin方法可以根据primary base颜色,生成如 button-primary-hover 等颜色,不用自己去定义hover颜色,可以完全覆盖primary各种状态;

CSS,SCSS方案我都优化了,CSS变量方案简单明了;

@pany-ang
Copy link
Member

已合并

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

No branches or pull requests

2 participants