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

oalqel3c  于 2022-12-05  发布在  Go
关注(0)|答案(5)|浏览(157)

我在pythonanywhere上托管我的小项目，在我托管它之后，我检查它是否工作，当我点击django管理时，我的django管理的主题是黑暗的，当我试图在我的本地主机上运行时，主题是白色的，所以我试图仔细检查我的静态URL，我认为它是好的，顺便说一句，这是我的管理静态URL静态URL：/static/admin，静态目录：/home/k3 v1 nSocialProject/.virtualenvs/myprojenv/lib/python3.8/site-packages/django/contrib/admin/static/admin.有人能给我解释一下发生了什么，为什么我的django管理主题是暗的吗？

django

5条答案

按热度按时间
1zmg4dgp

1zmg4dgp1#

作为Django 3.2版本的一部分，管理员现在有了一个基于prefers-color-scheme媒体查询的黑暗主题。
管理员现在支持主题化，并包括一个根据浏览器设置启用的深色主题。请参阅主题化支持了解更多详情。

赞(0）分享  回复(0）举报  2022-12-05
km0tfn4u

km0tfn4u2#

从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 %}

现在，您应该恢复了原始颜色。

赞(0）分享  回复(0）举报  2022-12-05
koaltpgm

koaltpgm3#

对于那些想知道在哪里放置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目录，它转换为与我的www.example.com文件处于同一级别的templates文件夹manage.py。
在这个模板文件夹里，我有一个叫做admin的文件夹和一个叫做base的html文件，看起来像这样：\projectname\templates\admin\base.html
然后，在base.html文件中，我有Adam在文档主题化支持中提到的代码

{% 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 %}

这应该现在为你工作。如果你使用这些确切的设置在这里，它将是一个轻的主题与紫色。然后你可以只是相应的。

赞(0）分享  回复(0）举报  2022-12-05
jdgnovmf

jdgnovmf4#

Django 3.2管理主题更改

如果你想像我一样返回旧主题，你可以覆盖颜色变量。
转到django/contrib/admin/static/admin/css/base.css并复制如下所示的块

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

接下来，在templates文件夹中创建名为admin的文件夹，并在其中创建base.html文件，然后放置以下代码。

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

</style>
{% endblock %}

并享受老美丽的看Django，我们都喜欢）

赞(0）分享  回复(0）举报  2022-12-05
8e2ybdfx

8e2ybdfx5#

对于那些谁想有一个很好的开关之间的黑暗和光明模式。
这个特性将在Django 4.2中提供（计划在2023年4月），但我已经修改了Sarah Abderamane's PR，以便在4.1中使用。
执行以下操作以激活它：
1.将文件admin/color_theme_dark_mode.html添加到templates目录：

<style>
  html[data-theme="light"],
  :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);
  }

  html[data-theme="dark"] {
    --primary: #264b5d;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
  }

  /* THEME SWITCH */
  .theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -1px;
  }

  .theme-toggle svg {
    vertical-align: middle;
    height: 1rem;
    width: 1rem;
    display: none;
  }

  /* ICONS */
  .theme-toggle svg.theme-icon-when-dark,
  .theme-toggle svg.theme-icon-when-light {
    fill: var(--header-link-color);
    color: var(--header-bg);
  }

  html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
  }

  html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
    display: block;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
  }
</style>

<script>
  // Avoid flashes of a light theme.
  const currentTheme = localStorage.getItem("theme");
  document.documentElement.dataset.theme = currentTheme || "auto";

  window.addEventListener("load", function (e) {
    function setTheme(mode) {
      if (mode !== "light" && mode !== "dark" && mode !== "auto") {
        console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
        mode = "auto";
      }

      if (mode === "auto") {
        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        mode = prefersDark ? "dark" : "light";
      }

      document.documentElement.dataset.theme = mode;
      localStorage.setItem("theme", mode);
    }

    function cycleTheme() {
      const currentTheme = localStorage.getItem("theme");
      if (currentTheme) currentTheme === "light" ? setTheme("dark") : setTheme("light");
      else setTheme("auto"); // resets to the system theme
    }

    function initTheme() {
      // set theme defined in localStorage if there is one, or fallback
      // to system mode
      const currentTheme = localStorage.getItem("theme");
      currentTheme ? setTheme(currentTheme) : setTheme("auto");
    }

    function setupTheme() {
      // Attach event handlers for toggling themes
      const buttons = document.getElementsByClassName("theme-toggle");
      Array.from(buttons).forEach((btn) => {
        btn.addEventListener("click", cycleTheme);
      });
      initTheme();
    }

    setupTheme();
  });
</script>

1.将文件admin/color_theme_toggle.html添加到templates目录：

<button class="theme-toggle">
  <div class="visually-hidden">Toggle light / dark color theme</div>
  <svg class="theme-icon-when-dark">
    <use xlink:href="#icon-moon" />
  </svg>
  <svg class="theme-icon-when-light">
    <use xlink:href="#icon-sun" />
  </svg>
</button>

<!-- SVGs -->
<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 24 24" width="16" height="16" id="icon-auto">
      <path d="M0 0h24v24H0z" fill="currentColor" />
      <path
        d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"
      />
    </symbol>
    <symbol viewBox="0 0 24 24" width="16" height="16" id="icon-moon">
      <path d="M0 0h24v24H0z" fill="currentColor" />
      <path
        d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"
      />
    </symbol>
    <symbol viewBox="0 0 24 24" width="16" height="16" id="icon-sun">
      <path d="M0 0h24v24H0z" fill="currentColor" />
      <path
        d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
      />
    </symbol>
  </svg>
</div>
<!-- END SVGs -->

1.将以下内容添加到templates目录下的base.html文件中：

{% block dark-mode-vars %}
{{ block.super }}
{% include "admin/color_theme_dark_mode.html" %}
{% endblock %}

{% block userlinks %}
{{ block.super }}
{% include "admin/color_theme_toggle.html" %}
{% endblock %}

1.在右上角有一个新图标，可以在亮/暗之间切换（我删除了“自动”，以简化它）：

赞(0）分享  回复(0）举报  2022-12-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com