Change themes issue

[cosmin-z]

Question for Carbon

I'm trying to create a custom themes, based on the documentation https://carbondesignsystem.com/guidelines/themes/overview, I've created a mixin file:

@mixin my-theme {
$theme--white: (
// Background
background: #ff0000,
background-active: #ff0000,
background-hover: #ff0000,
background-selected: #ff0000,
background-selected-hover: #ff0000,
background-inverse: #393939,
background-inverse-hover: #4c4c4c,
background-brand: #0f62fe,
.....
.....)
}

and after that I imported it into my scss file:

@use '../../node_modules/@carbon/styles';
@use '../../node_modules/@carbon/grid';

@use "myTheme";
@include myTheme.my-theme();

@import '../../node_modules/@carbon/themes/scss/themes';

@include grid.flex-grid();

@import '../../node_modules/carbon-components/scss/globals/scss/styles.scss';

but it doesn't work, I don't understand what I'm doing wrong.
Thanks for the help.

Code of Conduct

• I agree to follow this project's Code of Conduct

[joshblack]

Hi @cosmin-z! What version of Carbon are you looking to work with? This will change between v10 and v11 so wanted to make sure I was giving you the correct guidance.

For v11, a custom theme will look like:

@use '@carbon/styles/scss/theme' with (
  $theme: (
    background: #000000,
    // ...
  ),
);
@use '@carbon/styles';

Or, if you're using React, it should be:

@use '@carbon/react/scss/theme' with (
  $theme: (
    background: #000000,
    // ...
  ),
);
@use '@carbon/react';

[cosmin-z]

Hi @joshblack, I tried your suggestion (my carbon version is v11) but it doesn't work.
this is what I've:

@use '../../node_modules/@carbon/styles/scss/theme' with (
  $theme: (
      background: #ff0000,
           button-primary: #0f62fe,
          button-primary-active: #002d9c,
          button-primary-hover: #0353e9,
          button-secondary: #61e59c,
          button-secondary-active: #61e59c,
          button-secondary-hover: #61e59c,
          button-tertiary: #0f62fe,
          button-tertiary-active: #002d9c,
          button-tertiary-hover: #0353e9,
  ),
);

@use '../../node_modules/@carbon/styles';
@use '../../node_modules/@carbon/grid';

@import '../../node_modules/@carbon/themes/scss/themes';
@import '../../node_modules/@carbon/layout';

@include grid.flex-grid();

@import '../../node_modules/carbon-components/scss/globals/scss/styles.scss';

The output of the sass doesn't contain any kind of value reported in the variable $theme.

Did I do something wrong?

thanks for you help.

[joshblack]

@cosmin-z I'm sorry that you're still running into issues! It could be due to mixing and matching packages. If you're on v11, you should be able to use only @carbon/styles and no longer need to use the independent packages.

Based on your example, does this work?

@use '../../node_modules/@carbon/styles/scss/theme' with (
  $theme: (
      background: #ff0000,
           button-primary: #0f62fe,
          button-primary-active: #002d9c,
          button-primary-hover: #0353e9,
          button-secondary: #61e59c,
          button-secondary-active: #61e59c,
          button-secondary-hover: #61e59c,
          button-tertiary: #0f62fe,
          button-tertiary-active: #002d9c,
          button-tertiary-hover: #0353e9,
  ),
);
@use '../../node_modules/@carbon/styles';
@use '../../node_modules/@carbon/styles/scss/grid/flexbox';

[uyoungco]

button-primary cover

themes.scss

@use '@carbon/react';
@use '@carbon/layout';
@use '@carbon/type';
@use "@carbon/themes/scss/utilities";

$theme--diy01: (
  // Button
  button-primary: #3f51b5,
  button-primary-active: #5c6bc0,
  button-primary-hover: #5c6bc0
)

$theme--diy01: utilities.merge(
    $theme--diy01,
    layout.$spacing,
    layout.$fluid-spacing,
    type.$tokens
);

index.scss

[data-carbon-theme="diy"] {
  @include theme(themes.$$theme--diy01);
}

[uyoungco]

@joshblack Why can't the color of the button be overridden by the theme

[lidongyangLeo]

hi @joshblack
how can changed button token ?

@use '@carbon/react/scss/theme' with (
  $theme: (
  background: #f4f4f4,
  background-active: #d6d6d6,
  background-brand: #017f75,
  background-hover: #efefef,
  background-inverse: #333333,
  background-inverse-hover: #474747, // not change
  background-selected: rgba(141, 141, 141, 0.2), // not change
  background-selected-hover: #d6d6d6,

  border-disabled: #c6c6c6, // not change
  border-interactive: #017f75,
  border-inverse: #333333,


  button-primary: #017f75,
  button-secondary: #222943,
  button-tertiary: #017f75,
  button-danger-primary: #eb474d,
  button-danger-secondary: #eb474d,
....
);

@use '@carbon/react/scss/components/button';

  // Grid
@use '@carbon/react/scss/grid';
// Helpers
@use '@carbon/react/scss/spacing';
@use '@carbon/react/scss/type';

@use '@carbon/react/scss/colors';

@use '@carbon/react/scss/components/treeview';

@use '@carbon/react';

I try it, but the button token default color not changed.

https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#theme
doc use this can change the button token, but I try it, It doesn't work for me.

@use '@carbon/styles/scss/components/button' with (
  $button-separator: #e4e4e4
);

codesandbox

[Lc0rE]

I have the same issue. The theme customization is working fine on the generated CSS variables, but the custom tokens are all overwritten by the standard tokens.
It's working by using !important on every custom rule though.

Any thoughts?

[mvisintin]

I am experiencing a similar problem.

For the purpose of this example I am trying to style a button so it has

background-color: red;
border-radius: 20px;

Styling from @carbon/react

Not working

@use '@carbon/react' with (
  $button-primary: red,
  $button-border-radius: 20px
);

SassError: This module was already loaded, so it can't be configured using "with".
   ┌──> node_modules/@carbon/styles/scss/_layer.scss
8  │   @forward './layer/layer-sets';
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> node_modules/@carbon/styles/scss/layer/_layer-tokens.scss
11 │   @use './layer-sets' as *;
   │   ━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
   ┌──> src/index.scss
11 │ ┌ @use '@carbon/react' with (
12 │ │   $button-primary: red,
13 │ │   $button-border-radius: 20px
14 │ │ );
   │ └─^ configuration
   ╵
  node_modules/@carbon/styles/scss/_layer.scss 8:1  @forward
  node_modules/@carbon/styles/index.scss 18:1       @forward
  node_modules/@carbon/react/index.scss 9:1         @use
  src/index.scss 11:1                               root stylesheet

Styling from @carbon/react/scss/components/button

Not working

@use '@carbon/react/scss/components/button' with (
  $button-primary: red,
  $button-border-radius: 20px
);

SassError: This module was already loaded, so it can't be configured using "with".
   ┌──> node_modules/@carbon/styles/scss/components/button/_index.scss
10 │   @forward 'tokens';
   │   ^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> node_modules/@carbon/styles/scss/components/button/_mixins.scss
17 │   @use 'tokens' as *;
   │   ━━━━━━━━━━━━━━━━━━ original load
   ╵
   ┌──> src/index.scss
11 │ ┌ @use '@carbon/react/scss/components/button' with (
12 │ │   $button-primary: red,
13 │ │   $button-border-radius: 20px
14 │ │ );
   │ └─^ configuration
   ╵
  node_modules/@carbon/styles/scss/components/button/_index.scss 10:1  @forward
  node_modules/@carbon/react/scss/components/button/_index.scss 9:1    @use
  src/index.scss 11:1                                                  root stylesheet

Current workaround

The solution seems to avoid index files and go directly to the files containing the vars / tokens you want to change.

@use '@carbon/styles/scss/components/button/vars' with (
  $button-border-radius: 20px
);

@use '@carbon/styles/scss/components/button/tokens' with (
  $button-primary: red
);

@use '@carbon/react/scss/components/button';

Reproduction

• Error: https://codesandbox.io/s/friendly-roentgen-e1b9zg?file=/src/index.js
• Workaround: https://codesandbox.io/s/vigilant-napier-989qsj?file=/src/styles.scss

Possible causes

There is obviously the option that I am making some mistakes here.

I am definitely not a sass expert but it seems that the compiler is unhappy with how in
https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/button/_index.scss
both these two @forwards

@forward 'vars';
@forward 'button';

include:

@use 'tokens' as *;

I didn't extensively test this with other components, but since the structure it's similar I think all of them could be affected.

Related Issues

#11853

Tagging affected people (the workaround may be useful for them) and carbon devs (for visibility)
@Lc0rE @lidongyangLeo @uyoungco @joshblack

[Lc0rE]

Thanks @mvisintin, for the detailed explanation. I'm wondering where you learned about the with () approach to style single component. Even if I read the documentation about theming, I didn't know about this approach.

However, since I defined a custom theme for my CDS application, it seems that the /vars customization is working, while the /tokens are not having any effect. On your CodeSandbox example, it's working just fine.

I prepared a CodeSandbox example with a full custom theme applied (with !important ugliness included) using the TailwindCSS color scale (https://tailwindcss.com/docs/customizing-colors) and your custom with ( ) strategy:

https://codesandbox.io/s/cds-custom-theme-issue-forked-wi7m6s

You can notice how border-radius is applied while color is overwritten.

My question at this point is how we should apply custom themes. Globally and using !important? Component by component?

[tay1orjones]

After looking at this more closely, I was able to override component tokens by adding them to the theme via the add-component-tokens() mixin:

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
@use '@carbon/react/scss/components/button/tokens' as button-tokens;
@use '@carbon/themes/scss/utilities';
@use '@carbon/react/scss/components/button';

$button-token-overrides: (
  // Button
  button-primary: #fe0,
  button-primary-active: #fe0,
  button-primary-hover: #fe0
);
$button-tokens: utilities.merge(
  button-tokens.$button-tokens,
  $button-token-overrides
);

@include theme.add-component-tokens($button-tokens);

:root {
  @include theme.theme();
}

This also works if you choose to include all styles instead of only a single component

 @use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme';
 @use '@carbon/react/scss/components/button/tokens' as button-tokens;
 @use '@carbon/themes/scss/utilities';
- @use '@carbon/react/scss/components/button';
+ @use '@carbon/react';

 $button-token-overrides: (
   // Button
   button-primary: #fe0,
   button-primary-active: #fe0,
   button-primary-hover: #fe0
 );
 $button-tokens: utilities.merge(
   button-tokens.$button-tokens,
   $button-token-overrides
 );

 @include theme.add-component-tokens($button-tokens);

 :root {
   @include theme.theme();
 }

Note: this only applies to components that use component tokens (Tag, Notification, and Button). All other tokens should be able to be overridden via module configuration using with.

@use '@carbon/react/scss/theme' with (
  $theme: (
    text-on-color: #fe0,
  )
);
@use '@carbon/react';

All of the above examples only override the given token for a single theme. If you want to override each theme, you'll have to express a value for each theme just as the source does.

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
@use '@carbon/react/scss/components/button/tokens' as button-tokens;
@use '@carbon/themes/scss/utilities';
@use '@carbon/react/scss/components/button';

$button-token-overrides: (
  // Button
  button-primary:
    (
      fallback: #3f51b5,
      values: (
        (
          theme: themes.$white,
          value: #3f51b5,
        ),
        (
          theme: themes.$g10,
          value: #3f51b5,
        ),
        (
          theme: themes.$g90,
          value: #3f51b5,
        ),
        (
          theme: themes.$g100,
          value: #3f51b5,
        ),
      ),
    ),
  button-primary-active: (...),
  button-primary-hover: (...)
);
$button-tokens: utilities.merge(
  button-tokens.$button-tokens,
  $button-token-overrides
);

@include theme.add-component-tokens($button-tokens);

:root {
  @include theme.theme();
}

.g10 {
  @include theme.theme(themes.$g10);
}

.g90 {
  @include theme.theme(themes.$g90);
}

.g100 {
  @include theme.theme(themes.$g100);
}

We'll work on getting this all documented and the old examples cleaned up.