Themes

If you’re using @carbon/react, you probably don’t need need to install the themes package separately. See our Carbon React guide to start building.

You can use @carbon/themes in JavaScript or Sass by including this package in your project. By default, @carbon/themes provides a set of color tokens that are pre-defined for a specific theme. Currently, we offer the following color themes: white, gray 10, gray 90, gray 100.

You can preview all of the token values for this on the color guidelines page.

If your project is using Sass, you can include this package and the corresponding default theme by writing the following in your Sass file:

By default, the white theme will be initialized. If you would like to include another theme, you can do so by configuring the sass module using with. For example:

Inline theming of theme switching can be done by using the mixin. For example:

Themes can also be extended with your own custom tokens:

Modern browsers and systems have adopted the idea of dark and light themes applied at a system level. Where no user preference has been specified their system level theme should be matched.

For example applying g10 or g100 automatically based on system preferences.

Some designs include a sections in the opposite theme.

If you’re looking to use these themes in JavaScript, we export a variety of bindings for you to use, including:

Usage

Sass

System preferences

JavaScript

Resources

Carbon theme package

Themes package demo