ThemeProvider's theme prop is reactive?

[luiguild]

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?