Themes for applying color in Carbon for IBM Security
Themes are used for applying color and offered by outputting CSS custom properties as theme tokens.
Each theme is assigned universal color variables, which are determined by common roles and usage. This allows for uniform color application across themes while maintaining full styling flexibility.
By default, a set of color tokens are provided that are predefined for a specific theme. Currently, we support the following color themes:
- Cool gray 10
- Gray 100
Currently, only 2 themes are supported: Gray 100, activated by default, and Cool gray 10. You can use the theme classes to switch between themes:
| Name | Class |
|---|---|
| Gray 100 (default) | security--theme--g100 |
| Cool gray 10 | security--theme--cg10 |
If your project is using Sass, you can include the following in your Sass file:
@use '@carbon/ibm-security/scss/globals/theme';This will include theming styles and tokens for the Gray 100 theme by default.
In order to then set the Cool gray 10 theme, you need to
add the security--theme--cg10 class name in your HTML.
This file automatically includes tokens, denoted by the prefix $, which
initializes all the theme variables for use with Sass. For example:
$interactive-01;
$interactive-02;You can disable Carbon for IBM Security custom theme output using a feature flag by writing the following Sass code before importing:
$security--feature-flags: (
security--css-custom-property-theming: false,
);If you're looking to use themes in JavaScript, we export a binding for you to use:
// An object of theme values.
import { theme } from '@carbon/ibm-security';
// Specific token values.
const { interactive01, interactive02 } = theme;