How to associate the change of "$vuetify.theme.dark" to the change of another variable using vuetify3?

[tayranmila]

Hello!

I am trying to run the code in example and I am having a hard time making this work using vuetify3.

I am using the trame cookie-cutter and I was not able to make it run with vuetify2, it simply doesn't load, so I am trying to transpose it to vuetify3 but I don't know how to access the dark theme of the application using this new vuetify version.

This is the code that I am using now:

import plotly.express as px

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import router, plotly, trame
from trame.widgets import vuetify3 as vuetify


# -----------------------------------------------------------------------------
# Charts
# -----------------------------------------------------------------------------


def scatter(dark):
    df = px.data.iris()

    template = "plotly"
    if dark:
        template = "plotly_dark"

    fig = px.scatter(
        df,
        x="sepal_width",
        y="sepal_length",
        color="species",
        template=template,
        title="A Plotly Express Figure",
    )


    return fig


# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
# Callbacks
# -----------------------------------------------------------------------------

@state.change("graph_theme")
def update_cube_axes_visibility(graph_theme, **kwargs):
    ctrl.graph_update(scatter(graph_theme))

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

# Home route
with RouterViewLayout(server, "/"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is home")
        with vuetify.VContainer(fluid=True, style="height: 600px;"):
            with vuetify.VRow(dense=True):
                vuetify.VSpacer()
                figure = plotly.Figure(
                    display_logo=False,
                    display_mode_bar="true",
                    # selected=(on_event, "['selected', utils.safe($event)]"),
                    # hover=(on_event, "['hover', utils.safe($event)]"),
                    # selecting=(on_event, "['selecting', $event]"),
                    # unhover=(on_event, "['unhover', $event]"),
                )
                ctrl.graph_update = figure.update
                vuetify.VSpacer()

# Foo route
with RouterViewLayout(server, "/foo"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is foo")
        with vuetify.VCardText():
            vuetify.VBtn("Take me back", click="$router.back()")

# Bar/id
with RouterViewLayout(server, "/bar/:id"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")


# Main page content
with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Multi-Page demo")

    # Tried to use it, but I was not able to make it work.
    trame.ClientStateChange(
        value="graph_theme",
        change="$vuet.theme.dark = graph_theme",
    )

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VCheckbox(
            v_model=("graph_theme", False),
            change="$vuet.theme.dark = $event",
            on_icon="mdi-lightbulb-off-outline",
            off_icon="mdi-lightbulb-outline",
            classes="mx-1",
            hide_details=True,
            dense=True,
        )
        # vuetify.VCheckbox(
        #     v_model="$vuetify.theme.dark",
        #     color="white",
        #     change=("graph_theme", "[$event]"),
        #     on_icon="mdi-lightbulb-off-outline",
        #     off_icon="mdi-lightbulb-outline",
        #     classes="mx-1",
        #     hide_details=True,
        #     dense=True,
        # )

    with layout.content:
        with vuetify.VContainer():
            router.RouterView()

    # add router buttons to the drawer
    with layout.drawer:
        with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
            # vuetify.VSubheader("Routes")

            with vuetify.VListItem(to="/"):
                vuetify.VIcon("mdi-home")
                vuetify.VListItemTitle("Home")

            with vuetify.VListItem(to="/foo"):
                vuetify.VIcon("mdi-food")
                vuetify.VListItemTitle("Foo")

            with vuetify.VListGroup(value=("true",), sub_group=True):
                with vuetify.Template(v_slot_activator=True):
                    vuetify.VListItemTitle("Bars")
                # with vuetify.VListItemContent():
                #     with vuetify.VListItem(v_for="id in [1]", to=("'/bar/' + id",)):
                #         # with vuetify.VListItemIcon():
                #         #     vuetify.VIcon("mdi-peanut-outline")
                #         with vuetify.VListItemContent():
                #             vuetify.VListItemTitle("Bar")
                #             vuetify.VListItemSubtitle("ID '{{id}}'")

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

def main():
    server.start()

if __name__ == "__main__":
    main()

Do you have any hint on this subject?

[jourdain]

I put the answer here and below for reference

import plotly.express as px

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import router, plotly
from trame.widgets import vuetify3 as vuetify


# -----------------------------------------------------------------------------
# Charts
# -----------------------------------------------------------------------------


def scatter():
    df = px.data.iris()

    template = "plotly"
    if state.theme_mode == "dark":
        template = "plotly_dark"

    fig = px.scatter(
        df,
        x="sepal_width",
        y="sepal_length",
        color="species",
        template=template,
        title="A Plotly Express Figure",
    )

    return fig


# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
# Callbacks
# -----------------------------------------------------------------------------


@state.change("theme_mode")
def update_cube_axes_visibility(**kwargs):
    ctrl.graph_update(scatter())


# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

# Home route
with RouterViewLayout(server, "/"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is home")
        with vuetify.VContainer(fluid=True, style="height: 600px;"):
            with vuetify.VRow(dense=True):
                vuetify.VSpacer()
                figure = plotly.Figure(
                    display_logo=False,
                    display_mode_bar="true",
                )
                ctrl.graph_update = figure.update
                vuetify.VSpacer()

# Foo route
with RouterViewLayout(server, "/foo"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is foo")
        with vuetify.VCardText():
            vuetify.VBtn("Take me back", click="$router.back()")

# Bar/id
with RouterViewLayout(server, "/bar/:id"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")


# Main page content
with SinglePageWithDrawerLayout(server, theme=("theme_mode", "light")) as layout:
    layout.title.set_text("Multi-Page demo")

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VCheckbox(
            v_model=("theme_mode", "light"),
            true_icon="mdi-lightbulb-off-outline",
            false_icon="mdi-lightbulb-outline",
            true_value="dark",
            false_value="light",
            classes="mx-1",
            hide_details=True,
            dense=True,
        )


    with layout.content:
        with vuetify.VContainer():
            router.RouterView()

    # add router buttons to the drawer
    with layout.drawer:
        with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
            # vuetify.VSubheader("Routes")

            with vuetify.VListItem(to="/"):
                vuetify.VIcon("mdi-home")
                vuetify.VListItemTitle("Home")

            with vuetify.VListItem(to="/foo"):
                vuetify.VIcon("mdi-food")
                vuetify.VListItemTitle("Foo")

            with vuetify.VListGroup(value=("true",), sub_group=True):
                with vuetify.Template(v_slot_activator=True):
                    vuetify.VListItemTitle("Bars")

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------


def main():
    server.start()


if __name__ == "__main__":
    main()

[tayranmila]

Thank you @jourdain!

It worked quite well!

[jourdain]

Vuetify cover the theme part in v3 here