Function page

demos/theme.py:333–384

PyWebIO Theme Preview

()

@config(css_style=style)
def page():
    """PyWebIO Theme Preview"""

    theme = eval_js("new URLSearchParams(window.location.search).get('app')")
    if theme not in ALL_THEME:
        theme = 'default'

    put_html(f"""
    <div class="page-header">
        <div style="text-align: center">
            <h1>{theme[0].upper() + theme[1:]}</h1>
            <p class="lead">{THEME_SUMMARY.get(theme, '')}</p>
        </div>
      </div>
    """)

    put_markdown('# Switch Theme')
    themes = [
        put_image(f"https://fastly.jsdelivr.net/gh/wang0618/PyWebIO@dev/docs/assets/theme/{name}.png").onclick(
            partial(go_app, name=name, new_window=False))
        for name in ALL_THEME if name != theme
    ]
    if info.user_agent.is_mobile:
        put_table([themes[:2], themes[2:]])
    else:
        put_table([themes])

    if theme != 'default':
        put_markdown(f"""
        ### Usage
        Use `pywebio.config()` to apply this theme:
        
        ```python
        @config(theme="{theme}")
        def main():
            put_text("hello world")
        
        start_server(main, port=8080)
        ```
        """)

    put_markdown("""
    ### Credits
    
    The dark theme is modified from ForEvolve&#x27;s [bootstrap-dark](https://github.com/ForEvolve/bootstrap-dark).
    The sketchy, minty and yeti theme are from [bootswatch](https://bootswatch.com/4/).
    """)

    set_env(input_panel_min_height=100, input_panel_init_height=190)
    output_widgets()
    pin_widgets()
    form()


# bind each theme to the app