theme_dropdown.py

import os
import pathlib

from gradio.themes.utils.semver_match import ThemeAsset


def create_theme_dropdown():
    import gradio as gr

    asset_path = pathlib.Path(__file__).parent / "themes"
    themes = []
    for theme_asset in os.listdir(str(asset_path)):
        themes.append(
            (ThemeAsset(theme_asset), gr.Theme.load(str(asset_path / theme_asset)))
        )

    def make_else_if(theme_asset):
        return f"""
        else if (theme == '{str(theme_asset[0].version)}') {{
            var theme_css = `{theme_asset[1]._get_theme_css()}`
        }}"""

    head, tail = themes[0], themes[1:]
    if_statement = f"""
        if (theme == "{str(head[0].version)}") {{
            var theme_css = `{head[1]._get_theme_css()}`
        }} {" ".join(make_else_if(t) for t in tail)}
    """

    latest_to_oldest = sorted([t[0] for t in themes], key=lambda asset: asset.version)[
        ::-1
    ]
    latest_to_oldest = [str(t.version) for t in latest_to_oldest]

    component = gr.Dropdown(
        choices=latest_to_oldest,
        value=latest_to_oldest[0],
        render=False,
        label="Select Version",
    ).style(container=False)

    return (
        component,
        f"""
        (theme) => {{
            if (!document.querySelector('.theme-css')) {{
                var theme_elem = document.createElement('style');
                theme_elem.classList.add('theme-css');
                document.head.appendChild(theme_elem);
            }} else {{
                var theme_elem = document.querySelector('.theme-css');
            }}
            {if_statement}
            theme_elem.innerHTML = theme_css;
        }}
    """,
    )