Carbon Design System

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

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.

Get started
Usage
Resources

Get started

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

npm install -S @carbon/themes
Copy to clipboard

If you prefer Yarn, use the following command instead:

yarn add @carbon/themes
Copy to clipboard

Usage

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';

.my-component {
  // Use tokens from the theme, this will map to a CSS Custom Property
  color: themes.$token-01;
}

:root {
  // Emit CSS Custom Properties for the current theme
Copy to clipboard

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:

@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes' with ($theme: $g100);
Copy to clipboard

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

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

:root {
  @include themes.theme($white);
}

[data-carbon-theme='g10'] {
  @include themes.theme($g10);
Copy to clipboard

Themes can also be extended with your own custom tokens:

@use '@carbon/themes/scss/themes';
@use '@carbon/themes' with
  (
    $fallback: themes.$g100,
    $theme: (
      token-01: #000000,
    )
  );
Copy to clipboard

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,
Copy to clipboard

Resources

Carbon theme package

Themes package demo

Edit this page on GitHub

Themes: Overview

Guidelines: Typography