Why is the theme style change invalid?

[solid-component]

import { Router } from "@solidjs/router";
import { routes } from "./routes";
import "./App.css";
import "normalize.css";
import { themeMode } from "./themes";
import {
  ThemeProvider as MaterialThemeProvider,
  createTheme as materialCreateTheme,
} from "@suid/material";

const App = () => {
  const materialTheme = () => {
    return materialCreateTheme({
      palette: {
        mode: themeMode(),
      },
    });
  };

  return (
    <MaterialThemeProvider theme={materialTheme()}>
      <Router>{routes}</Router>
    </MaterialThemeProvider>
  );
};

export default App;

import ThemeChange from "@/components/ThemeChange";
import { setThemeMode, themeMode } from "@/themes";
import { styled } from "@suid/material";
import { createEffect } from "solid-js";

export type HeaderProps = {};

const SHeader = styled("div")(({ theme }) => {
  createEffect(() => {
    console.log('theme-header', theme.palette.mode)
  })
  return {
    backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
  }
});

const Header = () => {
  return (
    <SHeader
      style={{
        height: "50px",
        "padding-inline": "10px",
        display: "flex",
        "align-items": "center",
        "justify-content": "flex-end",
      }}
    >
      <ThemeChange
        checked={themeMode() === 'dark'}
        onChange={(e) => {
          setThemeMode(!e.target.checked ? "dark" : "light");
        }}
      />
    </SHeader>
  );
};

export default Header;

import { createSignal } from "solid-js";

export const [themeMode, setThemeMode] = createSignal<'light' | 'dark'>('light')

I tried to switch the theme by changing the mode, but the theme of the page did not change whether it was my custom theme or the material component, but when I used createEffect to listen to the materialTheme(), it would print out

[solid-component]

Have the same issue