Skip to main content

Create reusable DaisyUI themes through Wagtail

Project description

Wagtail DaisyUI Interface Editor

Create reusable DaisyUI themes through Wagtail and apply them to pages.

Links

Supported versions

This package supports Wagtail 7.0 and up, and all compatible versions of Python and Django.

Installation

Pick the command for your preferred package installer:

uv add wagtail-daisIE
poetry add wagtail-daisIE
pip install wagtail-daisIE

Quick start

1. Add to INSTALLED_APPS

# myproject/settings.py
INSTALLED_APPS = [
    ...
    "wagtail_daisIE",
    "colorfield",
    ...
]

2. Run migrations

python manage.py migrate

3. Create a theme

In the Wagtail admin, navigate to Snippets > DaisyUI Themes and create a new theme. Configure:

  • Name: A unique identifier (e.g. my-theme)
  • Set as default: Check this to make it the fallback theme
  • Color scheme: light, dark, or normal
  • Colors: Primary, secondary, accent, neutral, base surfaces, semantic colors
  • Border radii: Box, field, selector
  • Sizes: Field, selector, border width
  • Effects: Depth (3D) and noise toggle

4. Use the page mixin

Add DaisyUIThemePageMixin to any Wagtail Page model:

from wagtail.models import Page
from wagtail.admin.panels import FieldPanel
from wagtail_daisIE.models import DaisyUIThemePageMixin


class MyPage(DaisyUIThemePageMixin, Page):
    body = RichTextField()

    content_panels = Page.content_panels + [
        FieldPanel("body"),
        FieldPanel("daisyui_theme"),  # Add the theme selector
    ]

This mixin adds:

  • A daisyui_theme ForeignKey field to DaisyUITheme
  • Automatic injection of daisyui_theme into the page template context
  • A get_daisyui_theme() method that returns the selected theme (or the default theme if none is selected)

5. Render the theme in your templates

Load the template tags and render the theme CSS in <head>:

{% load wagtailcore_tags wagtail_daisIE_tags %}
<!DOCTYPE html>
<html{% if daisyui_theme %} data-theme="{{ daisyui_theme.name }}"{% endif %}>
    <head>
        ...
        {% daisyui_theme_css daisyui_theme %}
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

The {% daisyui_theme_css %} tag outputs an inline <style> block with all DaisyUI CSS custom properties for the theme.

Alternatively, use {% daisyui_theme_inline_css %} to get the raw CSS string for custom placement:

<style>
{% daisyui_theme_inline_css daisyui_theme %}
</style>

6. Load DaisyUI and Tailwind CSS

Add DaisyUI and Tailwind CSS to your base template. For a quick setup, use the CDN:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Or use Django Tailwind CLI:

# settings.py
STATICFILES_DIRS = [BASE_DIR / "assets"]
# Custom CSS paths
TAILWIND_CLI_SRC_CSS = "src/styles/main.css"
TAILWIND_CLI_DIST_CSS = "css/app.css"

# Enable DaisyUI
TAILWIND_CLI_USE_DAISY_UI = True

# Use an already-installed Tailwind binary (e.g. `brew install tailwindcss`)
TAILWIND_CLI_USE_SYSTEM_BINARY = True

# Auto-inject @source directives for editable-installed external apps (opt-in)
TAILWIND_CLI_AUTO_SOURCE_EXTERNAL_APPS = True

Or install via npm and build with your own pipeline:

npm install daisyui @tailwindcss/cli tailwindcss

API reference

DaisyUIThemePageMixin

An abstract Django model mixin for Wagtail Pages.

Fields:

Field Type Description
daisyui_theme ForeignKey(DaisyUITheme) The selected theme, or None

Methods:

Method Returns Description
get_daisyui_theme() DaisyUITheme | None Returns the selected theme, or the default theme if none was selected

Context:

Variable Type Description
daisyui_theme DaisyUITheme | None Available in all page templates

Template tags

Tag Type Output
{% daisyui_theme_css theme %} Inclusion tag Inline <style> block with DaisyUI CSS custom properties
{% daisyui_theme_inline_css theme %} Simple tag Raw CSS string for custom placement

DaisyUITheme

A snippet model representing a DaisyUI theme. Accessible via Snippets in the Wagtail admin.

Properties: name, default, prefers_dark, color_scheme, colors, radii, sizes, effects.

Settings

No Django settings are required. The package works out of the box once added to INSTALLED_APPS.

Development

See CONTRIBUTING.md for development setup and contribution workflow.

Key commands (via just):

just install     # Install Python and Node.js dependencies
just demo        # Run the demo site
just test        # Run tests
just lint        # Run all linters

License

wagtail-daisIE is licensed under the BSD 3-Clause License.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

wagtail_daisie-0.1.2.tar.gz (17.1 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

wagtail_daisie-0.1.2-py3-none-any.whl (21.8 kB view details)

Uploaded Python 3

File details

Details for the file wagtail_daisie-0.1.2.tar.gz.

File metadata

  • Download URL: wagtail_daisie-0.1.2.tar.gz
  • Upload date:
  • Size: 17.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.13

File hashes

Hashes for wagtail_daisie-0.1.2.tar.gz
Algorithm Hash digest
SHA256 5324e1c39f9b208cd604e17432def7e8943775acf50e60b2bfd3d2590ed67d3e
MD5 88792fdca7110b84882ec4b4374075ae
BLAKE2b-256 aa2d7ea97e1dc2d8d0670003c7cc3de12eb5a32ce65d9ce5da9800ea6c8a128c

See more details on using hashes here.

Provenance

The following attestation bundles were made for wagtail_daisie-0.1.2.tar.gz:

Publisher: publish.yml on baldwinboy/wagtail-daisIE

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file wagtail_daisie-0.1.2-py3-none-any.whl.

File metadata

  • Download URL: wagtail_daisie-0.1.2-py3-none-any.whl
  • Upload date:
  • Size: 21.8 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.13

File hashes

Hashes for wagtail_daisie-0.1.2-py3-none-any.whl
Algorithm Hash digest
SHA256 c8e82eaa6aba16c2699ab831b433a9ae87e58602f5f3c6e00761ff23d34729d2
MD5 b3ac41f1881cda162a9d1e67ce769b08
BLAKE2b-256 39a39a7c294233542bf2d825973148a93a75869879b0b2fe86d2fc79f77eda7f

See more details on using hashes here.

Provenance

The following attestation bundles were made for wagtail_daisie-0.1.2-py3-none-any.whl:

Publisher: publish.yml on baldwinboy/wagtail-daisIE

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page