search

carbon-design-system / carbon-web-components

Carbon Design System variant on top of Web Components
https://web-components.carbondesignsystem.com/
Apache License 2.0
476 stars 80 forks source link

Theme configuration doubt #227

Closed Tansito closed 4 years ago

Tansito commented 4 years ago

With the carbon-custom-elements how can I give a theme to a component? For example, how can I setup the g100 theme to a modal? Thanks in advance.

asudoh commented 4 years ago

Thank you for asking @Tansito! If you go to https://carbon-custom-elements.netlify.com/?path=/story/modal--default-story and click on Carbon Theme tab at the bottom (or at the right), you can switch to g100 theme there. If you inspect several colors in modal with Firefox DevTools (Chrome DevTools seems to have a series of style inspection bugs for constructed style sheets), you'll see those colors are defined via CSS custom properties, like var(--cds-text-01, #161616) for modal text.

That said, you can theme-switch via CSS custom properties. The one for Storybook is implemented at here. Probably we should expand the CSS custom properties doc for theming.

Tansito commented 4 years ago

Solved, thanks @asudoh! The last link worked as a charm.