How to customize the theming for light and dark mode

[kapi-caz]

Hi everyone,

I want to have custom light and dark mode. Hence, I overwrite the tokens of the given themes white, g10, g90 and g100. I found an issue which addresses this, but I can't make it work in my project.
I've created a stackblitz with the carbon example light-dark-mode.
My simple themes for light and dark do just define the background and the text-primary colour. This works partly, but not inside the <section className=theme-section>.

When I inspect it, I can see that the <div class="cds--g10 cds--layer-one"> overwrites the two tokens:
In the HTML tag:

Inside the div node cds--g10:

Note: the div with the class cds--toggle works as expected and the toggle button text color changes as well as the background around the nested box theme-section.

Any hints or ideas are welcome :) . I would love to understand my misconfiguration here in this example to debug my own project.

Thanks and best,

Kapilan

[janhassel]

Hey, you should be able to customize the themes by configuring them with Sass:

@use '@carbon/react/scss/themes' with (
  $g10: (
    background: #ff0000,
  ),
);

[kapi-caz]

Thank you @janhassel!

This works! I've updated my stackblitz accordingly.

Best,
Kapi