Theming in Bit

This example includes a demo of how to do theming in React and Bit using a theme provider and various themes.

The aim is to make it easier for designers and developers to be able to seamlessly collaborate. Currently, designers deal in design tokens (key-value pairs) and developers in javascript code, but there's no way to directly convert from one to the other without manual changes.

With this Theme Provider, design tokens can be exported from tools such as Figma, in JSON format, and then used as-is in Bit inside a theme component.

{
  "MyColorText": "red"
}

The Theme Provider automatically converts json formatted design tokens to useful CSS formats, both modular and direct CSS variables, which are then translated into a theme which can be used in your app. Essentially, it bridges the entire gap between raw tokens to fully-themed code.

color: var(--my-color-text);

The example also includes a button component which demonstrates the CSS from tokens, being used with both CSS variables and CSS-in-JS, as well as examples of creating and using multiple themes for varied branding across an organisation.

<button className={style.button}>Default Theme</button>
<button style={{ color: 'var(--my-color-text)' }}>Default Theme</button>
<button style={{ color: defaultTheme.myColorText }}>Default Theme</button>

Tutorial

Check out the tutorial for a step by step guide to creating your own theming in Bit.