【问题标题】:Disable prefers-color-scheme: dark in django admin禁用prefers-color-scheme:django admin中的dark
【发布时间】:2021-07-15 11:40:48
【问题描述】:

我在 Mac 上启用了暗模式,但在带有 ckeditor 的 django 管理面板中看起来很尴尬。是否可以在 Chrome 或 Django 管理员中禁用它?我已经尝试过主题和浏览器扩展,但没有成功。

【问题讨论】:

标签: django google-chrome django-admin ckeditor darkmode


【解决方案1】:

看起来您正在为 Django 管理员使用一些第 3 方主题。我建议检查这个主题的维护者是否希望尽快支持 Django 3.2。

至于快速修复,您可以引入自己的样式表,该样式表将重置负责黑暗主题的变量。你可以找到变量here

为此,在您的静态文件目录中创建一个单独的 css 文件,从上面提到的代码片段中复制 @media 声明并在其中粘贴正常的配色方案(也可以在同一代码片段中找到) .之后,创建一个admin/base_site.html 模板,用this 内容或您正在使用的主题中的等效内容填充它,并在extrastyle 块中链接您的自定义CSS(您可能需要手动创建该块)。

【讨论】:

  • 有一个全新的 Django 项目。安装后管理面板已经黑了。我决定在 /static/admin/css/base.css 中评论“@media (prefers-color-scheme: dark)”部分。不确定这是一个好的解决方案,但速度最快。
  • 我看到你正在使用一些所见即所得的编辑器,这就是造成麻烦的原因。寻找它的新版本,看看它是否支持深色方案。如果没有,请参阅此支持的问题列表,如果问题尚不存在,最好报告问题。
  • @VictoriaSh 这对我不起作用。还有其他解决方案吗?
  • @ajinzrathod 我刚刚在 admin/css/base.css 中评论了 @media (prefers-color-scheme: dark) {} 部分。这是最简单的方法。
【解决方案2】:

有一个应用程序。

pip install django-light,详情请见https://github.com/frnhr/django-light

完全披露:我是作者。嗯,更像是“打包器”,没有太多的原始代码......

【讨论】:

  • 这几乎立即奏效!
【解决方案3】:

正如@GwynBleidD 所写,我像这样更改了我的admin/base_site.html,并且它有效:

{% extends "admin/base_site.html" %}

{% block extrastyle %}
<style>
    @media (prefers-color-scheme: dark) { 
        :root {
            --primary: #79aec8;
            --primary-fg: #fff;

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

            --breadcrumbs-fg: #c4dce8;
            --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;

            --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
            --close-button-hover-bg: #747474;
        }
    }
</style>
{% endblock %}

【讨论】:

    猜你喜欢
    • 2019-12-18
    • 2021-05-27
    • 2022-10-23
    • 2020-03-19
    • 1970-01-01
    • 1970-01-01
    • 2022-07-29
    • 2020-11-18
    • 2019-09-11
    相关资源
    最近更新 更多