aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/js
diff options
context:
space:
mode:
authorGravatar GDWR <[email protected]>2022-02-08 00:43:03 +0000
committerGravatar GDWR <[email protected]>2022-02-08 00:43:03 +0000
commit01deafa5bf5b68784d434d6f361c21d72cf89069 (patch)
treeff403c08b1048beaed3a0bdf297de94ca45f3c77 /pydis_site/static/js
parentUpdate dependency (diff)
Add initial dark theme
Diffstat (limited to 'pydis_site/static/js')
-rw-r--r--pydis_site/static/js/base/navbar.js87
1 files changed, 87 insertions, 0 deletions
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
new file mode 100644
index 00000000..f0bd94b9
--- /dev/null
+++ b/pydis_site/static/js/base/navbar.js
@@ -0,0 +1,87 @@
+"use strict";
+
+const defaultCssElement = $("#bulma-css")[0];
+const darkCssElement = $("#bulma-css-dark")[0];
+
+function getCurrentTheme() {
+ return document.cookie
+ .split('; ')
+ .find(row => row.startsWith('theme='))
+ .split('=')[1];
+}
+
+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');
+ break;
+ case "dark":
+ defaultElements.forEach(e => e.style.display = 'none');
+ darkElements.forEach(e => e.style.display = null);
+ break;
+ }
+}
+
+function setStyleSheets() {
+ switch (getCurrentTheme()) {
+ case "":
+ case "default":
+ defaultCssElement.disabled = false;
+ darkCssElement.disabled = true;
+ break;
+ case "dark":
+ defaultCssElement.disabled = true;
+ darkCssElement.disabled = false;
+ break;
+ }
+}
+
+
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", () => {
+
+ setStyleSheets();
+ displayThemedElements();
+
+ $('#theme-switch').on("click", () => {
+
+ // Update cookie
+ if (getCurrentTheme() === "dark") {
+ document.cookie = "theme=default";
+ } else {
+ document.cookie = "theme=dark";
+ }
+
+ setStyleSheets();
+ displayThemedElements();
+
+ // Animations
+ 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);
+ }
+ });
+}); \ No newline at end of file