I want to have a toggle button to switch between a light and dark theme. I can toggle once but it doesn't toggle back after. My current approach is this:
<link id="theme-css" class="dark-theme" rel="stylesheet" href="{% static 'css/dashboard-dark.css' %}">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitches" onclick="toggle()">
<label class="custom-control-label" for="customSwitches">Toggle Theme</label>
</div>
<script>
function toggle() {
if(document.getElementById("theme-css").href="{% static 'css/dashboard-dark.css' %}"){
document.getElementById("theme-css").href="{% static 'css/dashboard-light.css' %}";
}
else if(document.getElementById("theme-css").href="{% static 'css/dashboard-light.css' %}"){
document.getElementById("theme-css").href="{% static 'css/dashboard-dark.css' %}";
}
}
</script>
==
or===