From 7559cb72da7e8b84dd81b33d54ba6c6abd156fd7 Mon Sep 17 00:00:00 2001 From: hedy Date: Fri, 5 Jan 2024 20:55:34 +0800 Subject: Dark: Name JS & CSS files according to their content We have the CSS for the navbar in base.css, the relevant files only contain code for the theme toggle, so they should be named as such. If we ever implement CSS variables per-theme, they could then be done in `themes.css`. --- pydis_site/static/css/base/navbar.css | 65 ------------------------- pydis_site/static/css/base/themes.css | 67 ++++++++++++++++++++++++++ pydis_site/static/js/base/navbar.js | 91 ----------------------------------- pydis_site/static/js/base/themes.js | 91 +++++++++++++++++++++++++++++++++++ 4 files changed, 158 insertions(+), 156 deletions(-) delete mode 100644 pydis_site/static/css/base/navbar.css create mode 100644 pydis_site/static/css/base/themes.css delete mode 100644 pydis_site/static/js/base/navbar.js create mode 100644 pydis_site/static/js/base/themes.js (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css deleted file mode 100644 index 9d71e799..00000000 --- a/pydis_site/static/css/base/navbar.css +++ /dev/null @@ -1,65 +0,0 @@ -.switch { - position: relative; - height: 2em; - width: 4em; - cursor: pointer; -} - -.switch-outer { - position: absolute; - height: 100%; - width: 100%; - border-radius: 2em; - transition: background-color 0.3s ease-out; -} - -.switch.dark .switch-outer { - background-color: #22272E; -} - -.switch.light .switch-outer { - background-color: #3f61d9; -} - -.knob { - position: absolute; - padding-top: 20%; - height: 70%; - width: 37.5%; - border-radius: 10em; - transition: all 0.5s ease-out; -} - -.knob.dark { - background-color: #586282; - margin: 7% auto auto 8%; -} - -.knob.light { - background-color: #364c94; - margin: 7% auto auto 56%; -} - -.theme-icon { - position: absolute !important; - --ggs: 0.75; - transition: opacity 0.3s ease-out; -} - -.theme-icon.light { - left: 10%; - top: 15% -} - -.theme-icon.dark { - right: 10%; - top: 20% -} - -.switch.dark .theme-icon.light { - opacity: 0; -} - -.switch.light .theme-icon.dark { - opacity: 0; -} diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css new file mode 100644 index 00000000..35273d44 --- /dev/null +++ b/pydis_site/static/css/base/themes.css @@ -0,0 +1,67 @@ +/* Theme switch toggle */ + +.switch { + position: relative; + height: 2em; + width: 4em; + cursor: pointer; +} + +.switch-outer { + position: absolute; + height: 100%; + width: 100%; + border-radius: 2em; + transition: background-color 0.3s ease-out; +} + +.switch.dark .switch-outer { + background-color: #22272E; +} + +.switch.light .switch-outer { + background-color: #3f61d9; +} + +.knob { + position: absolute; + padding-top: 20%; + height: 70%; + width: 37.5%; + border-radius: 10em; + transition: all 0.5s ease-out; +} + +.knob.dark { + background-color: #586282; + margin: 7% auto auto 8%; +} + +.knob.light { + background-color: #364c94; + margin: 7% auto auto 56%; +} + +.theme-icon { + position: absolute !important; + --ggs: 0.75; + transition: opacity 0.3s ease-out; +} + +.theme-icon.light { + left: 10%; + top: 15% +} + +.theme-icon.dark { + right: 10%; + top: 20% +} + +.switch.dark .theme-icon.light { + opacity: 0; +} + +.switch.light .theme-icon.dark { + opacity: 0; +} diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js deleted file mode 100644 index 2a57cad4..00000000 --- a/pydis_site/static/js/base/navbar.js +++ /dev/null @@ -1,91 +0,0 @@ -"use strict"; - -const defaultTheme = "light"; -const lightStylesheet = document.getElementById("bulma-css"); -const darkStylesheet = document.getElementById("bulma-css-dark"); - -// Get saved preference for the site in local storage, optionally accounting -// for system preference used when a page loads. -function getCurrentTheme(systemPrefers) { - const theme = localStorage.getItem("theme"); - - if (theme !== null && theme !== "") - return theme; - - if (systemPrefers !== undefined) - return systemPrefers; - - return defaultTheme; -} - -// Disable & enable the correct CSS stylesheets based on chosen theme. -function setStyleSheets(newTheme) { - switch (newTheme) { - case "light": - lightStylesheet.disabled = false; - darkStylesheet.disabled = true; - break; - case "dark": - lightStylesheet.disabled = true; - darkStylesheet.disabled = false; - break; - } - - document.querySelector("html").setAttribute("data-theme", newTheme); -} - -// Reflect chosen theme on the switch toggle. -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": - knob.classList.remove("light"); - knob.classList.add("dark"); - setTimeout(function() { - switchToggle.classList.remove("light"); - switchToggle.classList.add("dark"); - }, 100); - break; - } -} - -// Executed when the page has finished loading. -document.addEventListener("DOMContentLoaded", () => { - let theme; - const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); - - if (systemPrefersDark.matches) - theme = getCurrentTheme("dark"); - else - theme = getCurrentTheme(); - - setStyleSheets(theme); - toggleThemeSwitch(theme); - - systemPrefersDark.addEventListener("change", ({matches: isDark}) => { - const newTheme = isDark ? "dark" : "light"; - // Let the new system preference take precedence over toggle preference - // on page reloads. - localStorage.removeItem("theme"); - setStyleSheets(newTheme); - toggleThemeSwitch(newTheme); - }) - - const switchToggle = document.getElementById("theme-switch"); - switchToggle.addEventListener("click", () => { - const newTheme = getCurrentTheme() === "light" ? "dark" : "light"; - localStorage.setItem("theme", newTheme); - setStyleSheets(newTheme); - toggleThemeSwitch(newTheme); - }); -}); diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js new file mode 100644 index 00000000..2a57cad4 --- /dev/null +++ b/pydis_site/static/js/base/themes.js @@ -0,0 +1,91 @@ +"use strict"; + +const defaultTheme = "light"; +const lightStylesheet = document.getElementById("bulma-css"); +const darkStylesheet = document.getElementById("bulma-css-dark"); + +// Get saved preference for the site in local storage, optionally accounting +// for system preference used when a page loads. +function getCurrentTheme(systemPrefers) { + const theme = localStorage.getItem("theme"); + + if (theme !== null && theme !== "") + return theme; + + if (systemPrefers !== undefined) + return systemPrefers; + + return defaultTheme; +} + +// Disable & enable the correct CSS stylesheets based on chosen theme. +function setStyleSheets(newTheme) { + switch (newTheme) { + case "light": + lightStylesheet.disabled = false; + darkStylesheet.disabled = true; + break; + case "dark": + lightStylesheet.disabled = true; + darkStylesheet.disabled = false; + break; + } + + document.querySelector("html").setAttribute("data-theme", newTheme); +} + +// Reflect chosen theme on the switch toggle. +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": + knob.classList.remove("light"); + knob.classList.add("dark"); + setTimeout(function() { + switchToggle.classList.remove("light"); + switchToggle.classList.add("dark"); + }, 100); + break; + } +} + +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + let theme; + const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); + + if (systemPrefersDark.matches) + theme = getCurrentTheme("dark"); + else + theme = getCurrentTheme(); + + setStyleSheets(theme); + toggleThemeSwitch(theme); + + systemPrefersDark.addEventListener("change", ({matches: isDark}) => { + const newTheme = isDark ? "dark" : "light"; + // Let the new system preference take precedence over toggle preference + // on page reloads. + localStorage.removeItem("theme"); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }) + + const switchToggle = document.getElementById("theme-switch"); + switchToggle.addEventListener("click", () => { + const newTheme = getCurrentTheme() === "light" ? "dark" : "light"; + localStorage.setItem("theme", newTheme); + setStyleSheets(newTheme); + toggleThemeSwitch(newTheme); + }); +}); -- cgit v1.2.3