Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
  • Guides
    • Introduction
    • Get started for designers
    • Get started for developers
  • Resources
    • Design resources
  • Integration
    • Using Cloudscape components
    • Global styles
  • Development guides
    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index
  • Testing
    • Introduction to testing
    • Testing frameworks integration
    • Testing core classes
  1. Cloudscape Design System
    • Get started
    • Integration: Global styles

    Global styles

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

      On this page

      • Overview
      • Installation
      • Apply global styles
      • Manipulate global styles using JS helpers
      • Dark mode global utility classes

      Overview

      The Cloudscape global styles package offers global CSS styles, JavaScript utilities to set visual and content density modes, and global CSS utility classes for dark mode.

      • @font-face for Open Sans font

      To start using Cloudscape components, these styles must be present on the page, and the @cloudscape-design/global-styles package provides them. This package also provides global CSS utility classes for dark mode.

      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.

      • About
      • Connect
      • Privacy 
      • Site terms 
      • © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
      Made with love atAWS