如何解决SCSS 浅色和深色主题色,如何让它发挥作用?
所以我使用 vue js 和 scss。 我正在使用 PrimeVue 和 Element plus,并且正在导入变量。 我想动态更改主题颜色。
暗变量.scss
$--color-primary: #c9d1d9 !default;
/// color|1|Background Color|4
$--color-white: #11141a !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white,$--color-primary,10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white,20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white,30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white,40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white,50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white,60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white,70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white,80%) !default; /* d9ecff */
$--color-primary-light-9: #21262d !default; /* ecf5ff */ // #2c333c | #152344
/// color|1|Functional Color|1
$--color-success: #67c23a !default;
/// color|1|Functional Color|1
$--color-warning: #e6a23c !default;
/// color|1|Functional Color|1
$--color-danger: #f56c6c !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;
$--color-primary - 可以在很多 scss 文件中使用,我想根据主题更改颜色,
例如:
$--color-primary: 白色(如果是浅色主题,如果是黑色主题则是黑色)
** 我想要做什么**
$themes: (
darkTheme: (
"text-color": rgb(245,0),"bg-color": #424242,),lightTheme: (
"text-color": black,"bg-color": #f5f5f5,);
@mixin theme() {
@each $theme,$map in $themes {
$theme-map: $map !global;
.#{$theme} & {
}
}
$theme-map: null !global;
}
@function theme-get($key) {
@return map-get($theme-map,$key);
}
// - Error
$--color-primary: theme-get("text-color");
本身的错误:
Syntax Error: SassError: Undefined variable.
╷
56 │ @return map-get($theme-map,$key);
│ ^^^^^^^^^^
╵
src\assets\styles\element-variables.scss 56:19 theme-get()
src\assets\styles\element-variables.scss 59:19 @import
src\assets\styles\kendoUI\kendoUI.scss 1:9 @import
E:\Sproj\Web\src\assets\styles\styles.scss 7:9
如何让它发挥作用?
解决方法
我认为我们需要改变两件事,
-
我们需要用
删除动态类的错误语法&
-
我们需要包含 mixin 来初始化
$theme-map
darkTheme: ( "color": rgb(245,0),"background-color": #424242,),lightTheme: ( "color": black,"background-color": #f5f5f5,); @mixin theme() { $theme-map: null !global; @each $theme,$map in $themes { $theme-map: $map !global; .#{$theme} { } } } @include theme(); @function theme-get($key) { @return map-get($theme-map,$key); } // - Error $--color-primary: theme-get("text-color"); .theme { color: $--color-primary; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。