Starter code I have been using for most new apps

wave_started_app.py

from h2o_wave import main, app, Q, ui, handle_on, on, data
from loguru import logger


def on_startup():
    """
    Runs when the app is started, even if there are no browsers connected
    :return:
    """
    logger.info('http://localhost:10101/')


@app('/', on_startup=on_startup)
async def serve(q: Q):
    """
    Routes user requests

    :param q: query, any information about the browser request or the server state
    :return:
    """
    logger.debug(q.args)

    if not q.client.initialized:
        initialize_new_client(q)

    await handle_on(q)  # handle any events, buttons, etc.
    await q.page.save()  # save content to show in browsers


def initialize_new_client(q: Q):
    """
    Setups up the application for each new browser tab, runs once per tab

    :param q: query, any information about the browser request or the server state
    :return:
    """
    logger.debug('')

    render_main_view(q)

    q.client.theme = 'light'
    q.client.initialized = True


@on()
async def color_theme(q: Q):
    """
    Handles user request to change from light to dark mode and vice versa

    :param q: query, any information about the browser request or the server state
    :return:
    """
    logger.debug('')

    if q.client.theme == 'light':
        q.page['header'].commands[0].label = 'Light Mode'
        q.client.theme = 'neon'

    elif q.client.theme == 'neon':
        q.page['header'].commands[0].label = 'Dark Mode'
        q.client.theme = 'light'

    q.page['meta'].theme = q.client.theme


def render_main_view(q: Q):
    """
    UI elements that will be consistent within the whole app

    :param q: query, any information about the browser request or the server state
    :return:
    """

    q.page['meta'] = ui.meta_card(
        box='',
        title='My Testing App',
        theme=q.client.theme,
        layouts=[
            ui.layout(
                breakpoint='xs',
                zones=[
                    ui.zone('header'),
                    ui.zone('body', direction=ui.ZoneDirection.COLUMN, zones=[
                        ui.zone('sidebar'),
                        ui.zone('content')
                    ]),
                    ui.zone('footer'),
                ]
            ),
            ui.layout(
                breakpoint='xl',
                width='1200px',
                zones=[
                    ui.zone('header'),
                    ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[
                        ui.zone('sidebar', size='30%'),
                        ui.zone('content', size='70%'),
                    ]),
                    ui.zone('footer'),
                ]
            ),
        ]
    )
    q.page['header'] = ui.header_card(
        box='header',
        title='My Testing App',
        subtitle='chickity china the chinese chicken',
        commands=[
            ui.command(name='color_theme', label='Dark Mode'),
        ]
    )
    q.page['footer'] = ui.footer_card(
        box='footer',
        caption='Made with 💛 using [H2O Wave](https://github.com/h2oai/wave)!'
    )