Carbon multiple custom themes help

[DenisCor]

Say you have an app with multiple custom themes 20-30 (basically a separate skin for each client)). What approach one should take when using carbon? Any advice is welcome!

Thx

[tay1orjones]

Interesting question! I don't think we've directly thought about the use case of that many themes being emitted.

One option that might work in this case is to define each theme and then emit each one using the theme() mixin. This way you can scope each theme to a selector you can switch out at runtime.

@use '@carbon/react';

// Full token list: https://github.com/carbon-design-system/carbon/blob/main/packages/themes/docs/sass.md#api
$defaultTheme0: (background: rebeccapurple, background-active: green, ... );
$anotherTheme1: (background: rebeccapurple, background-active: yellow, ... );
$anotherTheme2: (background: rebeccapurple, background-active: red, ... );
$anotherTheme3: (background: rebeccapurple, background-active: blue, ... );

// emit the default to the root
:root {
  @include react.theme($defaultTheme0);
}

// Scope additional themes to different selectors.
// Switch out these data attributes at runtime on the `html` element 
// and the theme should switch to the new values.
[data-theme='theme1'] {
  @include react.theme($anotherTheme1);
}

[data-theme='theme2'] {
  @include react.theme($anotherTheme2);
}

[data-theme='theme3'] {
  @include react.theme($anotherTheme3);
}

[DenisCor]

Hey Taylor, thanks for the reply, this method works fine when you don't
have any custom tokens in your theme. Say you have a theme where you
override some defaults (carbon tokens), but you also add some custom
tokens. Outside my main scss file where I want to use my custom tokens I
explicitly need to add @use @./react/scss/theme' with ($theme:
themes.£defaultTheam) so I can use theme.get('custom-token') in every scss
file where its needed, meaning when I switch say to theme1 it will only
pick up the carbon defaults and not the custom tokens. ill need to somehow
go in every scss file and change from:
@use @./react/scss/theme' with (
$theme: themes.£defaultTheam
);
to
@use @.***/react/scss/theme' with (
$theme: themes.£theme1
);
Which is not practical.. Any help regarding this? Thanks

Regards,

Denis

[tay1orjones]

@DenisCor The approach I described above will output any custom tokens provided in the theme maps (defaultTheme0, anotherTheme1, etc.) You would need to provide the custom token alongside background and background-acive.

I agree this approach can fall short when needing to use custom token values in other stylesheets. Your example having to reconfigure the theme module using with in every stylesheet highlights an unfortunate shortcoming of the with syntax feature in sass. From the docs:

Configuring modules with @use ... with can be very handy, especially when using libraries that were originally written to work with the @import rule. But it’s not particularly flexible, and we don’t recommend it for more advanced use-cases. If you find yourself wanting to configure many variables at once, pass maps as configuration, or update the configuration after the module is loaded, consider writing a mixin to set your variables instead and another mixin to inject your styles.

This is exactly what we've aimed for by providing the theme() mixin for these use cases. Calling theme() with the map you provide will cause custom properties to be emitted for all the tokens within, including any custom or overridden tokens. You could then use a mixin from the custom property module to get these, e.g. custom-property.get-var('link-text-color');