Example on how to change the theme at runtime

[Rogier-blip]

Hi,

Problem I am looking for a way to change the theme of carbon at runtime.

In the example given in the styles.scss of this repo the following variable is set.

$carbon--theme: <some-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(<some-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

[danielmontes9]

Hey bro! A little bit late, but I hope this helps. I had the same problem as you, and so far the only solution I found is using cdsTheme. I am working with Angular 19 and all it works fine.

You can check out an example in the documentation here: https://angular.carbondesignsystem.com/?path=/docs/components-theme--docs