简洁的SMUI，在javascript中检索主题颜色

Question

我使用SMUI与slite，在SCSS中我设置了主题颜色:

@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中，但它似乎不是…

问题很简单:

我如何从scss到JavaScript获得$primary的颜色值?

Answer 1

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);
}

在Javascript:

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');

Answer 2

getComputedStyle(document.documentElement)
.getPropertyValue('--mdc-theme-primary');