禁用prefers-color-scheme：django admin中的dark

Posted 2023-02-23

【中文标题】禁用prefers-color-scheme：django admin中的dark

【英文标题】：Disable prefers-color-scheme: dark in django admin

【发布时间】：2021-07-15 11:40:48

【问题描述】：

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

【问题讨论】：

docs.djangoproject.com/en/3.2/ref/contrib/admin 您可以参考 Django 文档并根据您的系统设置覆盖深色主题（prefers-color-scheme）

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