Set Color Mode and Theme Dynamically without using a Hook

[egucciar]

Is your feature request related to a problem? Please describe.

I do not see why I need to write code like this to be able to dynamically modify the theme from passed-down props:

import React, {useLayoutEffect} from "react";
import {Reshaped, useTheme as useReshapedTheme} from "reshaped";

import "@ob/ui/themes/productTheme/theme.css";

interface ThemeProviderProps {
    children: React.ReactNode;
    colorMode: "light" | "dark";
}

/**
 * Reshaped's Theme Provider is a context, so for us to change the color
 * mode or theme, we need to use the useReshapedTheme hook
 */
const ApplyReshapedTheme: React.FC<Pick<ThemeProviderProps, "colorMode">> = ({colorMode}) => {
    const {setColorMode} = useReshapedTheme();
    useLayoutEffect(() => {
        setColorMode(colorMode);
    }, [colorMode, setColorMode]);
    return null;
};

export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, colorMode}) => {
    return (
        <Reshaped defaultTheme={"productTheme"} defaultColorMode={colorMode}>
            <ApplyReshapedTheme colorMode={colorMode} />
            {children}
        </Reshaped>
    );
};

Describe the solution you'd like Ideally, setting colorMode/theme should work and respond dynamically without using a hook like above.

Describe alternatives you've considered Can keep the current API if needed, since this wrapping is trivial, but feels unnecessary.