Themes – Carbon Design System

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

If you’re using carbon-components there’s no reason to install the themes package separately. See our get started 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

If you prefer Yarn, use the following command instead:

yarn add @carbon/themes

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 Carbon Design System website .

Sass

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

@import "@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:

@import "@carbon/themes/scss/themes";
// Use the gray 10 theme
@include carbon--theme($carbon--theme--g10);
// Use the gray 90 theme
@include carbon--theme($carbon--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.

@import "@carbon/themes/scss/themes";
$carbon--theme: $carbon--theme--g10;
// Use the gray 10 theme
@include carbon--theme();

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

@import "@carbon/themes/scss/themes";
// Use the default white theme here
.my-dark-theme {
  @include carbon--theme($carbon--theme--g90) {
    // Use the dark theme here
  }
}

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

Themes: Overview

Guidelines: Typography