How to properly apply different carbon theme to part of app, e.g. White theme app with Gray 90 sidebar ?

I haven’t got response on slack so I’m trying here.

Carbon v10 Q1: How to properly apply different carbon theme to part of app, e.g. White theme app with Gray 90 sidebar ? Sidebar will contain carbon components (Checkbox, Buttons etc). I’m using scss. Theme are defining how Carbon components are styled e.g. White theme Carbon Checkbox has black border, while Gray 90 theme Checkbox has white border. I don’t know how to use both themes.

Q2: How to achieve something like presented on link below, e.g. “White overflow menu on Gray 10 card.” ? https://www.carbondesignsystem.com/guidelines/color/overview#light-themes

What package(s) are you using?

"carbon-components": "10.4.1",
"carbon-components-react": "7.4.1",
"carbon-icons": "7.0.7",

Summary

Relevant information

[mattrosno]

Hi @tomkdgun - happy to help. Here’s how I’d approach zoned theming in your Sass build. (The import paths are pretty crazy. We’re looking to clean those up in the future).

@import '~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';

// set your default theme
$carbon--theme: $carbon--theme--white;

// build your default styling
@import '~carbon-components/src/globals/scss/styles.scss';

// build a zoned theme that is applied by using a namespace class
.theme-g90 {
  @include carbon--theme($carbon--theme--g90) {
    // import the components that you want emitted inside this theme
    @import button();
  }
}

This will result in some CSS bloat. You can use PostCSS to de-dup the theme-g90 CSS if you’d like, so those declarations only override colors. An example of doing that with Gulp is here: https://github.com/carbon-design-system/carbon/pull/1872#issuecomment-470278749

---

The better approach going forward will be leveraging custom properties (CSS variables) so you could apply zoned theming during runtime. That approach depends on your browser support (IE11). We’ll be documenting how to accomplish this soon.

[stale[bot]]

As there’s been no activity since this issue was marked as stale, we are auto-closing it.