carbon-design-system / carbon-design-system/carbon-tutorial-angular

Example on how to change the theme at runtime

Open
#594 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.