Help to customize a theme for @carbon/react

[sildeman]

How do I create a theme with my brand colors, to apply in a @carbon/react application?

I tried to follow the directions on this page: https://carbondesignsystem.com/guidelines/themes/overview/#customizing-a-theme, but I didn't get the expected result. However, I confess that I'm not very good with styles and I don't know anything about sass.

If anyone has an example to help me, I'd be grateful.

Thanks!

[tay1orjones]

Hey @sildeman sorry for the confusion on this one. We're still working on getting docs consistent across the website and repository, #11293

We cover this a bit in the package sass docs, but you should be able to extend and override the theme with your own tokens or values:

@use '@carbon/themes/scss/themes';
@use '@carbon/themes' with (
  $fallback: themes.$g100,
  $theme: (
    background: #000000,
    or-a-new-token: #000000,
  )
);

[sildeman]

Yes, I'm using this strategy to apply my color setup.

In fact I would like to know if it's possible (in a simple way) to create a complete theme (example: $my-theme) and use it together with the Theme component, as if it were a native carbon theme (<Theme theme='my-theme'>), or use it as the main theme and apply the native carbon themes to parts of the interface (<Theme theme='g100'>).

Thanks