How to apply dark mode to AWS UI components

The AWS UI side navigation, breadcrumbs, and table components before and after the application of dark mode.

In How to apply your brand’s theme to AWS UI components, I wrote a guide to applying custom styles to the AWS UI component library. This was the foundation I needed to replicate dark mode for my portfolio when I migrated from Material UI to AWS UI.

Once I was able to modify the values of the AWS UI design tokens (CSS variables), it was just a matter of plugging in the dark mode alternatives as constants. You can see these values in the awsui-dark-mode open-source GitHub repository.

How do I enable dark mode? 🌚

A positive developer experience and intuitive API being top priority, enabling dark mode for AWS UI components is now extremely simple with the help of the awsui-dark-mode package.

To enable dark mode, 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>
  );
}

That’s literally all you have to do. You’re done. Your entire application will now display in dark mode.

Can I customize it? 🤔

Yes! 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>
  );
}

Conclusion 🔚

If you have any questions or feedback, please leave them in the comments below.

To read more of my columns, you may follow me on LinkedIn and Twitter, or check out my portfolio on CharlesStover.com.