有人可以向我解释为什么我的 django 管理主题是黑暗的吗？

Question

我在 pythonanywhere 上托管我的小项目，托管后我检查它是否正常工作，当我单击 django 管理员时，我的 django 管理员的主题是黑暗的，当我尝试在本地主机上运行时，主题是白色，所以我尝试仔细检查我的静态 url，我认为这很好，顺便说一句，这是我的管理员的静态 url 静态网址：/static/admin，静态目录：/home/k3v1nSocialProject/.virtualenvs/myprojenv/lib/python3.8/site-packages/django/contrib/admin/static/admin。有人可以向我解释发生了什么以及为什么我的 django 管理主题是黑暗的吗？

Answer 1

作为 Django 3.2 版本的一部分，管理员现在有一个基于 prefers-color-scheme 媒体查询应用的深色主题。 Release Notes

管理员现在支持主题化，并包含一个根据浏览器设置启用的深色主题。有关更多详细信息，请参阅主题支持。

Answer 2

Django 3.2 管理主题更改

如果你想像我一样返回旧主题，你可以覆盖颜色变量。

转到django/contrib/admin/static/admin/css/base.css 并复制如下所示的块

/* VARIABLE DEFINITIONS */
:root {
  --primary: #79aec8;
  --secondary: #417690;  
  .......
}

接下来在模板文件夹中创建名为admin 的文件夹并在其中创建base.html 文件并放置此代码。确保将 :root 替换为从初始 base.html 获得的变量

{% extends 'admin/base.html' %}
    
{% block extrahead %}{{ block.super }}
<style>
    :root {
      --primary: #79aec8;
      --secondary: #417690;
      --accent: #f5dd5d;
      --primary-fg: #fff;
      ......
    }

</style>
{% endblock %}

并享受我们都喜欢的 Django 旧的美丽外观）

Answer 3

对于那些想知道将上述 Adam 响应中的覆盖数据放在哪里的人，这取决于您的 TEMPLATES DIRS 在设置文件中的分配位置。例如：

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [(os.path.join(BASE_DIR, 'templates')),], # <- Template path to put the html file
        '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',
            ],
        },
    },
]

注意 DIRS 目录。这将转换为与我的 manage.py 文件处于同一级别的模板文件夹。

在该模板文件夹中，我有另一个名为 admin 的文件夹和一个名为 base 的 html 文件。所以它看起来像这样：\projectname\templates\admin\base.html

然后在 base.html 文件中，我有亚当从 documentation theming support 中提到的代码

{% extends 'admin/base.html' %}
    
{% block extrahead %}{{ block.super }}
<style>
    :root {
        --primary: #9774d5;
        --secondary: #785cab;
        --link-fg: #7c449b;
        --link-selected-fg: #8f5bb2;
        --body-fg: #333;
        --body-bg: #fff;
        --body-quiet-color: #666;
        --body-loud-color: #000;
        --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
        --selected-bg: #e4e4e4; /* E.g. selected table cells */
        --selected-row: #ffc;
    }

</style>
{% endblock %}

这现在应该适合您了。如果您在此处使用这些精确设置，它将是带有紫色的浅色主题。然后你就可以相应地。

Answer 4

从 django 3.2 我们可以调整管理主题。 忽略深色主题的最快方法是：

在 templates 文件夹中创建 admin 文件夹，然后创建文件 base.html

templates/admin/base.html

将此代码复制到 base.html

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

{% block extrahead %}{{ block.super }}
<style>
/* VARIABLE DEFINITIONS */
:root {
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;

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

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --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; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: #609ab6;
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}


</style>
{% endblock %}

现在你应该恢复原来的颜色了。