feat: support theming solara

solara/lab/components/__init__.py

@@ -3,3 +3,4 @@
 from .input_date import InputDate, InputDateRange  # noqa: F401
 from .menu import ClickMenu, ContextMenu, Menu  # noqa: F401 F403
 from .tabs import Tab, Tabs  # noqa: F401
+from .theming import ThemeToggle, theme  # noqa: F401

solara/lab/components/theming.py

@@ -0,0 +1,67 @@
+import ipyvuetify.Themes
+from ipywidgets import Widget
+from traitlets import Bool, Unicode
+
+import solara
+import solara.server.settings as settings
+from solara.server.settings import ThemeVariant
+from solara.tasks import Proxy
+
+try:
+    # the default ctor gets in the way, we should fix
+    # this in ipyvuetify
+    del ipyvuetify.Themes.Theme.__init__
+except AttributeError:
+    pass
+
+
+# We override ipyvuetify theming
+class Theme(Widget):
+    """
+    A class to override the ipyvuetify theming.
+    """
+
+    _model_name = Unicode("ThemeModel").tag(sync=True)
+
+    _model_module = Unicode("jupyter-vuetify").tag(sync=True)
+
+    dark = Bool(settings.theme.variant == ThemeVariant.dark, allow_none=True).tag(sync=True)
+
+    def __init__(self):
+        super().__init__()
+
+        self.themes = Proxy(ipyvuetify.Themes.Themes)
+
+
+@solara.component
+def ThemeToggle(
+    on_icon: str = "mdi-weather-night",
+    off_icon: str = "mdi-weather-sunny",
+):
+    """
+    Insert a toggle switch for user to switch between light and dark themes.
+
+    ```solara
+    import solara.lab
+
+    @solara.component
+    def Page():
+        solara.lab.ThemeToggle()
+    ```
+
+    ## Arguments
+    - `dark`: A boolean value indicating whether the dark theme is enabled. Defaults to a predefined reactive variable set in `solara.server.settings`,
+        `dark = solara.reactive(settings.theme.variant == ThemeVariant.dark)`.
+    - `on_icon`: The icon to display when the dark theme is enabled.
+    - `off_icon`: The icon to display when the dark theme is disabled.
+    """
+
+    def set_theme(*args):
+        theme.dark = not theme.dark
+
+    solara.v.Checkbox(on_icon=on_icon, off_icon=off_icon, v_model=theme.dark, on_v_model=set_theme)
+
+
+theme = Proxy(Theme)
+
+ipyvuetify.Themes.theme = theme

solara/website/pages/api/__init__.py

@@ -124,6 +124,7 @@
             "tab",
             "tabs",
             "task",
+            "theming",
             "use_task",
         ],
     },

solara/website/pages/api/theming.py

@@ -0,0 +1,32 @@
+"""
+# Themes in Solara
+
+Theming is provided to Solara through the `ipyvuetify` package. Two themes are provided by default: light and dark.
+Control over the theme variant is provided to the user through the `ThemeToggle` component.
+
+## Themes
+
+The default themes can be customized through altering `solara.lab.theme`. The [theme options of vuetify]
+(https://v2.vuetifyjs.com/en/features/theme/#customizing)
+are available as `solara.lab.theme.themes.light` and `solara.lab.theme.themes.dark`. The different properties of the theme can be set through, for example
+
+```python
+solara.lab.theme.themes.light.primary = "#3f51b5"
+```
+
+Dark theme can be enabled/disabled through `solara.lab.theme.dark = True` / `False`.
+
+**important**: In order for the custom theme to take effect, it needs to be included in the page, for example by using the `solara.lab.NonVisual` component.
+
+## ThemeToggle
+
+"""
+
+import solara
+from solara.website.utils import apidoc
+
+from . import NoPage
+
+title = "Themes"
+Page = NoPage
+__doc__ += apidoc(solara.lab.ThemeToggle)  # type: ignore