I'm trying to achieve dark and light themes in my React app. I know how themes work, so I'm configuring my button like below, for example :
const Button = styled.button`
/* some styles */
color: ${props => props.theme.main}
`;
Then I'm defining themes as consts:
const dark = {
main: 'black',
text: 'switch to light mode'
};
const light = {
main: 'white',
text: 'switch to dark mode'
};
And when I want to use the theme somewhere I do it like this:
<ThemeProvider theme={dark}>
<Button>{dark.text}</Button>
</ThemeProvider>
But what I want to achieve is to change the theme dynamically (on a click function on the button probably). I'm kind of new to React so please don't be mean to me.
Something like this? Demo