Abstract color_mode related Var creation

[masenf]

• Each color_mode-related Var only destructs the name it needs to use from ColorModeContext.
  • Create the BaseVar via helper function.
• Allow set_color_mode to take a parameter at compile time as a CallableVar.
  • Replace similar logic in color_mode.py
• Update type hinting of Var._replace to indicate that it returns BaseVar.
• Fix dependency array creation for useCallback when the hook uses object destructuring (only worked with array before)

Sample Code

import reflex as rx


class State(rx.State):
    """The app state."""

    to_mode: str = "system"


def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.color_mode.button(position="top-left", allow_system=True),
        rx.vstack(
            # Uncomment the following line and _always_ get a hydration error.
            # rx.text("resolvedColorMode: ", rx.style.resolved_color_mode),
            rx.text("colorMode: ", rx.style.color_mode),
            rx.button("To System", on_click=rx.style.set_color_mode(rx.style.SYSTEM_COLOR_MODE)),
            rx.button("To {State.to_mode}", on_click=rx.style.set_color_mode(State.to_mode)),
            rx.button("Poor Man's Color Toggle", on_click=rx.style.set_color_mode(
                rx.color_mode_cond(
                    light=rx.style.DARK_COLOR_MODE,
                    dark=rx.style.LIGHT_COLOR_MODE,
                )
            )),
            spacing="5",
            justify="center",
            min_height="85vh",
        ),
    )


app = rx.App()
app.add_page(index)

(If you hit hydration errors, simply click out of the error, reset the color mode to System, and refresh. The errors should go away)