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.2.0.tar.gz (17.5 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.2.0-py3-none-any.whl (22.5 kB view details)

Uploaded Python 3

File details

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

File metadata

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

File hashes

Hashes for wagtail_daisie-0.2.0.tar.gz
Algorithm Hash digest
SHA256 daa73e9608687ba5b642923a05fac1635412423ba90c52115565e8711810a350
MD5 b4e5cef5b8571aee0b2efd222db933f4
BLAKE2b-256 b2aa6b5f7aae51800a2da25cf2052b671188c4475bdf21f2702c3742c9d6742b

See more details on using hashes here.

Provenance

The following attestation bundles were made for wagtail_daisie-0.2.0.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.2.0-py3-none-any.whl.

File metadata

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

File hashes

Hashes for wagtail_daisie-0.2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 1dcadc27b11326b2036b10f64e15ea478623babd6df70ed681b85bd9e7038324
MD5 416e6b87b782dfe37e06de1a4ac18c7f
BLAKE2b-256 23e67efc213b563330a20465be32e28314e9bb0f204020095e49d9da10164d35

See more details on using hashes here.

Provenance

The following attestation bundles were made for wagtail_daisie-0.2.0-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