Django Admin Theming / Customization

Using Django The Admin
1

I was working on a project, and it turned out that the default admin dashboard that comes out of the box, while great for basic CRUD applications, would not serve for my use case.

Django’s admin templates are also really difficult to customize, and there was also no way for me to create reusable components - like how I would in React. I know that the {% include %} tag can help by giving some basic level of reusability of components, but it means all values and blocks are hardcoded to that template file and cannot be customized/overriden on the fly, not unless you create another template file that extends the component file and overrides the {% block %} sections.

I think you can see how this isn’t scalable if I want multiple variants of a component or I want to dynamically pass different props (i.e, context) to these components.

So I created Django-Palette - a package that makes creating reusable components a breeze using familiar syntax you already know and use.

Features:

  • Multi-component files (multiple components in 1 template file)
  • Block overrides
  • Named component exports
  • React-like prop passing to components
  • It also comes with a beautiful Django admin with bootstrap 5 theme

How It Works:

Define a component with named blocks that can be overridden: using the {% palette_component %} tag which takes 1 argument - the component name

<!-- templates/components/cards.html -->

{% load palette %}

{% palette_component admin_card %}
  <div class="{{ card_css_class }}">
    <div class="card-body">
      {% palette_block card_body %}
        <h5 class="card-title">{{ title }}</h5>
        <p class="card-text">{{ content }}</p>
      {% endpalette_block %}
    </div>
  </div>
{% endpalette_component %}

<!-- templates/<your template elsewhere> -->
{% load palette %}


<!-- use {% palette_ui to render components %} -->
{% palette_ui file="components/cards.html" component="card" with card_css_class="card shadow-sm border-0" %}

<!-- use {% palette_override to override named blocks within a component %} -->
  {% palette_override card_body %}
    <h5 class="card-title">Signed In User</h5>
    <p class="card-text">{{ request.user }}</p>
    <small class="text-muted">Last Login: {{ request.user.last_login }}</small>
  {% endpalette_override %}
{% endpalette_ui %}

It’s basically a template tag library for building UI components in Django. Replacing templates with actual web components.

Resources

Palette Admin Features

  • Dark mode support for the Admin
  • Grid & List view for Model Change List view
  • Sorting & Filtering
  • Searching and Bulk actions