ThemeProvider's theme prop is reactive? #57
Description
Steps to reproduce:
1 - npx degit solidjs/templates/ts my-app
2 - npm i -s solid-styled-components
3 - edit App.tsx with the follow content
4 - npm run dev
This super minimal example doesn't work:
App.tsx
import {styled, ThemeProvider} from "solid-styled-components";
import {createSignal} from "solid-js";
const dark = {
colors: {
primary: "black"
}
};
const light = {
colors: {
primary: "white"
}
};
const Container = styled('div')`
width: 100vw;
height: 100vh;
background: ${props => props.theme?.colors.primary};
`;
export const App = () => {
const [isDarkMode, setIsDarkMode] = createSignal(false);
const toggleTheme = () => {
setIsDarkMode(!isDarkMode());
};
return (
<ThemeProvider theme={isDarkMode() ? dark : light}>
<Container>
<button onClick={toggleTheme}>{isDarkMode() ? "Light" : "Dark"} Mode</button>
</Container>
</ThemeProvider>
);
};What is the proper way to toggle between these themes?