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

[tomkdgun]

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

[elizabethsjudd]

Here is a whole thread I had with another team on how Watson Health implemented themes on Carbon. The documentation on the site is incorrect: https://ibm-front-end.slack.com/archives/C046Y0YUD/p1564522027115900

[tomkdgun]

@elizabethsjudd I know how to apply different theme globally e.g. Dark 90, I was able to do it before opening this issue.
Unfortunately after go through slack thread, I'm still missing the example, how to properly apply different themes for part of application.

[elizabethsjudd]

sorry @tomkdgun I mis-understood your request. I don't know of if zoned themeing has been implemented/released yet. @mattrosno?

[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]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

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