I’m encountering an issue with a custom Theme Installation in my Django project using v. 4.2.13 and Python v. 3.9.7. In the default Admin side, there is a Moon icon for toggling the Themes (i.e. b/w Light and Dark and Auto). I want to add a Grey theme as my default with a new icon. So there are total 4 icons for themes now – Grey, Light , Dark & Auto. For implementing this, I added a new icon for the Grey theme and the icon is now not visible in the Admin panel (only the default 3 are shown) and the toggling between themes is not working. Below are the screenshots of the code for installing themes with their respective icons.

Please also note my teammate has been working on Django 5.0 for making his previous project commits in Github. We wanted to test what can happen to the same functionality if team members work on different versions since we’re assuming Git essentially stores all files as basic text files with version control. I am not sure if this has anything to do with my problem.

Kindly help.

1.Screenshot 1 – js file for toggle and add the icon (admin_script.js)

document.addEventListener("DOMContentLoaded", function() {
    const themeSwitcher = document.getElementById("theme-switcher");
    
    // Function to set the theme in the body and save it in a cookie
    function setTheme(theme) {
        document.body.classList.remove("dark-theme", "grey-theme", "light-theme");
        document.body.classList.add(theme);
        document.cookie = `theme=${theme}; path=/;`;     
          // Update button text based on the current theme
          if (theme === "light-theme") {
            themeSwitcher.textContent = "Switch to Dark Theme";
        } else if (theme === "grey-theme") {
            themeSwitcher.textContent = "Switch to Light Theme";
        } else {
            themeSwitcher.textContent = "Switch to Grey Theme";
        }
    }   

    // Function to get the theme from cookies
    function getTheme() {
        const name = 'theme=';
        const decodedCookie = decodeURIComponent(document.cookie);
        const cookies = decodedCookie.split(';');
        for(let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].trim();
            if (cookie.indexOf(name) == 0) {
                return cookie.substring(name.length, cookie.length);
            }
        }
        return null;
    }

    // Apply the stored theme on page load
    const currentTheme = getTheme();
    if (currentTheme) {
        setTheme(currentTheme);
    } else {
        setTheme('grey-theme');  // Default to light theme if no theme is set
    }

    // Event listener for the theme switch button
    themeSwitcher.addEventListener("click", function() {
        let newTheme;
        if (document.body.classList.contains("light-theme")) {
            newTheme = "dark-theme";
        } else if (document.body.classList.contains("grey-theme")) {
            newTheme = "light-theme";
        } else {
            newTheme = "grey-theme";
        }
        setTheme(newTheme);
    });

});

2.Screenshot 2 – code for add new toggle icon (color_theme_toggle.html)

{% load i18n %}
<button class="theme-toggle">
  <div class="visually-hidden theme-label-when-auto">{% translate 'Toggle theme (current theme: auto)' %}</div>
  <div class="visually-hidden theme-label-when-light">{% translate 'Toggle theme (current theme: light)' %}</div>
  <div class="visually-hidden theme-label-when-dark">{% translate 'Toggle theme (current theme: dark)' %}</div>
  <div class="visually-hidden theme-label-when-grey">{% translate 'Toggle theme (current theme: grey)' %}</div>

  <svg aria-hidden="true" class="theme-icon-when-auto">
    <use xlink:href="#icon-auto" />
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-dark">
    <use xlink:href="#icon-moon" />
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-light">
    <use xlink:href="#icon-sun" />
  </svg>
  <svg aria-hidden="true" class="theme-icon-when-grey">
    <use xlink:href="#icon-grey" />
  </svg>
</button>

3.Screenshot 3 – Add svg file for new icon(new.svg)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-grey" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" fill="#808080"/>
  </symbol>
</svg>

4.Screenshot 4 – Extend base site and add css and js file(base_site.html)

{% extends "admin/base_site.html" %}
{% load static %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'admin/css/custom_admin.css' %}">
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script src="{% static 'js/theme.js' %}"></script>
  
{% endblock %}

In my Django project i want to add a new icon for grey theme and toggle between them with existing default themes.So i want to add one icon for grey theme and toggle between the themes.