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

Posted 2023-02-23

【中文标题】有人可以向我解释为啥我的 django 管理主题是黑暗的吗？

【英文标题】：Can someone explain to my why my django admin theme is dark?有人可以向我解释为什么我的 django 管理主题是黑暗的吗？

【发布时间】：2021-07-12 01:26:18

【问题描述】：

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

【问题讨论】：

我想知道为什么这些管理主题会影响我与管理无关的主页。

同样的问题。我正在运行一个暗模式主题生成器。现在，唯一看起来很亮的页面是 django 管理页面....

【参考方案1】：

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

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

【讨论】：

检查它在灯光方案中的外观：***.com/questions/57606960/…

这会关闭我的深色主题工具，并且所有管理页面都显得明亮。

【参考方案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 旧的美丽外观）

【讨论】：

这个admin/base.html 文件应该在哪里？我在一个应用程序模板文件夹 (myproject/myapp/templates/admin/base.html) 中尝试过，我尝试过 [覆盖默认管理站点][1]，但我没有设法让它工作。谢谢！ [1]：docs.djangoproject.com/en/3.2/ref/contrib/admin/…

【参考方案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 %

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

【参考方案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 %

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

【讨论】：

请注意，从 django 4.1（2022 版）开始，这些样式被移动到它们自己的样式表中。对于 django 4.1+，要关闭暗模式样式，您只需添加 % block dark-mode-vars %% endblock %。这样就不会包含加载暗模式样式表的行。