How can I implement themes using styled-components?

How can I implement themes using styled-components?

You can implement themes in styled-components by using the ThemeProvider component. It allows you to define a theme and access it throughout your application.

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 theme values in your styled components using the props parameter. For example:

import styled from 'styled-components';

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