CODEWITHSUNDEEP
pythondjango
Bibek Khatri
Bibek Khatri

Reputation: 302

Django Admin Theming

My Django admin dashboard is loading with a dark theme. I don't have any extensions for dark themes installed into my browser. How can I revert it to the light theme? Currently, my admin area is in this state:

django admin image

Any help would be greatly appreciated

Upvotes: 7

Views: 4763

Answers (1)

Resley Rodrigues
Resley Rodrigues

Reputation: 2288

As of Django 3.2, there is dark theme support which respects the system preference.
Since your system is set to dark mode, it uses the dark theme for the admin. Most people would consider this to be a good thing as users that are used to dark don't get the light theme site, and vice versa.

If you'd still want to change it you can add a admin/base.html template override to your project:

{% extends 'admin/base.html' %}

{% block extrahead %}{{ block.super }}
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #79aec8;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);

    --link-fg: #447e9b;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;      
    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8;
    --selected-bg: #e4e4e4;
    --selected-row: #ffc;

    --close-button-bg: #888;
    --close-button-hover-bg: #747474;
  }
}
</style>
{% endblock %}

It is essentially the same as putting the default color inside the dark theme as well (would be better to just remove the dark theme colors but I don't think you can). The CSS was taken from Django's source code on GitHub. Refer to the Django docs for more help.

Upvotes: 11

Related Questions