How can I use styled-components for theming in React?

How can I use styled-components for theming in React?

You can use the ThemeProvider from styled-components to create a theme context. Define your theme object and wrap your app with ThemeProvider.

Can you show me an example of a theme object?

Sure! Here's a simple theme object:

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

How do I apply this theme to my styled components?

You can access the theme in your styled components using the props parameter. For example:

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  font-family: ${props => props.theme.fonts.main};
`;

What if I want to switch themes dynamically?

You can manage theme switching by using React state. Update the theme in your state and pass it to the ThemeProvider.