Light/dark switch does not work with bootstrap theme

Using Django Templates & Frontend
1

Hello!

I’m building a Django website using the GeeksUI template. I’ve built a webpage and averything except the light/dark switch does not work. I’m trying to figure out how this can happen but I cant seem to grasp the problem.

My light/dark switch looks as follows:

<a href="#" class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2">
                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
            </a>

the js I’ve imported looks as follows:

<script>
    // Render blocking JS:
    if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
    console.log("Theme: " + localStorage.theme);
</script>

<!-- Scripts -->
<!-- Libs JS -->
<script src="{% static 'libs/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'libs/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'libs/simplebar/dist/simplebar.min.js' %}"></script>
  
<!-- Theme JS -->
<script src="{% static 'js/theme.min.js' %}"></script>

If i change the header from light to dark the website does switch to dark mode, so the css does seem to work:

<html lang="en" data-theme="light"> --> <html lang="en" data-theme="dark">

As far as I’ve found the GeeksUI template looks exactly like my django template, I’ve extracted all script tags and loaded all js modules (also at the bottom of the page, but I’ve placed those at the top). I’ve double checked of the links in the webpage are valid links to the js files and all are.

for example, this results in a page with code.

http://localhost:8000/static/js/theme.min.js

Can anyone help me explain what the problem here is ? Is it because I’m loading the page in django that i need to create additional js code to toggle dark mode ? Or is this (as I presume) done using the bootstrap js and bootstrap css libraries?

My full webpage code can be found below:

<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:8000/ -->
<html lang="en" data-theme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Mechanics website">
    <meta name="keywords" content="">
    <meta name="author" content="Johan Antonissen">

    <!-- Favicon icon-->
    <link rel="shortcut icon" type="image/x-icon" href="http://localhost:8000/static/images/favicon/favicon.ico">

    

<!-- Libs CSS -->
<link href="./Home_files/feather.css" rel="stylesheet">
<link href="./Home_files/bootstrap-icons.css" rel="stylesheet">
<link href="./Home_files/materialdesignicons.min.css" rel="stylesheet">
<link href="./Home_files/simplebar.min.css" rel="stylesheet">

<!-- Theme CSS -->
<link rel="stylesheet" href="./Home_files/theme.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="./Home_files/all.min.css">

<!-- 

<link rel="stylesheet" href="/static/css/base.css">
 
-->
    

<script>
    // Render blocking JS:
    if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
    console.log("Theme: " + localStorage.theme);
</script>

<!-- Scripts -->
<!-- Libs JS -->
<script src="./Home_files/jquery.min.js"></script>
<script src="./Home_files/bootstrap.bundle.min.js"></script>
<script src="./Home_files/simplebar.min.js"></script>
  
<!-- Theme JS -->
<script src="./Home_files/theme.min.js"></script>

    <title>Home</title>
</head>
<body>
    
    

<nav class="navbar navbar-expand-lg">

    <div class="container-fluid px-0">
        <a class="navbar-brand" href="http://localhost:8000/"><img src="./Home_files/logo.svg" alt=""></a>
    <div class="order-lg-3 d-flex align-items-center">

    <div class="">
        <div class="d-flex align-items-center">
            <a href="http://localhost:8000/#" class="form-check form-switch theme-switch btn btn-light btn-icon rounded-circle me-2">
                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                <label class="form-check-label" for="flexSwitchCheckDefault"></label>
            </a>
            <a href="http://localhost:8000/#" class="btn btn-outline-primary shadow-sm me-1">Sign In</a>
            <a href="http://localhost:8000/#" class="btn btn-primary d-none d-md-block">Sign Up</a>

            <!-- Language Selector Dropdown -->
            <div class="dropdown">
                <button class="btn btn-outline-primary shadow-sm mx-1" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-globe"></i> <!-- Globe icon -->
                </button>
                <ul class="dropdown-menu p-0 dropdown-menu-end text-center" aria-labelledby="languageDropdown">
                    <li class="dropdown-item py-2 active">
                        <a href="http://localhost:8000/#" class="me-2">
                            <img src="./Home_files/gb.svg" alt="Brittain Flag" style="width: 24px; height: 18px;">
                        </a>
                        <a href="http://localhost:8000/#">English</a>
                    </li>
                    <li class="dropdown-item py-2">
                        <a href="http://localhost:8000/#" class="me-2">
                            <img src="./Home_files/nl.svg" alt="Netherlands Flag" style="width: 24px; height: 18px;">
                        </a>
                        <a href="http://localhost:8000/#">Dutch</a>
                    </li>
                    <li class="dropdown-item py-2">
                        <a href="http://localhost:8000/#" class="me-2">
                            <img src="./Home_files/de.svg" alt="Germany Flag" style="width: 24px; height: 18px;">
                        </a>
                        <a href="http://localhost:8000/#">German</a>
                    </li>
                    <li class="dropdown-item py-2">
                        <a href="http://localhost:8000/#" class="me-2">
                            <img src="./Home_files/es.svg" alt="Spain Flag" style="width: 24px; height: 18px;">
                        </a>
                        <a href="http://localhost:8000/#">Spanish</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <!-- Button -->
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar mt-0"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
        </button>
    </div>
  
    <!-- Collapse -->
      <div class="collapse navbar-collapse" id="navbar-default">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" id="navbar-home" href="http://localhost:8000/#">Home<span class="visually-hidden">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="navbar-news" href="http://localhost:8000/#">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="navbar-book" href="http://localhost:8000/#">Book</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="navbar-solver" href="http://localhost:8000/#">Solver</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="navbar-subscription" href="http://localhost:8000/#">Subscription</a>
          </li>
        </ul>
      </div>
      
    </div>
  </nav>

    <div class="container">
        
    <h1>This is our home page.</h1>
    
        <p>You are not logged in</p>
        <a href="http://localhost:8000/accounts/login/">Log In</a>
        <a href="http://localhost:8000/accounts/signup/">Sign Up</a>
    

    </div>

</body></html>

Thank you in advance.

2

Okay i figured it out.

Apparently I needed to load these files at the bottom rather than at the start:

<!-- Scripts -->
<!-- Libs JS -->
<script src="{% static 'libs/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'libs/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'libs/simplebar/dist/simplebar.min.js' %}"></script>
  
<!-- Theme JS -->
<script src="{% static 'js/theme.min.js' %}"></script>

Can anyone explain me why this can be the solution ?

When I google around the answer for loading scripts at the bottom is that this way the content loads faster. Nothing is stated about these scripts functioning faulty when I import them at the top.

Can anyone explain this to me please ?

Thanx in advance!

3

Briefly, the issue can be caused by the script running before the page has finished loading. If the page isn’t complete, then there may be elements on the page that aren’t visible to the JavaScript when it initializes.

I think you may be able to resolve this by wrapping this:

Inside a ready() function call.

I don’t know where simplebar.js and theme.js come from, but there’s no problem with loading jquery and bootstrap at the top of the page. They already know how to wait for the page load to complete.