How can I implement theming with styled-components?

How can I implement theming with styled-components?

You can implement theming in styled-components by using the ThemeProvider component to pass your theme object.

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 components?

You can use the styled function to create styled components that utilize the theme values like this:

const Button = styled.button`
  background-color: ${({ theme }) => theme.colors.primary};
  color: white;
`;

What if I want to switch themes dynamically?

You can manage theme switching by using React state to toggle between different theme objects and updating the ThemeProvider accordingly.