How can I implement theming in Styled Components?

How can I implement theming in Styled Components?

You can implement theming in Styled Components by using the ThemeProvider component. It allows you to define a theme and access it in your styled components.

Can you show me a basic example of how to set it up?

Sure! First, install Styled Components. Then, create a theme object and wrap your app with ThemeProvider. Here's a simple example:

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green',
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourComponent />
    </ThemeProvider>
  );
}

How do I access the theme values in my styled components?

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

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
`;

What if I want to switch themes dynamically?

You can manage theme switching by using state in your component. Update the theme object based on user interaction, and the ThemeProvider will re-render with the new theme.