Themes
Use the themes package to customize your product while maintaining consistency.
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 themesthemes,// Direct theme valueswhite,g10,g90,g100,