Currently, I am utilizing Vue.js and SCSS along with PrimeVue and Element plus, where I am importing their variables. My objective is to dynamically change the theme color.
In my dark-variables.scss file, I have defined various color variables for different elements in the theme:
$--color-primary: #c9d1d9 !default;
$--color-white: #11141a !default;
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
...
$--color-info: #909399 !default;
The main focus is on changing the $--color-primary variable based on the selected theme. For instance, setting it to white for a light theme and black for a dark theme.
To achieve this, I attempted using the following code snippet:
$themes: (
darkTheme: (
"text-color": rgb(245, 0, 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");
Unfortunately, this code triggered an error which states:
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
How can I resolve this issue and make it work as intended?