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
def ex_theme_switcher():
return ThemePicker()
ThemePicker
SourceThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4')
Theme picker component with configurable sections
color
radii
shadows
font
mode
cls
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
Sourcefast_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, 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, 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 0x7f3253819b20>, nb_hdrs: bool = False)
Create a FastHTML or FastHTMLWithLiveReload app with
bg-background text-foreground
to bodykw for frankenui themes
db_file
Database file name, if neededrender
Function used to render default database classhdrs
Additional FT elements to add toftrs
Additional FT elements to add to end oftbls
Experimental mapping from DB table names to dict table definitionsbefore
Functions to call prior to calling handlermiddleware
Standard Starlette middlewarelive
Enable live reloadingdebug
Passed to Starlette, indicating if debug tracebacks should be returned on errorsroutes
Passed to Starletteexception_handlers
Passed to Starletteon_startup
Passed to Starletteon_shutdown
Passed to Starlettelifespan
Passed to Starlettedefault_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 includesecret_key
Signing key for sessionskey_fname
Session cookie signing key file namesession_cookie
Session cookie namemax_age
Session cookie expiry timesess_path
Session cookie pathsame_site
Session cookie same site policysess_https_only
Session cookie HTTPS only?sess_domain
Session cookie domainhtmlkw
Attrs to add to the HTML tagbodykw
Attrs to add to the Body tagreload_attempts
Number of reload attempts when live reloadingreload_interval
Time between reload attempts in msstatic_path
Where the static file route points to, defaults to root dirbody_wrap
FT wrapper for body contentsnb_hdrs
If in notebook include headers inject headers in notebook DOM?args
FastHTML
SourceFastHTML(*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 0x7f3253819b20>, htmlkw=None, nb_hdrs=False)
Create a FastHTML app and adds
bg-background text-foreground
to bodykw for frankenui themes
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
args
pico