Skip to main contentCarbon Design System

Themes

Use the themes package to customize your product while maintaining consistency.

If you’re using @carbon/react there’s no reason to install the themes package separately. See our get started guide to start building.

Get started

To install @carbon/themes in your project, you will need to run the following command using npm:

npm install -S @carbon/themes

If you prefer Yarn, use the following command instead:

yarn add @carbon/themes

Usage

There are three ways to utilize Carbon Themes. First, and maybe the simplest way is to bring in our <Theme> component and pass your desired theme as a prop. Second, if you need more granular control of where themes are applied or access to specific theming tokens when and you’re using @carbon/styles or @carbon/react you already have access to sass theming with no need for an extra package. Lastly, 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.

Sass

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

@use '@carbon/themes/scss/themes';

By default, the white theme will be initialized. If you would like to include another theme, you can do so by calling our mixin. For example:

@use '@carbon/themes/scss/themes';


// Use the gray 10 theme
@include theme($theme--g10);


// Use the gray 90 theme
@include theme($theme--g90);


// Use the gray 100 theme

Alternatively, you can set the global theme variable then call the mixin without passing in a theme name.

@use '@carbon/themes/scss/themes';


$theme: $theme--g10;


// Use the gray 10 theme
@include theme();

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

@use '@carbon/themes/scss/themes';


// Use the default white theme here


.my-dark-theme {
  @include theme($theme--g90) {
    // Use the dark theme here
  }
}

Themes can be configured by accessing the tokens in the import statement. For example:

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with ($theme: themes.$g100);

JavaScript

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

import {
  // An object of all themes
  themes,


  // Direct theme values
  white,
  g10,
  g90,
  g100,

Resources

Carbon theme package
Themes package demo
Edit this page on GitHub
Previous
Themes: Overview
Next
Guidelines: Typography