Global styles

Use the Cloudscape global styles package to apply foundational CSS to pages.

Published: May 4, 2022

On this page

Overview

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

Installation

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

Apply 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.

Manipulate global styles using JS helpers

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.

Visual modes

Name
Type
Description
Accepted values
Default
applyMode
(mode: Mode) => void
Sets the color mode.
Mode.Light, Mode.Dark

Mode.Light
applyDensity
(density: Density) => void
Sets the content density.
Density.Comfortable, Density.Compact

Density.Comfortable
Density
enum
Definition for content densities.
Comfortable, Compact

Comfortable
Mode
enum
Definition for color modes.
Light, Dark

Light

Code example

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

Motion

Name
Type
Description
Accepted values
Default
disableMotion
(isDisabled: boolean) => void
Turns off motion effects.
-
false

Code example

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

disableMotion(true);

Dark mode global utility classes

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.

Class
Description
awsui-util-show-in-dark-mode
Makes the content visible in the dark mode.
awsui-util-hide-in-dark-mode
Makes the content hidden in the dark mode.

Usage example

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.