Skip to content

Commit cef47b5

Browse files
UlysseDurandUlysseDurand
committed
docs: fix dark theme on vue3
1 parent a0ee90d commit cef47b5

3 files changed

Lines changed: 51 additions & 46 deletions

File tree

‎03_html/solution_buttons.py‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
server = get_server()
4848
ctrl = server.controller
4949

50-
with SinglePageLayout(server) as layout:
50+
with SinglePageLayout(server, theme=("theme", "light")) as layout:
5151
layout.title.set_text("Hello trame")
5252

5353
with layout.content:
@@ -61,8 +61,9 @@
6161
with layout.toolbar:
6262
vuetify3.VSpacer()
6363
vuetify3.VSwitch(
64-
v_model="$vuetify.theme.dark",
65-
click="theme.toggle()",
64+
v_model="theme",
65+
false_value="light",
66+
true_value="dark",
6667
hide_details=True,
6768
dense=True,
6869
)

‎03_html/solution_final.py‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
from trame.app import get_server
22
from trame.ui.vuetify3 import SinglePageLayout
3-
from trame.widgets import vtk, vuetify3
3+
from trame.widgets import vtk, vuetify3 as vuetify
44

55
from vtkmodules.vtkFiltersSources import vtkConeSource
66
from vtkmodules.vtkRenderingCore import (
@@ -71,11 +71,11 @@ def reset_resolution():
7171
# GUI
7272
# -----------------------------------------------------------------------------
7373

74-
with SinglePageLayout(server) as layout:
74+
with SinglePageLayout(server, theme=("theme", "light")) as layout:
7575
layout.title.set_text("Hello trame")
7676

7777
with layout.content:
78-
with vuetify3.VContainer(
78+
with vuetify.VContainer(
7979
fluid=True,
8080
classes="pa-0 fill-height",
8181
):
@@ -84,8 +84,8 @@ def reset_resolution():
8484
ctrl.view_reset_camera = view.reset_camera
8585

8686
with layout.toolbar:
87-
vuetify3.VSpacer()
88-
vuetify3.VSlider(
87+
vuetify.VSpacer()
88+
vuetify.VSlider(
8989
v_model=("resolution", DEFAULT_RESOLUTION),
9090
min=3,
9191
max=60,
@@ -94,18 +94,20 @@ def reset_resolution():
9494
dense=True,
9595
style="max-width: 300px",
9696
)
97-
with vuetify3.VBtn(icon=True, click=reset_resolution):
98-
vuetify3.VIcon("mdi-restore")
97+
with vuetify.VBtn(icon=True, click=reset_resolution):
98+
vuetify.VIcon("mdi-restore")
9999

100-
vuetify3.VDivider(vertical=True, classes="mx-2")
100+
vuetify.VDivider(vertical=True, classes="mx-2")
101101

102-
vuetify3.VSwitch(
103-
v_model="$vuetify.theme.dark",
102+
vuetify.VSwitch(
103+
v_model="theme",
104+
false_value="light",
105+
true_value="dark",
104106
hide_details=True,
105107
dense=True,
106108
)
107-
with vuetify3.VBtn(icon=True, click=ctrl.view_reset_camera):
108-
vuetify3.VIcon("mdi-crop-free")
109+
with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
110+
vuetify.VIcon("mdi-crop-free")
109111

110112
# -----------------------------------------------------------------------------
111113
# Main

‎04_application/solution.py‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
from trame.app import get_server
44
from trame.ui.vuetify3 import SinglePageWithDrawerLayout
5-
from trame.widgets import vtk, vuetify3, trame
5+
from trame.widgets import vtk, vuetify3 as vuetify, trame
66

77
from trame_vtk.modules.vtk.serializers import configure_serializer
88

@@ -353,23 +353,25 @@ def update_contour_value(contour_value, **kwargs):
353353

354354

355355
def standard_buttons():
356-
vuetify3.VCheckbox(
356+
vuetify.VCheckbox(
357357
v_model=("cube_axes_visibility", True),
358358
true_icon="mdi-cube-outline",
359359
false_icon="mdi-cube-off-outline",
360360
classes="mx-1",
361361
hide_details=True,
362362
dense=True,
363363
)
364-
vuetify3.VCheckbox(
365-
v_model="$vuetify.theme.dark",
364+
vuetify.VCheckbox(
365+
v_model="theme",
366+
true_value="dark",
367+
false_value="light",
366368
true_icon="mdi-lightbulb-off-outline",
367369
false_icon="mdi-lightbulb-outline",
368370
classes="mx-1",
369371
hide_details=True,
370372
dense=True,
371373
)
372-
vuetify3.VCheckbox(
374+
vuetify.VCheckbox(
373375
v_model=("viewMode", "local"),
374376
true_icon="mdi-lan-disconnect",
375377
false_icon="mdi-lan-connect",
@@ -379,8 +381,8 @@ def standard_buttons():
379381
hide_details=True,
380382
dense=True,
381383
)
382-
with vuetify3.VBtn(icon=True, click=ctrl.view_reset_camera):
383-
vuetify3.VIcon("mdi-crop-free")
384+
with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
385+
vuetify.VIcon("mdi-crop-free")
384386

385387

386388
def pipeline_widget():
@@ -398,21 +400,21 @@ def pipeline_widget():
398400

399401

400402
def ui_card(title, ui_name):
401-
with vuetify3.VCard(v_show=f"active_ui == '{ui_name}'"):
402-
vuetify3.VCardTitle(
403+
with vuetify.VCard(v_show=f"active_ui == '{ui_name}'"):
404+
vuetify.VCardTitle(
403405
title,
404406
classes="grey lighten-1 py-1 grey--text text--darken-3",
405407
style="user-select: none; cursor: pointer",
406408
hide_details=True,
407409
dense=True,
408410
)
409-
content = vuetify3.VCardText(classes="py-2")
411+
content = vuetify.VCardText(classes="py-2")
410412
return content
411413

412414

413415
def mesh_card():
414416
with ui_card(title="Mesh", ui_name="mesh"):
415-
vuetify3.VSelect(
417+
vuetify.VSelect(
416418
# Representation
417419
v_model=("mesh_representation", Representation.Surface),
418420
items=(
@@ -432,9 +434,9 @@ def mesh_card():
432434
outlined=True,
433435
classes="pt-1",
434436
)
435-
with vuetify3.VRow(classes="pt-2", dense=True):
436-
with vuetify3.VCol(cols="6"):
437-
vuetify3.VSelect(
437+
with vuetify.VRow(classes="pt-2", dense=True):
438+
with vuetify.VCol(cols="6"):
439+
vuetify.VSelect(
438440
# Color By
439441
label="Color by",
440442
v_model=("mesh_color_array_idx", 0),
@@ -446,8 +448,8 @@ def mesh_card():
446448
outlined=True,
447449
classes="pt-1",
448450
)
449-
with vuetify3.VCol(cols="6"):
450-
vuetify3.VSelect(
451+
with vuetify.VCol(cols="6"):
452+
vuetify.VSelect(
451453
# Color Map
452454
label="Colormap",
453455
v_model=("mesh_color_preset", LookupTable.Rainbow),
@@ -467,7 +469,7 @@ def mesh_card():
467469
outlined=True,
468470
classes="pt-1",
469471
)
470-
vuetify3.VSlider(
472+
vuetify.VSlider(
471473
# Opacity
472474
v_model=("mesh_opacity", 1.0),
473475
min=0,
@@ -482,7 +484,7 @@ def mesh_card():
482484

483485
def contour_card():
484486
with ui_card(title="Contour", ui_name="contour"):
485-
vuetify3.VSelect(
487+
vuetify.VSelect(
486488
# Contour By
487489
label="Contour by",
488490
v_model=("contour_by_array_idx", 0),
@@ -494,7 +496,7 @@ def contour_card():
494496
outlined=True,
495497
classes="pt-1",
496498
)
497-
vuetify3.VSlider(
499+
vuetify.VSlider(
498500
# Contour Value
499501
v_model=("contour_value", contour_value),
500502
min=("contour_min", default_min),
@@ -505,7 +507,7 @@ def contour_card():
505507
hide_details=True,
506508
dense=True,
507509
)
508-
vuetify3.VSelect(
510+
vuetify.VSelect(
509511
# Representation
510512
v_model=("contour_representation", Representation.Surface),
511513
items=(
@@ -525,9 +527,9 @@ def contour_card():
525527
outlined=True,
526528
classes="pt-1",
527529
)
528-
with vuetify3.VRow(classes="pt-2", dense=True):
529-
with vuetify3.VCol(cols="6"):
530-
vuetify3.VSelect(
530+
with vuetify.VRow(classes="pt-2", dense=True):
531+
with vuetify.VCol(cols="6"):
532+
vuetify.VSelect(
531533
# Color By
532534
label="Color by",
533535
v_model=("contour_color_array_idx", 0),
@@ -539,8 +541,8 @@ def contour_card():
539541
outlined=True,
540542
classes="pt-1",
541543
)
542-
with vuetify3.VCol(cols="6"):
543-
vuetify3.VSelect(
544+
with vuetify.VCol(cols="6"):
545+
vuetify.VSelect(
544546
# Color Map
545547
label="Colormap",
546548
v_model=("contour_color_preset", LookupTable.Rainbow),
@@ -560,7 +562,7 @@ def contour_card():
560562
outlined=True,
561563
classes="pt-1",
562564
)
563-
vuetify3.VSlider(
565+
vuetify.VSlider(
564566
# Opacity
565567
v_model=("contour_opacity", 1.0),
566568
min=0,
@@ -577,26 +579,26 @@ def contour_card():
577579
# GUI
578580
# -----------------------------------------------------------------------------
579581

580-
with SinglePageWithDrawerLayout(server) as layout:
582+
with SinglePageWithDrawerLayout(server, theme=("theme", "light")) as layout:
581583
layout.title.set_text("Viewer")
582584

583585
with layout.toolbar:
584586
# toolbar components
585-
vuetify3.VSpacer()
586-
vuetify3.VDivider(vertical=True, classes="mx-2")
587+
vuetify.VSpacer()
588+
vuetify.VDivider(vertical=True, classes="mx-2")
587589
standard_buttons()
588590

589591
with layout.drawer as drawer:
590592
# drawer components
591593
drawer.width = 325
592594
pipeline_widget()
593-
vuetify3.VDivider(classes="mb-2")
595+
vuetify.VDivider(classes="mb-2")
594596
mesh_card()
595597
contour_card()
596598

597599
with layout.content:
598600
# content components
599-
with vuetify3.VContainer(
601+
with vuetify.VContainer(
600602
fluid=True,
601603
classes="pa-0 fill-height",
602604
):

0 commit comments

Comments
 (0)