diff options
| -rw-r--r-- | pydis_site/static/js/base/navbar.js | 114 | ||||
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 6 |
2 files changed, 45 insertions, 75 deletions
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js index a4b8a0aa..9a1641aa 100644 --- a/pydis_site/static/js/base/navbar.js +++ b/pydis_site/static/js/base/navbar.js @@ -1,94 +1,64 @@ "use strict"; -const defaultCssElement = $("#bulma-css")[0]; -const darkCssElement = $("#bulma-css-dark")[0]; +const defaultTheme = "light"; +const lightCssElement = document.getElementById("bulma-css"); +const darkCssElement = document.getElementById("bulma-css-dark"); function getCurrentTheme() { - if (document.cookie === "") - return "default"; - - return document.cookie - .split('; ') - .find(row => row.startsWith('theme=')) - .split('=')[1]; + const theme = localStorage.getItem("theme"); + if (theme === null || theme === "") + return defaultTheme; + return theme; } -function displayThemedElements() { - const defaultElements = Array.from($(".show-default-mode")); - const darkElements = Array.from($(".show-dark-mode")); - - switch (getCurrentTheme()) { - case "": - case "default": - defaultElements.forEach(e => e.style.display = null); - darkElements.forEach(e => e.style.display = 'none'); +function setStyleSheets(newTheme) { + switch (newTheme) { + case "light": + lightCssElement.disabled = false; + darkCssElement.disabled = true; break; case "dark": - defaultElements.forEach(e => e.style.display = 'none'); - darkElements.forEach(e => e.style.display = null); + lightCssElement.disabled = true; + darkCssElement.disabled = false; break; } } -function setStyleSheets() { - switch (getCurrentTheme()) { - case "": - case "default": - defaultCssElement.disabled = false; - darkCssElement.disabled = true; +function toggleThemeSwitch(newTheme) { + const switchToggle = document.getElementById("theme-switch"); + const knob = document.getElementById("theme-knob"); + switch (newTheme) { + case "light": + knob.classList.remove("dark"); + knob.classList.add("light"); + setTimeout(function() { + switchToggle.classList.remove("dark"); + switchToggle.classList.add("light"); + }, 100); break; case "dark": - defaultCssElement.disabled = true; - darkCssElement.disabled = false; + knob.classList.remove("light"); + knob.classList.add("dark"); + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); break; } } -function toggleThemeSwitch() { - let switchToggle = $(".switch")[0]; - let knob = $(".knob")[0]; - - if (knob.classList.contains("dark")) { - knob.classList.remove("dark"); - knob.classList.add("light"); - - // After 500ms, switch the icons - setTimeout(function() { - switchToggle.classList.remove("dark"); - switchToggle.classList.add("light"); - }, 100); - } else { - knob.classList.remove("light"); - knob.classList.add("dark"); - - // After 500ms, switch the icons - setTimeout(function() { - switchToggle.classList.remove("light"); - switchToggle.classList.add("dark"); - }, 100); - } -} - // Executed when the page has finished loading. document.addEventListener("DOMContentLoaded", () => { - - setStyleSheets(); - displayThemedElements(); - - if (getCurrentTheme() === "default") - toggleThemeSwitch(); - - $('#theme-switch').on("click", () => { - - // Update cookie - if (getCurrentTheme() === "dark") { - document.cookie = "theme=default"; - } else { - document.cookie = "theme=dark"; - } - - setStyleSheets(); - displayThemedElements(); - toggleThemeSwitch(); + const theme = getCurrentTheme() + setStyleSheets(theme); + toggleThemeSwitch(theme); + + const switchToggle = document.getElementById("theme-switch"); + switchToggle.addEventListener("click", () => { + const newTheme = getCurrentTheme() === "light" ? "dark" : "light"; + console.log(newTheme); + localStorage.setItem("theme", newTheme); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); }); }); diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index f6a1bc26..57fdbf6a 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -3,7 +3,6 @@ {% block head %} <link rel="stylesheet" href="{% static "css/base/navbar.css" %}"> <link href="https://css.gg/css?=|moon|sun" rel="stylesheet"> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="{% static "js/base/navbar.js" %}"></script> {% endblock %} @@ -104,17 +103,18 @@ </div> </div> + {# Theme toggle #} <div class="navbar-item"> <div id="theme-switch" class="switch dark"> <div class="switch-outer"></div> <div class="switch-inner"></div> <i class="theme-icon light gg-sun"></i> - <div class="knob dark"></div> + <div id="theme-knob" class="knob dark"></div> <i class="theme-icon dark gg-moon"></i> </div> </div> - {# Desktop Nav Discord #} + {# Desktop Nav Discord #} <div id="discord-btn" class="buttons is-hidden-touch is-white"> <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a> </div> |