6.10. Admin Templates

6.10.1. Setup

Add BASE_DIR / 'myproject' / 'templates' to 'DIRS' in your TEMPLATES setting. This will allow you to override the admin templates.

Modify myproject/settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'myproject' / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

File myproject/templates/admin/base_site.html:

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

{% block extrastyle %}{{ block.super }}
<style>
html[data-theme="light"], :root {
  --primary: #9774d5;
  --secondary: #785cab;
  --link-fg: #7c449b;
  --link-selected-fg: #8f5bb2;
}
</style>
{% endblock %}

6.10.2. Admin Templates

Code 6.3. Django 5.0
templates/
├── admin
│   ├── 404.html
│   ├── 500.html
│   ├── actions.html
│   ├── app_index.html
│   ├── app_list.html
│   ├── auth
│   │   └── user
│   │       ├── add_form.html
│   │       └── change_password.html
│   ├── base.html
│   ├── base_site.html
│   ├── change_form.html
│   ├── change_form_object_tools.html
│   ├── change_list.html
│   ├── change_list_object_tools.html
│   ├── change_list_results.html
│   ├── color_theme_toggle.html
│   ├── date_hierarchy.html
│   ├── delete_confirmation.html
│   ├── delete_selected_confirmation.html
│   ├── edit_inline
│   │   ├── stacked.html
│   │   └── tabular.html
│   ├── filter.html
│   ├── includes
│   │   ├── fieldset.html
│   │   └── object_delete_summary.html
│   ├── index.html
│   ├── invalid_setup.html
│   ├── login.html
│   ├── nav_sidebar.html
│   ├── object_history.html
│   ├── pagination.html
│   ├── popup_response.html
│   ├── prepopulated_fields_js.html
│   ├── search_form.html
│   ├── submit_line.html
│   └── widgets
│       ├── clearable_file_input.html
│       ├── date.html
│       ├── foreign_key_raw_id.html
│       ├── many_to_many_raw_id.html
│       ├── radio.html
│       ├── related_widget_wrapper.html
│       ├── split_datetime.html
│       ├── time.html
│       └── url.html
└── registration
    ├── logged_out.html
    ├── password_change_done.html
    ├── password_change_form.html
    ├── password_reset_complete.html
    ├── password_reset_confirm.html
    ├── password_reset_done.html
    ├── password_reset_email.html
    └── password_reset_form.html

6.10.3. Templates which may be overridden per app or model

  • Not every template in contrib/admin/templates/admin may be overridden per app or per model. The following can:

  • actions.html

  • app_index.html

  • change_form.html

  • change_form_object_tools.html

  • change_list.html

  • change_list_object_tools.html

  • change_list_results.html

  • date_hierarchy.html

  • delete_confirmation.html

  • object_history.html

  • pagination.html

  • popup_response.html

  • prepopulated_fields_js.html

  • search_form.html

  • submit_line.html

6.10.4. Root and Login Templates

If you wish to change the index, login or logout templates, you are better off creating your own AdminSite instance (see below), and changing the AdminSite.index_template, AdminSite.login_template or AdminSite.logout_template properties.

6.10.5. Theming Support

The admin uses CSS variables to define colors and fonts. This allows changing themes without having to override many individual CSS rules. For example, if you preferred purple instead of blue you could add a admin/base .html template override to your project:

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

{% block extrastyle %}{{ block.super }}
<style>
html[data-theme="light"], :root {
  --primary: #9774d5;
  --secondary: #785cab;
  --link-fg: #7c449b;
  --link-selected-fg: #8f5bb2;
}
</style>
{% endblock %}

The list of CSS variables are defined at django/contrib/admin/static/admin/css/base.css.

Dark mode variables, respecting the prefers-color-scheme media query, are defined at django/contrib/admin/static/admin/css/dark_mode.css. This is linked to the document in {% block dark-mode-vars %}.