Carbon dark themes are here
Available now wherever you get your Carbon Design Kit.
We’re excited to announce the release of Carbon dark themes. Two of them! Carbon now offers two light themes and two dark themes. Our themes orchestrate visual experiences, serving as an organizational framework for color.
The light themes use White and Gray 10 backgrounds, and the dark themes use Gray 100 and Gray 90 backgrounds.
Tokenization
Carbon uses color tokens to manage themes across a UI. By using Carbon theme tokens, developers and designers can easily customize components by changing a set of universal variables.
Think of our themes as a set of unique values assigned to the tokens of an interface. Each theme shares the same variables, with only the value changing for each theme.
With tokens, developers only need to change the code in one place to see a change system-wide. Some tokens are global, while others apply to color, spacing and typography. Nested tokens allow additional flexibility.
Applying a theme
Let’s put these sweet new dark themes to work.
In the Carbon Design Kit, our token properties are applied to layer styles. These layer styles are embedded within every component to create consistency for that particular theme. The four themes each have separate libraries.
To switch between themes, use the right hand panel to swap out the 1:1 symbol for your chosen theme using that themes library.
- Navigate to the symbol panel on the right
- Click the top level symbol and navigate to the same symbol but in a different theme bucket.
Note: You’ll have to do this for each symbol individually. We are exploring ways to enable a clean swap of all symbols between themes. If you have any tips, let us know at carbon@us.ibm.com
Customization
We generally recommend against straying from our themes and layer styles, but you know your product best. If you’re interested in developing a custom Carbon theme, start with the White theme.
Any deviation from our existing themes constitutes a new theme. A developer will package new values into a theme SCSS stylesheet which will replace the values of the base theme.
You can learn more about creating custom themes on the Carbon site.
What’s next for Carbon themes?
Now that we’ve released full theme coverage for our colors, we’ll be turning our focus to tooling and customization. As Carbon is an open source project, we want to build a system anybody, anywhere can use. This means more theming flexibility, better delivery, and inline theming support.
If there’s something you want, please let us know! We’re all ears on what to tackle next.
We want (and need) your help
Building this system wouldn’t be possible without your contributions, suggestions, and critiques.
Run into any issues or have feedback for us? Please make an issue, or submit a pull request, on our project over on GitHub.
If you haven’t heard of the Carbon Design System before, check us out! We’re the design system for IBM, shipping open-source styles and components in vanilla, React, Angular, and Vue for anyone building on the web.
