我将SMUI与Svelte一起使用，并在SCSS中设置了主题 colored颜色 :
@use 'sass:color';
@use '@material/theme/color-palette';
@use '@material/theme/index' as theme with (
$primary: #ef8611,
$secondary: color.scale(#8aace1, $lightness: 90%),
$surface: #333,
$background: #fff,
$error: color-palette.$red-900
);
然后，值$primary应该存储在裸的css变量--mdc-theme-primary中，但似乎并非如此……
问题很简单:
How can I get the color value of 100 from scss to JavaScript ? is it possible ?
SCSS主题文件:
// bare css to scss
:root {
--mdc-theme-primary: #ef8611;
}
@use '@material/theme/index' as theme with (
$primary: var(--mdc-theme-primary)
);
// SCSS to Bare CSS
@use '@material/theme/index' as theme with (
$primary: #ef8611
);
:root {
--mdc-theme-primary: #{theme.$primary};
}
// To use the variable in css
button {
background-color: var(--mdc-theme-primary);
}
在Java脚本中:
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');