Theming#

Viser includes support for light theming.

 1import time
 2
 3import viser
 4from viser.theme import TitlebarButton, TitlebarConfig, TitlebarImage
 5
 6
 7def main():
 8    server = viser.ViserServer(label="Viser Theming")
 9
10    buttons = (
11        TitlebarButton(
12            text="Getting Started",
13            icon=None,
14            href="https://nerf.studio",
15        ),
16        TitlebarButton(
17            text="Github",
18            icon="GitHub",
19            href="https://github.com/nerfstudio-project/nerfstudio",
20        ),
21        TitlebarButton(
22            text="Documentation",
23            icon="Description",
24            href="https://docs.nerf.studio",
25        ),
26    )
27    image = TitlebarImage(
28        image_url_light="https://docs.nerf.studio/_static/imgs/logo.png",
29        image_url_dark="https://docs.nerf.studio/_static/imgs/logo-dark.png",
30        image_alt="NerfStudio Logo",
31        href="https://docs.nerf.studio/",
32    )
33    titlebar_theme = TitlebarConfig(buttons=buttons, image=image)
34
35    server.gui.add_markdown(
36        "Viser includes support for light theming via the `.configure_theme()` method."
37    )
38
39    gui_theme_code = server.gui.add_markdown("no theme applied yet")
40
41    # GUI elements for controllable values.
42    titlebar = server.gui.add_checkbox("Titlebar", initial_value=True)
43    dark_mode = server.gui.add_checkbox("Dark mode", initial_value=True)
44    show_logo = server.gui.add_checkbox("Show logo", initial_value=True)
45    show_share_button = server.gui.add_checkbox("Show share button", initial_value=True)
46    brand_color = server.gui.add_rgb("Brand color", (230, 180, 30))
47    control_layout = server.gui.add_dropdown(
48        "Control layout", ("floating", "fixed", "collapsible")
49    )
50    control_width = server.gui.add_dropdown(
51        "Control width", ("small", "medium", "large"), initial_value="medium"
52    )
53    synchronize = server.gui.add_button("Apply theme", icon=viser.Icon.CHECK)
54
55    def synchronize_theme() -> None:
56        server.gui.configure_theme(
57            titlebar_content=titlebar_theme if titlebar.value else None,
58            control_layout=control_layout.value,
59            control_width=control_width.value,
60            dark_mode=dark_mode.value,
61            show_logo=show_logo.value,
62            show_share_button=show_share_button.value,
63            brand_color=brand_color.value,
64        )
65        gui_theme_code.content = f"""
66            ### Current applied theme
67            ```
68            server.gui.configure_theme(
69                titlebar_content={"titlebar_content" if titlebar.value else None},
70                control_layout="{control_layout.value}",
71                control_width="{control_width.value}",
72                dark_mode={dark_mode.value},
73                show_logo={show_logo.value},
74                show_share_button={show_share_button.value},
75                brand_color={brand_color.value},
76            )
77            ```
78        """
79
80    synchronize.on_click(lambda _: synchronize_theme())
81    synchronize_theme()
82
83    while True:
84        time.sleep(10.0)
85
86
87# main()
88if __name__ == "__main__":
89    main()