How to apply your brand’s theme to AWS UI components

The AWS UI side navigation, breadcrumbs, and table components before and after the application of a custom theme.

What’s the minimum I need to get started? ⌚

If you’re ready to get started styling your AWS UI components quickly and easily, you can install the awsui-theme NPM package.

import AwsuiTheme from 'awsui-theme';
import Home from './home';
export default function MyApp() {
return (
<AwsuiTheme colorTextAccent="red">
<Home />
</AwsuiTheme>
);
}

How does it work? 🤔

The AWS UI component library does not yet (and may never) support React context for injecting themes into individual components. The AwsuiTheme component works by taking your provided theme colors and changing the value of the AWS UI CSS variables for all child nodes.

// app.tsx
function MyApp() {
return (
<AwsuiTheme colorTextAccent="red">
<Home />
</AwsuiTheme>
);
}
:root {
--color-button-primary: blue;
}
.AwsuiTheme-1 {
--color-button-primary: red;
}

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