Svelte SMUI, получение цветов темы в javascript
Я использую SMUI со svelte, а в 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, но, похоже, это не так...
Вопрос простой:
Как я могу получить значение цвета $primary из scss в JavaScript? Является ли это возможным ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
getComputedStyle(document.documentElement)
.getPropertyValue('--mdc-theme-primary');
document.documentElement .style.setProperty('--mdc-theme-primary',"#AAA");
Файл темы 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');
Спасибо большое, а можно наоборот? сначала в SCSS, а затем в Bare CSS?
Да, вы можете определить цвета своей темы в SCSS, а затем экспортировать их в переменные Bare CSS.
Я не очень хорошо знаком со SCSS, должен ли я: --mdc-theme-primary: theme.$primary; ?
1. файл ($primary: #ef8611; :root { --mdc-theme-primary: #{$primary}; }) 2.file (button { background-color: var(--mdc-theme-primary); })
Хорошо, синтаксис трудно угадать, большое спасибо, не могли бы вы обновить свой ответ, чтобы следующим было легче его найти? Большое спасибо. На самом деле правильный ответ был: --mdc-theme-primary: #{theme.$primary}; потому что $primary внутри theme
Итак, я думаю, что у меня не настроена эта переменная. это просто дает мне ''. Есть ли способ установить его прямо в моей теме? Я должен быть в состоянии сделать это вручную правильно? (например,
setVar('--mdc-theme-primary', $primary)