# Theme and Headers API Reference To get headers with a default theme use `hdrs=Theme..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 See Source See Output ZincSlateStoneGrayNeutralRedRoseOrangeGreenBlueYellowVioletNoneSmallMediumLargeNoneSmallMediumLargeSmallDefaultLightDark [code] def ex_theme_switcher(): return ThemePicker() [/code] ### ThemePicker Source [code] ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[]) [/code] > 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 [code] fast_app(*args, pico=False, db_file: Optional[str] = None, render: Optional[] = 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[] = None, on_shutdown: Optional[] = None, lifespan: Optional[] = 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: = , nb_hdrs: bool = False) [/code] > 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 [code] 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=, 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=, htmlkw=None, nb_hdrs=False, canonical=True) [/code] > 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.