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

[tayran-mila]

Hello!

I am a new user of trame and I am really enjoying working on that. Thank you guys for all the hard work you are putting into it. It is already really great!

I am creating an app that has the option of a dark theme. And I am using a code that I found in an example here:

vuetify.VCheckbox(
 v_model="$vuetify.theme.dark",
 on_icon="mdi-lightbulb-off-outline",
 off_icon="mdi-lightbulb-outline",
 classes="mx-1",
 hide_details=True,
 dense=True,
)

I created another checkbox that changes the theme of a plotly graph to light and dark. And it is working pretty well.

        vuetify.VCheckbox(
            v_model=("graph_theme", True),
            on_icon="mdi-cube-outline",
            off_icon="mdi-cube-off-outline",
            classes="mx-1",
            hide_details=True,
            dense=True,
        )

The question is: can I associate these two changes to one single checkbox? That is: plotly graph theme and app theme changing together? I want both of them dark or both of them light. I don't know how to access the state of the built-in variable "$vuetify.theme.dark".

Thank you again!

[patrickoleary]

I use a change to set the theme_mode to dark or light (True or False) as follows, then I use that theme_mode for all my components (Plotly and matplotlib, ....). Hope this helps. vuetify.VCheckbox( v_model="$vuetify.theme.dark", color="white", on_icon="mdi-lightbulb-off-outline", off_icon="mdi-lightbulb-outline", classes="mx-1", hide_details=True, dense=True, change=(theme_mode, "[$event]"), ) def theme_mode(event): application.subsurface.set_theme_mode(event) update_viewX() update_viewY() update_viewZ()

…

On Wed, May 25, 2022 at 1:55 PM Tayran Milá ***@***.***> wrote: Hello! I am a new user of trame and I am really enjoying working on that. Thank you guys for all the hard work you are putting into it. It is already really great! I am creating an app that has the option of a dark theme. And I am using a code that I found in an example here: vuetify.VCheckbox( v_model="$vuetify.theme.dark", on_icon="mdi-lightbulb-off-outline", off_icon="mdi-lightbulb-outline", classes="mx-1", hide_details=True, dense=True, ) I created another checkbox that changes the theme of a plotly graph to light and dark. And it is working pretty well. vuetify.VCheckbox( v_model=("graph_theme", True), on_icon="mdi-cube-outline", off_icon="mdi-cube-off-outline", classes="mx-1", hide_details=True, dense=True, ) The question is: can I associate these two changes to one single checkbox? That is: plotly graph theme and app theme changing together? I want both of them dark or both of them light. I don't know how to access the state of the built-in variable "$vuetify.theme.dark". Thank you again! — Reply to this email directly, view it on GitHub <#70>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYGDMOPZKKVRI3A7COQ4F3VL2HRDANCNFSM5W6PJYKQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[jourdain]

Glad that you like trame as I really think it is much simpler and powerful than the other existing tools out there...

So to achieve what you are looking for, you should use only 1 state variable (defined from Python) like your graph_theme one.

Then you just need to sync graph_theme to that JS/Vuetify variable $vuetify.theme.dark.

To achieve that you will need to do the following:

from trame.widgets import trame

with layout:
   trame.ClientStateChange(
      value="graph_theme", 
      change="$vuetify.theme.dark = graph_theme",
   )

I think that ClientStateChange is not working just yet with trame v2, but it is its purpose. Just let me know if that works or not.
I guess if you share a dummy example for me to test/validate and debug that component, I could probably fix that in the coming days.

As a backup solution if the previous suggestion does not work right away (but should down the road), you can do the following.

from trame.widgets import trame

@state.change("graph_theme")
def update_theme(**kwargs):
    ctrl.call_trigger("themeChange")

with layout:
   triggers = trame.ClientTriggers(
       ref="myTriggers", # optional if you don't have several ClientTriggers
       themeChange="$vuetify.theme.dark = graph_theme",
   )
   ctrl.call_trigger = triggers.call

HTH,

Seb

[jourdain]

Patrick's suggestion is also really good. A summary of it can be seen below.

vuetify.VCheckbox(
   v_model="$vuetify.theme.dark",
   change="graph_theme = $event",
)

or

vuetify.VCheckbox(
   v_model=("graph_theme", False),
   change="$vuetify.theme.dark = $event",
)

[tayran-mila]

Oh! Thank you very much @patrickoleary and @jourdain for your quick answer!

I made the changes suggested in Jordain's last answer (a variation of Patrick's suggestion) and it worked pretty well. Thank you both again, guys!

I also tested Jordain's suggestion about using ClientStateChange but it seems not to be working yet.

I am going to share a dummy example here with this functionality so you can test/validate and debug that component as Jordain suggested. This example is working, so if someone needs something similar, it could be used as a reference.

import plotly.express as px

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

# Required for interactor initialization
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa

# Required for rendering initialization, not necessary for
# local rendering, but doesn't hurt to include it
import vtkmodules.vtkRenderingOpenGL2  # noqa


# -----------------------------------------------------------------------------
# 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()
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="$vuetify.theme.dark = graph_theme",
    # )

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VCheckbox(
            v_model=("graph_theme", False),
            change="$vuetify.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="/"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-home")
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("Home")

            with vuetify.VListItem(to="/foo"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-food")
                with vuetify.VListItemContent():
                    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
# -----------------------------------------------------------------------------

if __name__ == "__main__":
    server.start()

[jourdain]

So I just fixed the ClientStateChange while adding more control options.

Using the following will work once trame-components get a new release.

    trame.ClientStateChange(
        value="graph_theme",
        immediate=True,
        trigger_on_create=True,
        change="$vuetify.theme.dark = graph_theme",
    )

[jourdain]

The immediate allow to start with graph_theme=True and get the right behavior.

[DavidBerger98]

Is the same also possible the other way around?

Say I have multiple routes like /foo/:id and a state variable state.current_obj, which depends on $route.params.id. I.e. whenever $route.params.id changes, I update state.current_obj.

[jourdain]

Yes, it just bind a change detection to a JS expression execution.