Global styles

The Cloudscape global styles package (@cloudscape-design/global-styles) offers:

• Global CSS styles (@font-face for Open Sans font)

• JavaScript utilities to set visual and content density modes

• Global CSS utility classes for dark mode

This package is provided with the npm module: @cloudscape-design/global-styles

For more information, see the package installation guide.

npm install @cloudscape-design/global-styles

The global styles package offers global CSS styles, including normalize  and Open Sans font  files. To have Cloudscape components display correctly, import the global CSS file:

import '@cloudscape-design/global-styles/index.css';

To avoid duplication of assets, make sure you have only one import of this module in your project.

The global styles package exposes a JavaScript module (global-styles.js) with helpers that allow to set visual and content density modes, as well as a function to disable motion.

(mode: Mode) => void

Mode.Light, Mode.Dark

Mode.Light

(density: Density) => void

Density.Comfortable, Density.Compact

Density.Comfortable

enum

Comfortable, Compact

Comfortable

enum

Light, Dark

Light

import { applyMode, applyDensity, Density, Mode } from '@cloudscape-design/global-styles';

// apply a color mode
applyMode(Mode.Dark);
applyMode(Mode.Light);

// apply a content density mode
applyDensity(Density.Compact);
applyDensity(Density.Comfortable);

(isDisabled: boolean) => void

import { disableMotion } from '@cloudscape-design/global-styles';

disableMotion(true);

To implement dark mode in your application, you might need to adjust some visual content. For example, you might want to display two different versions of an image depending on the mode.

To do that, you can use the following global CSS classes provided by the dark-mode-utils.css artifact in @cloudscape-design/global-styles.

awsui-util-show-in-dark-mode

awsui-util-hide-in-dark-mode

import '@cloudscape-design/global-styles/dark-mode-utils.css';
...
<div>
  <img className="awsui-util-hide-in-dark-mode" src="./light-image.png" />
  <img className="awsui-util-show-in-dark-mode" src="./dark-image.png" />
</div>

In the previous example, there are two images, where the image with awsui-util-hide-in-dark-mode class name will be hidden when the dark mode is on and visible in the light mode. The image with awsui-util-show-in-dark-mode class name becomes visible in the dark mode and hidden in the light mode.