contextProvider using signal

// theme-provider.tsx
import {
  createContext,
  useContext,
  ParentComponent,
  createSignal,
} from "solid-js";

const defaultTheme = "light";

export type ThemeContextValue = [get: string, set: (theme: string) => void];
const ThemeContext = createContext<ThemeContextValue>([
  defaultTheme,
  (theme: string) => {},
]);

export const ThemeProvider: ParentComponent<{
  theme?: string;
}> = (props) => {
  const [theme, setter] = createSignal(defaultTheme);
  const setTheme = (val: string) => {
    console.log("ThemeProvider: setTheme", val);
    setter(val);
  };

  return (
    // Note: if I put el here and bind to theme value,      // it is reactive when called using setter from         // child comp, so seems everything is working here.
    <ThemeContext.Provider value={[theme(), setTheme]}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);