Theme and Headers API Reference

To get headers with a default theme use hdrs=Theme.<color>.headers(). For example for the blue theme you would use hdrs=Theme.blue.headers(). The theme integrated together different frameworks and allows tailwind, FrankenUI, HighlighJS, and DaisyUI components to work well together.

Tailwind, FrankenUI and DaisyUI are imported by default. You must use DaisyUI headers to use anything in the daisy module, and FrankenUI headers to use anything in the franken module.

HighlightJS is not added by default, but you can add it by setting highlightjs=True in the headers function. The render_md function will use HighlightJS for code blocks.

Theme options are:

Theme.slate

Theme.stone

Theme.gray

Theme.neutral

Theme.red

Theme.rose

Theme.orange

Theme.green

Theme.blue

Theme.yellow

Theme.violet

Theme.zinc

Theme Picker

ThemePicker

Source 
ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[])

Theme picker component with configurable sections

Params

  • color

  • radii

  • shadows

  • font

  • mode

  • cls

  • custom_themes

Custom Themes

  1. You can use this theme as a starting point.
  2. Add the theme to your headers as a link like this Link(rel="stylesheet", href="/custom_theme.css", type="text/css")
  3. Then add the theme to the ThemePicker component. For example ThemePicker(custom_themes=[('Grass', '#10b981')])

Themes are controlled with bg-background text-foreground classes on the Body tag. fast_app and FastHTML will do this for you automatically so you typically do not have to do anything

fast_app

Source 
fast_app(*args, pico=False, db_file: Optional[str] = None, render: Optional[<built-in function callable>] = None, hdrs: Optional[tuple] = None, ftrs: Optional[tuple] = None, tbls: Optional[dict] = None, before: Union[tuple, NoneType, fasthtml.core.Beforeware] = None, middleware: Optional[tuple] = None, live: bool = False, debug: bool = False, title: str = 'FastHTML page', routes: Optional[tuple] = None, exception_handlers: Optional[dict] = None, on_startup: Optional[<built-in function callable>] = None, on_shutdown: Optional[<built-in function callable>] = None, lifespan: Optional[<built-in function callable>] = None, default_hdrs=True, surreal: Optional[bool] = True, htmx: Optional[bool] = True, exts: Union[list, str, NoneType] = None, canonical: bool = True, secret_key: Optional[str] = None, key_fname: str = '.sesskey', session_cookie: str = 'session_', max_age: int = 31536000, sess_path: str = '/', same_site: str = 'lax', sess_https_only: bool = False, sess_domain: Optional[str] = None, htmlkw: Optional[dict] = None, bodykw: Optional[dict] = None, reload_attempts: Optional[int] = 1, reload_interval: Optional[int] = 1000, static_path: str = '.', body_wrap: <built-in function callable> = <function noop_body at 0x7526eba6fce0>, nb_hdrs: bool = False)

Create a FastHTML or FastHTMLWithLiveReload app with bg-background text-foreground to bodykw for frankenui themes

Params

  • db_file Database file name, if needed

  • render Function used to render default database class

  • hdrs Additional FT elements to add to

  • ftrs Additional FT elements to add to end of

  • tbls Experimental mapping from DB table names to dict table definitions

  • before Functions to call prior to calling handler

  • middleware Standard Starlette middleware

  • live Enable live reloading

  • debug Passed to Starlette, indicating if debug tracebacks should be returned on errors

  • title Default page title

  • routes Passed to Starlette

  • exception_handlers Passed to Starlette

  • on_startup Passed to Starlette

  • on_shutdown Passed to Starlette

  • lifespan Passed to Starlette

  • default_hdrs Include default FastHTML headers such as HTMX script?

  • pico Include PicoCSS header?

  • surreal Include surreal.js/scope headers?

  • htmx Include HTMX header?

  • exts HTMX extension names to include

  • canonical Automatically include canonical link?

  • secret_key Signing key for sessions

  • key_fname Session cookie signing key file name

  • session_cookie Session cookie name

  • max_age Session cookie expiry time

  • sess_path Session cookie path

  • same_site Session cookie same site policy

  • sess_https_only Session cookie HTTPS only?

  • sess_domain Session cookie domain

  • htmlkw Attrs to add to the HTML tag

  • bodykw Attrs to add to the Body tag

  • reload_attempts Number of reload attempts when live reloading

  • reload_interval Time between reload attempts in ms

  • static_path Where the static file route points to, defaults to root dir

  • body_wrap FT wrapper for body contents

  • nb_hdrs If in notebook include headers inject headers in notebook DOM?

  • args

FastHTML

Source 
FastHTML(*args, pico=False, debug=False, routes=None, middleware=None, title: str = 'FastHTML page', exception_handlers=None, on_startup=None, on_shutdown=None, lifespan=None, hdrs=None, ftrs=None, exts=None, before=None, after=None, surreal=True, htmx=True, default_hdrs=True, sess_cls=<class 'starlette.middleware.sessions.SessionMiddleware'>, secret_key=None, session_cookie='session_', max_age=31536000, sess_path='/', same_site='lax', sess_https_only=False, sess_domain=None, key_fname='.sesskey', body_wrap=<function noop_body at 0x7526eba6fce0>, htmlkw=None, nb_hdrs=False, canonical=True)

Create a FastHTML app and adds bg-background text-foreground to bodykw for frankenui themes

Params

  • debug

  • routes

  • middleware

  • title

  • exception_handlers

  • on_startup

  • on_shutdown

  • lifespan

  • hdrs

  • ftrs

  • exts

  • before

  • after

  • surreal

  • htmx

  • default_hdrs

  • sess_cls

  • secret_key

  • session_cookie

  • max_age

  • sess_path

  • same_site

  • sess_https_only

  • sess_domain

  • key_fname

  • body_wrap

  • htmlkw

  • nb_hdrs

  • canonical

  • args

  • pico

Users have said this site is helpful in creating your own themes.