The Theme component helps adjust all other components visually to a "dark" or a "light" page design.

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
name
dark | light
controls which theme is used in child components
Theme.defaultName

To theme a component or part of the page, surround it in the Theme component. If you're on React < 16, you'll need to wrap a single child, so a child div may be required.

The product is mostly presented within a "dark" interface theme. This is the default, but the Theme component can change that for a page or subset of themable components.

Here's an example of the Button component in both "light" and "dark" themes.