Theming

webwrench theming uses bitwrench’s palette system. Set a preset theme or define custom colors.

Preset Themes

import webwrench as ww

ww.theme("ocean")
ww.title("Ocean Theme")
ww.serve()

Preset	Description
`"light"`	Default light theme
`"dark"`	Dark background with light text
`"ocean"`	Blue palette (#0077b6 primary)
`"forest"`	Green palette

Custom Colors

ww.theme(primary="#e63946", secondary="#457b9d", background="#f1faee")

Toggle Light/Dark

Use ww.toggle_theme() to switch between light and dark at runtime:

btn = ww.button("Toggle Dark Mode")

@btn.on_click
def toggle():
    ww.toggle_theme()

Custom CSS

Inject custom CSS rules with ww.css():

ww.css({
    ".my-card": {
        "border-radius": "12px",
        "box-shadow": "0 4px 8px rgba(0,0,0,0.1)",
    }
})

Note: webwrench does not create its own CSS variables. All theming goes through bitwrench’s bw.loadStyles() API. This keeps the frontend consistent.

Theme in App Mode

@app.page("/")
def home(ctx):
    ctx.set_theme("dark")
    ctx.title("Dark Dashboard")