Using themes

Learn to share theme values across components with ThemeProvider.

Using a theme

A theme gathers colors and sizes into one object and offers it to the app. You wrap with ThemeProvider; children read values through props.theme.

Example: theme {primary: "blue"}; in the template color: ${props => props.theme.primary}. When the theme changes, everything updates.

Dark/light mode is easy with this structure.

ThemeProvider

You wrap ThemeProvider at the top of the app: <ThemeProvider theme={myTheme}><App /></ThemeProvider>. All styled components inside see the theme.

Keeping the theme object in its own file is clean; you change colors from one place.

This structure is the basis of consistent design systems.

Exercise Themed button

Complete the skeleton. Create a styled component ThemedButton defined with styled.button\`color: ${props => props.theme.primary};\`. Export it.

Show example solution

const ThemedButton = styled.button`color: ${props => props.theme.primary};`;

export default ThemedButton;

Test yourself

How do you read a theme value in a template?
```
ThemeProvider provides props.theme.
```
- props.theme.x
- this.theme
- theme.x
- window.theme
Show answer

props.theme.x — Read it through props.theme.

Using themes: fill in the missing part

color: ${props => props.theme.____};

Show answer

color: ${props => props.theme.primary};

Using themes: match the terms

ThemeProvider

Theme provider
props.theme

Theme access
theme={x}

Passing theme
{primary: "blue"}

Theme object

Next lesson: Summary - styled-components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies