在 bulma 1.0 中禁用深色模式

问题描述 投票：0回答：1

我尝试通过添加

base.css
行来禁用我的
@media
中的黑暗模式，就像布尔玛在他们的文档中描述的那样：

@media (prefers-color-scheme: light) {
  :root {
  }
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
...

这就是我将它们导入我的

base.html
：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}app{% endblock title %}</title>

        {% block css %}
            <link rel="stylesheet" href="{% static 'css/bulma.css' %}"> 
            <link rel="stylesheet" href="{% static 'css/bulma-extensions.min.css' %}">
            <link rel="stylesheet" href="{% static 'css/bulma-switch.min.css' %}">
            <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
            <link rel="stylesheet" href="{% static 'css/base.css' %}">
        {% endblock %}
    </head>
    <body>
       ...
    </body>
</html>

我也尝试使用 

<body data-theme="light">
但这只影响页脚，而不影响正文中的内容。另外，向其他元素添加 
data-theme
标签也没有改变任何内容。

我想摆脱整个页面的黑暗模式。我该怎么做呢？不过，将系统范围内的深色模式切换为浅色模式是可行的。

django django-templates bulma
1个回答
0
投票

我也尝试过使用

<body data-theme="light">

您需要将 

data-theme
添加到 
<html>
标签：
<html lang="en" data-theme="light">
。此属性不适用于其他标签。

顺便问一下，您是否尝试过使用没有黑暗主题的布尔玛版本？ 缩小版就在那里。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.