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.

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.

import AwsuiDarkMode from 'awsui-dark-mode';

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

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.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store