How can I use a theme provider with styled-components?

How can I use a theme provider with styled-components?

You can use the ThemeProvider component from styled-components to pass a theme to your styled components.

Can you show me a code example?

Sure! Here's a simple example:

import { ThemeProvider } from 'styled-components';

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

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

What if I want to use multiple themes?

You can create a context to manage multiple themes and switch between them using state.

Is there a way to access the theme inside a styled component?

Yes! You can access the theme using the props in your styled component like this:

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