Implement different themes using styled components

I decided to switch to styled-components and now I'm really struggling to make my dark/light theme work again. Before I used only css and relied upon css variables. I looked many tutorials and example for styled-components but the theme is always stored and changed on app/top component, while I preferably need it stored in the config component and rendered on another.

How could I do this without necessarily changing the structure ?

import * as sc from "./styles";

function App() {
  return (
    <>
      <sc.globalStyles />
      <sc.title>My app</sc.title>
      <Configuration />
    </>
  );
}

function Configuration() {
  const [config, setConfig] = useState(
    retrieveFromStorage("configuration") ?? {
      //other things
      useDarkTheme: true,
    }
  )

  useEffect(() => setToStorage(config, "configuration"), [config]);

  const handleConfig = ({ target: { type, name, value, checked } }) => {
    setConfig(prev => ({
      ...prev,
      [name]: type === "select-one" ? value : checked,
    }));
  };

  return (
    <>
      <sc.options>
        <summary title="set your config">Options:</summary>
        {/*other things*/}
      </sc.options>
      <Theme useDarkTheme={config.useDarkTheme} handleInput={handleConfig} />
    </>
  );
}

function Theme({ useDarkTheme, handleInput }) {
  React.useEffect(
    () => (useDarkTheme ? console.log("should be dark") : console.log("should be light")),
    [useDarkTheme]
  );

  return (
    <sc.theme>
      ☀️
      <sc.toogleSwitch>
        <sc.toogleTheme
          type="checkbox"
          name="useDarkTheme"
          id="toogle"
          defaultChecked={useDarkTheme}
          onChange={handleInput}
        />
        <sc.themeLabel htmlFor="toogle" />
      </sc.toogleSwitch>
      🌒
    </sc.theme>
  );
}

thanks!

from Implement different themes using styled components