{% load theme_tags theme_components static %} Theme Gallery {% theme_head include_js=True %} {% comment %} `|safe` is load-bearing, not a shortcut. Autoescaping rewrites the quotes in the generated CSS to `"`, so `html[data-theme="dark"]` is emitted as `html[data-theme="dark"]` — an invalid selector the browser discards. The `:root` block has no quotes, so it survives, and the page then applies the preset's root values while every dark-mode override falls back to whatever `theme_head` supplied. That reads as "only part of the theme loaded": the preset changes the background but the components keep the configured theme's colours. Safe because the value is generated by `ColorCSSGenerator` from a preset name already validated against the registry (see `_initial_preset`), not interpolated from request data. {% endcomment %}

Theme Gallery

{% comment %} `setPreset` rather than `this.form.submit()`. A GET form changes the preset for that page load only, so removing `?preset=` from the URL fell back to whatever preset the visitor had stored — "I picked midnight, took the parameter off, and it reverted to candy". `window.djustTheme.setPreset` is the framework's own persisting API (theme.js:217): it writes the cookie and localStorage and reloads, so the choice survives, and every other theme control on the site already works this way. The form stays as the no-JS fallback. {% endcomment %}
{# ---- Button ---- #}

Button

Variants

{% theme_button "Primary" variant="primary" %} {% theme_button "Secondary" variant="secondary" %} {% theme_button "Destructive" variant="destructive" %} {% theme_button "Ghost" variant="ghost" %} {% theme_button "Link" variant="link" %}

Sizes

{% theme_button "Small (sm)" variant="primary" size="sm" %} {% theme_button "Medium (md)" variant="primary" size="md" %} {% theme_button "Large (lg)" variant="primary" size="lg" %}
{# ---- Card ---- #}

Card

{% theme_card title="Card Title" body="Card body content goes here." footer="Card footer" %} {% theme_card title="No Footer" body="A card without a footer." %} {% theme_card body="A card with no title or footer." %}
{# ---- Alert ---- #}

Alert

{% theme_alert "This is a default alert." variant="default" title="Default" %} {% theme_alert "Operation successful!" variant="success" title="Success" %} {% theme_alert "Please be careful." variant="warning" title="Warning" %} {% theme_alert "Something went wrong." variant="destructive" title="Destructive" %} {% theme_alert "This alert can be dismissed." variant="default" dismissible=True %}
{# ---- Badge ---- #}

Badge

{% theme_badge "Default" variant="default" %} {% theme_badge "Secondary" variant="secondary" %} {% theme_badge "Success" variant="success" %} {% theme_badge "Warning" variant="warning" %} {% theme_badge "Destructive" variant="destructive" %}
{# ---- Input ---- #}

Input

{% theme_input "gallery_text" label="Text Input" placeholder="Enter text..." type="text" %} {% theme_input "gallery_email" label="Email" placeholder="you@example.com" type="email" %} {% theme_input "gallery_password" label="Password" placeholder="Enter password" type="password" %}
{# ---- Modal ---- #}

Modal

sm {% theme_modal id="gallery-modal-sm" title="Small Modal" size="sm" %}
md {% theme_modal id="gallery-modal-md" title="Medium Modal" size="md" %}
lg {% theme_modal id="gallery-modal-lg" title="Large Modal" size="lg" %}
{# ---- Dropdown ---- #}

Dropdown

{% theme_dropdown id="gallery-dd-left" label="Dropdown (left)" align="left" %} {% theme_dropdown id="gallery-dd-right" label="Dropdown (right)" align="right" %}
{# ---- Tabs ---- #}

Tabs

{% theme_tabs id="gallery-tabs" tabs=tab_data active=0 %}
{# ---- Table ---- #}

Table

{% theme_table headers=table_headers rows=table_rows variant="default" caption="Default Table" %} {% theme_table headers=table_headers rows=table_rows variant="striped" caption="Striped Table" %} {% theme_table headers=table_headers rows=table_rows variant="hover" caption="Hover Table" %}
{# ---- Pagination ---- #}

Pagination

{% theme_pagination current_page=3 total_pages=10 url_pattern="?page={}" %}
{# ---- Select ---- #}

Select

{% theme_select "gallery_select" label="Select Field" options=select_options placeholder="Choose..." %}
{# ---- Textarea ---- #}

Textarea

{% theme_textarea "gallery_textarea" label="Textarea" placeholder="Write something..." rows=4 %}
{# ---- Checkbox ---- #}

Checkbox

{% theme_checkbox "gallery_cb1" label="Accept terms" description="You agree to our terms." %} {% theme_checkbox "gallery_cb2" label="Subscribe to newsletter" %}
{# ---- Radio ---- #}

Radio

{% theme_radio "gallery_radio" label="Choose a size" options=radio_options selected="md" %}
{# ---- Breadcrumb ---- #}

Breadcrumb

{% theme_breadcrumb items=breadcrumb_items separator="/" %} {% theme_breadcrumb items=breadcrumb_items separator=">" %}
{# ---- Avatar ---- #}

Avatar

{% theme_avatar name="Jane Doe" size="sm" %} {% theme_avatar name="Jane Doe" size="md" %} {% theme_avatar name="Jane Doe" size="lg" %}
{# ---- Toast ---- #}

Toast

{% theme_toast "Success toast" variant="success" %} {% theme_toast "Warning toast" variant="warning" %} {% theme_toast "Error toast" variant="error" %} {% theme_toast "Info toast" variant="info" %}
{# ---- Progress ---- #}

Progress

{% theme_progress value=25 max=100 label="25%" %} {% theme_progress value=50 max=100 label="50%" %} {% theme_progress value=75 max=100 label="75%" %} {% theme_progress value=100 max=100 label="100%" %} {% theme_progress label="Indeterminate" %}
{# ---- Skeleton ---- #}

Skeleton

{% theme_skeleton variant="text" width="200px" height="1rem" %} {% theme_skeleton variant="circle" width="3rem" height="3rem" %} {% theme_skeleton variant="rect" width="100%" height="6rem" %}
{# ---- Tooltip ---- #}

Tooltip

{% theme_tooltip "Top tooltip" position="top" slot_content="" %} {% theme_tooltip "Bottom tooltip" position="bottom" slot_content="" %} {% theme_tooltip "Left tooltip" position="left" slot_content="" %} {% theme_tooltip "Right tooltip" position="right" slot_content="" %}
{# ---- Nav Item ---- #}

Nav Item

{% theme_nav_item "Home" "/" active=True %} {% theme_nav_item "About" "/about/" active=False %} {% theme_nav_item "Inbox" "/inbox/" badge="5" %}
{# ---- Nav Group ---- #}

Nav Group

{% theme_nav_group "Admin" items=nav_group_items expanded=True %} {% theme_nav_group "Collapsed" items=nav_group_items expanded=False %}
{# ---- Nav ---- #}

Nav

{% theme_nav brand="MyApp" items=nav_items %}
{# ---- Sidebar Nav ---- #}

Sidebar Nav

{% theme_sidebar_nav sections=sidebar_sections %}