Django Admin Dark Mode
By: Andre Arruda
Tags: Dark, Django, Admin, Dark Mode, Python

Eu sou apaixonado pelo dark mode, meus olhos agradecem

Falaaaaa, galera.

Criei esse pequeno tutorial de como criar um dark mode no django admin

O django , como você já sabe, é um framework muito poderoso para fazer aplicação web usando python .

E dentro desse framework, vem uma ferramenta de admin que também é muito poderosa, podendo até criar um mini blog, controle de vendas e tudo que há de bom.

Eu gosto desse admin pois já vem muita coisa pronta, então nem precisa esquentar a cabeça se quiser fazer uma coisa bem simples.

Eu sou uma pessoa que gosta de personalização e me deparei com o django-admin-interface .

Com esse pacote, dá para criar temas para o admin , mas infelizmente não muda o background.

Pode ver em: https://pypi.org/project/django-admin-interface/

Então procurei como colocar o dark mode no admin, e existe um pacote chamado django-dark . Mas ele não permite desabilitar o dark mode.

Pode ver em: https://pypi.org/project/django-dark/

Aí decidi fazer na mão, utilizando JS e CSS.

E deu muito certo. Uhullll

Para isso, me baseei no https://darkmodejs.learn.uno/

Os arquivos necessários estão disponíveis no repositório do meu github:

https://github.com/andre23arruda/django-admin-dark-mode

Bora lá (A partir daqui, estou supondo que no seu projeto django , você já tem uma pasta para seus templates e uma pasta para seus arquivos estáticos)

No começo, seu admin deve estar com essa cara:

Para modificar o template do admin, é necessário adicionar a pasta chamada admin dentro da sua pasta de templates. Dentro da pasta admin (disponível no link) está um template chamado base.html onde adicionei 3 linhas.

A única coisa que precisei adicionar em base.html foi o CSS e os JS que estão em negrito no código abaixo

Sem essas linhas em negrito, o base.html é exatamente o padrão do django-admin

Esse é o arquivo que já está disponível para download

{% load i18n static %}<!DOCTYPE html>

{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}

<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">

<head>

<title>{% block title %}{% endblock %}</title>

<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">

{% if not is_popup and is_nav_sidebar_enabled %}

<link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">

<script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>

{% endif %}

{% block extrastyle %}{% endblock %}

{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}

{% block extrahead %}{% endblock %}

{% block responsive %}

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">

{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}

{% endblock %}

{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}

<link rel="stylesheet" href="{% static 'css/dark-mode.css' %}">

</head>

{% load i18n %}

<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"

data-admin-utc-offset="{% now "Z" %}">

<script src="{% static 'js/dark-mode-init.js' %}"></script>

<!-- Container -->

<div id="container">

{% if not is_popup %}

<!-- Header -->

<div id="header">

<div id="branding">

{% block branding %}{% endblock %}

</div>

{% block usertools %}

{% if has_permission %}

<div id="user-tools">

{% block welcome-msg %}

{% translate 'Welcome,' %}

<strong>{% firstof user.get_short_name user.get_username %}</strong>.

{% endblock %}

{% block userlinks %}

{% if site_url %}

<a href="{{ site_url }}">{% translate 'View site' %}</a> /

{% endif %}

{% if user.is_active and user.is_staff %}

{% url 'django-admindocs-docroot' as docsroot %}

{% if docsroot %}

<a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /

{% endif %}

{% endif %}

{% if user.has_usable_password %}

<a href="{% url 'admin:password_change' %}">{% translate 'Change password' %}</a> /

{% endif %}

<a href="{% url 'admin:logout' %}">{% translate 'Log out' %}</a>

{% endblock %}

</div>

{% endif %}

{% endblock %}

{% block nav-global %}{% endblock %}

</div>

<!-- END Header -->

{% block breadcrumbs %}

<div class="breadcrumbs">

<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>

{% if title %} › {{ title }}{% endif %}

</div>

{% endblock %}

{% endif %}

<div class="main shifted" id="main">

{% if not is_popup and is_nav_sidebar_enabled %}

{% block nav-sidebar %}

{% include "admin/nav_sidebar.html" %}

{% endblock %}

{% endif %}

<div class="content">

{% block messages %}

{% if messages %}

<ul class="messagelist">{% for message in messages %}

<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>

{% endfor %}</ul>

{% endif %}

{% endblock messages %}

<!-- Content -->

<div id="content" class="{% block coltype %}colM{% endblock %}">

{% block pretitle %}{% endblock %}

{% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}

{% block content_subtitle %}{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}{% endblock %}

{% block content %}

{% block object-tools %}{% endblock %}

{{ content }}

{% endblock %}

{% block sidebar %}{% endblock %}

<br class="clear">

</div>

<!-- END Content -->

{% block footer %}<div id="footer"></div>{% endblock %}

</div>

</div>

</div>

<!-- END Container -->

<script src="{% static 'js/dark-mode.js' %}"></script>

</body>

</html>