djangodjango-templatesbulma

disable dark mode in bulma 1.0

I tried disabling the dark mode in my base.css like bulma describes in their docs by adding the @media lines:

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

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

This is how I import them in my 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>

I also tried using <body data-theme="light"> but this only affected the footer, and not the content in the body. Also adding the data-theme tag to other elements did not change anything.

I want to get rid of darkmode all over the page. How would I do that? Switching the dark mode systemwide to light works though.

Solution

  • I also tried using <body data-theme="light">

    You need to add data-theme to the <html> tag: <html lang="en" data-theme="light">. This attribute doesn't work with other tags.

    By the way, have you tried using Bulma version without dark theme? Minified one is there.