How to override Django dark mode css?

December 9, 2024

Why settle for the standard blueish look when you can customize it?

The Django admin panel is an essential tool for managing and interacting with your web application’s data. While its default interface is functional , a growing number of developers and administrators prefer working with dark mode due to its visually appealing aesthetics and reduced eye strain during long working hours. But why settle for the standard blueish look when you can customize it?

TL;DR:

Customizing Django admin’s dark mode improves usability, reduces eye strain, and aligns the interface with your branding. To do this, create a custom base.html template in templates/admin/, add an {% block extrahead %}, and override CSS variables like --accent and --primary.

Ready to give your admin panel a modern, eye-friendly makeover? Let’s dive into the steps to make it uniquely yours.

Steps

1. Start by creating a file in your project’s templates directory

mkdir -p templates/admin
touch templates/admin/base.html

2. Add the {% block extrahead %}

This block allows you to add content to the <head> section of the admin page.

Here’s how your base.html should look:

{% extends 'admin/base.html' %}
{% block extrahead %}
    {{ block.super }}
    <style>
        html[data-theme="dark"], :root {
            /* Your custom styles will go here */
        }
    </style>
{% endblock %}

3. Override root variables inside the style block

--secondary: #fff;
--breadcrumbs-bg: #fff;
--accent: #fff;

4. Test your changes and tweak

Run your application to see your changes.

💡 Tip: If something looks off, use your browsers inspect to find the right variables to override!

Conclusion

By following these steps, you can create a unique, polished Django admin interface that enhances usability and aesthetics .

If you have any questions or feedback , feel free to reach out to me here !