What's the proper way to switch between dark and light modes on SolidJS + SUID?

[psygo]

I'm kind of new to SolidJS, and now I'm trying to work out how SUID's ThemeProvider differs from SolidJS's (e.g. this docs provider/context example). A simple example would be how to switch between light and dark modes from a child component. What's the proper way?

I've tried something like this so far, but it hasn't worked, I thought signal reactivity would be enough, but I think I'm misunderstanding a core concept somewhere.

If the example below is successful, then the background should switch between black and white.

import { createSignal } from "solid-js";

import { createTheme } from "@suid/material";
import { green, orange } from "@suid/material/colors";

const lightTheme = createTheme({
  palette: {
    mode: "light",
    background: {
      default: "#000",
    },
  }
});

const darkTheme = createTheme({
  palette: {
    mode: "dark",
    background: {
      default: "#fff",
    },
  }
});

const [theme, setTheme] = createSignal(darkTheme);

function toggleTheme() {
  theme() === lightTheme
    ? setTheme(darkTheme)
    : setTheme(lightTheme);
}

function ChildComponent() {
  return (
    <FormControlLabel
      onChange={(e) => {
        toggleTheme();
      }}
      label=""
      control={<Switch />}
    />
  )
}

function App() {
  return (
    <>
      <CssBaseline />
      <ThemeProvider theme={theme()}>
        <ChildComponent />
      </ThemeProvider>
    </>
  );
}

[snnsnn]

Solid does not have a theme provider but provides a way to create a theme provider. ThemeProvider it is SUID specific component that uses Solid's built-in context API.

What you are trying to do is to use a context value to pass data, a JavaScript object with CSS values, to downstream components. Since code has no issue but you don't know how it works, it is best for you to learn how solid works, how context API fits into its reactive system.

You can check out this answer for it: https://stackoverflow.com/a/74492899/7134134

[psygo]

I've created a bounty for this question on StackOverflow, you can see it here.