How do I create a theme with Styled Components?

How do I create a theme with Styled Components?

To create a theme with Styled Components, you can use the ThemeProvider component to pass your theme object.

Can you show me an example of a theme object?

Sure! Here's a simple example:

const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#1c1c1e',
  },
  fonts: {
    main: 'Arial, sans-serif',
  },
};

How do I apply this theme to my components?

You can wrap your application in the ThemeProvider and use the styled function to access the theme properties.

What if I want to create a dark mode theme?

You can create a separate theme object for dark mode and toggle between them using state in your application.