Отключение темного режима в bulma 1.0

Я попробовал отключить темный режим в моем base.css, как описывает bulma в своей документации, добавив @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 к другим элементам ничего не изменило.

Я хочу избавиться от darkmode на всей странице. Как мне это сделать? Переключение темного режима по всей системе на светлый работает.

Я также пробовал использовать <body data-theme="light">

Вам необходимо добавить data-theme к тегу <html>: <html lang="en" data-theme="light">. Этот атрибут не работает с другими тегами.

Кстати, вы не пробовали использовать версию Бульмы без темной темы? Минифицированная - там.

Вернуться на верх