AWS UI Dark Mode

The AwsuiDarkMode component applies a dark mode theme to all child node AWS UI components.

• Install
• Use
• Props
  • disabled
  • root
• F.A.Q.
  • Customization
  • CollectionPreferences

Install

• npm install awsui-dark-mode or
• yarn add awsui-dark-mode

Use

Wrap the AwsuiDarkMode component around your application. While AwsuiDarkMode does not currently use React contexts, this wrapper would most likely be placed alongside your React context providers, such as React Router or Redux.

import AwsuiDarkMode from 'awsui-dark-mode';

export default function App() {
  return (
    <AwsuiDarkMode>
      <Home />
    </AwsuiDarkMode>
  );
}

Props

disabled

Type: boolean optional

When true, the dark mode is not applied at all. You may want to use this prop to allow your users to toggle between dark and light mode.

import AwsuiDarkMode from 'awsui-dark-mode';

export default function App() {
  const [isDarkModeDisabled] = useState(false);

  return (
    <AwsuiDarkMode disabled={isDarkModeDisabled}>
      <Home />
    </AwsuiDarkMode>
  );
}

root

Type: string optional

When specified, the dark mode is applied to this CSS selector. You may want to use this, for example, to theme your CollectionPreferences component by applying dark mode to your body element.

See also: awsui-theme's AwsuiThemeRootSelector

import AwsuiDarkMode from 'awsui-dark-mode';

export default function App() {
  return (
    <AwsuiDarkMode root="body">
      <Home />
    </AwsuiDarkMode>
  );
}

F.A.Q.

Customization

To apply your own theme overrides to the AWS UI dark mode, use the awsui-theme package and mount the AwsuiTheme component inside AwsuiDarkMode.

import AwsuiDarkMode from 'awsui-dark-mode';
import AwsuiTheme from 'awsui-theme';

export default function App() {
  return (
    <AwsuiDarkMode>
      <AwsuiTheme colorTextAccent="red">
        <Home />
      </AwsuiTheme>
    </AwsuiDarkMode>
  );
}

CollectionPreferences

What do I do if my CollectionPreferences component is still in light mode?

AWS UI mounts the CollectionPreferences as a child node of your body element. As a result, it falls outside of the wrapper generated by the AwsuiDarkMode component.

Currently, AWS UI does not offer a way to mount the CollectionPreferences component anywhere other than the body element. To style the CollectionPreferences component, you must apply your AWS UI theme to your body element. To do this, set the root prop prop to "body".