carbon-design-system / carbon-design-system/carbon-tutorial-angular
Example on how to change the theme at runtime
- Dominant language
- No language data
- Stars
- 20
- Forks
- 883
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
**Problem**
I am looking for a way to change the theme of carbon at runtime.
In the example given in the [styles.scss](https://github.com/carbon-design-system/carbon-tutorial-angular/blob/angular-step-2/src/styles.scss) of this repo the following variable is set.
```
$carbon--theme: ;
```
Since this is a sass variable we won't be able to change this at runtime.
**Desirable state**
In the end, I would like to have something like this. Where I can have different themes that I change at runtime, by changing the class on the body tag
```
@import '@carbon/themes/scss/themes';
.light-theme {
@include carbon--theme($carbon--theme--g10) {}
}
.dark-theme {
@include carbon--theme($carbon--theme--g100) {}
}
```
But for some reason the mixin won't work.
```
@include carbon--theme();
```
**Solution**
Could you provide an example on how to change the theme at runtime? Or point me in the right direction :)
**Versions**
Angular: 10.1.4
carbon-components: 10.21.0
carbon-components-angular: 4.19.1
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.