Customizing the Django Admin's CSS (mostly its colors)
pip install django-admin-colorsThe following instructions are necessary to make django-admin-colors work.
INSTALLED_APPS = [
...,
'admincolors'
]
# Choose a base theme
# If empty or not set, the first option of ADMIN_COLORS will be chosen
ADMIN_COLORS_BASE_THEME = 'Gray'
# These are the "builtin" django-admin-colors themes
ADMIN_COLORS = [
('Default', []),
('Lite', 'admincolors/css/lite.css'),
('Dark Blue', 'admincolors/css/dark-blue.css'),
('Gray', 'admincolors/css/gray.css')
]
# TEMPLATES configuration
# PS: Don't override your current settings,
# copy or change only what's necessary
TEMPLATES = [
{
...,
'DIRS': [
# IMPORTANT: needed to override the django admin's base templates.
os.path.join(BASE_DIR, 'templates')
],
# IMPORTANT: needed to load admincolors' templates
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
...,
# IMPORTANT: needed to make the "theme" and "themes" context
# variables available for the templates
'admincolors.context_processors.admin_theme'
],
},
},
]Create a new folder: BASE_DIR/templates.
File: BASE_DIR/templates/admin/base_site.html
{% extends 'admincolors/base_site.html' %}File: BASE_DIR/templates/admin/base_site.html
{% extends "admin/base_site.html" %}
{% load admincolors %}
{% block blockbots %}
{{ block.super }}
{% colors_styles theme themes %}
{% endblock %}
{% block footer %}
{{ block.super }}
{% colors_scripts %}
{% endblock %}File: BASE_DIR/templates/admin/index.html
{% extends 'admincolors/index.html' %}File: BASE_DIR/templates/admin/index.html
{% extends "admin/index.html" %}
{% load admincolors %}
{% block breadcrumbs %}
{% if themes|length > 1 %}
<div class="breadcrumbs">
{% colors_breadcrumbs theme themes %}
</div>
{% endif %}
{% endblock %}To add a custom theme, simply create a .css file anywhere in your static files, then add its full path (and the theme's name) to the ADMIN_COLORS variable in settings.py:
ADMIN_COLORS = [
...,
('My Theme', 'path/to/my/theme.css')
]You can also set multiple css files to your theme (or add a custom .css to an existing one):
ADMIN_COLORS = [
...,
('Gray', ('admincolors/css/gray.css', 'path/to/my/custom/file.css')),
('My Theme', ('path/to/my/theme.css', 'path/to/another/file.css'))
]See the Django documentation about: