diff --git a/sites/hurl.dev/_includes/common.js b/sites/hurl.dev/_includes/common.js
new file mode 100644
index 0000000..8dc1a3d
--- /dev/null
+++ b/sites/hurl.dev/_includes/common.js
@@ -0,0 +1,68 @@
+addEventListener("load", onLoad);
+
+function toggleElem() {
+ return document.getElementById("theme-toggle");
+}
+
+function menuElem() {
+ return document.getElementById("menu");
+}
+
+
+function onLoad() {
+ const systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
+ const defaultTheme = systemInitiatedDark.matches ? "dark" : "light";
+
+ // This checks for local storage telling to override the system preferences
+ let currentTheme = localStorage.getItem("theme");
+ if (!currentTheme) {
+ currentTheme = defaultTheme;
+ }
+
+ setTheme(currentTheme);
+
+ toggleElem().addEventListener("click", onThemeClick);
+ menuElem().addEventListener("click", onMenuClick);
+ systemInitiatedDark.addEventListener("change", onPreferColorSchemeChange);
+}
+
+function setTheme(theme) {
+ const lightElem = " Theme";
+ const darkElem = " Theme";
+ document.documentElement.setAttribute("data-theme", theme);
+ if (theme === "dark") {
+ toggleElem().innerHTML = lightElem;
+ }
+ else {
+ toggleElem().innerHTML = darkElem;
+ }
+ localStorage.setItem("theme", theme);
+}
+
+function onMenuClick() {
+ const x = document.getElementById("top-nav-toc");
+ if (x.style.display !== "block") {
+ x.style.display = "block";
+ } else {
+ x.style.display = "none";
+ }
+}
+
+function onPreferColorSchemeChange(e) {
+ if (e.matches) {
+ setTheme("dark");
+ } else {
+ setTheme("light");
+ }
+}
+
+function onThemeClick() {
+ const currentTheme = localStorage.getItem("theme");
+ if (currentTheme === "dark") {
+ setTheme("light");
+ } else if (currentTheme === "light") {
+ setTheme("dark");
+ } else {
+ setTheme("light");
+ }
+}
diff --git a/sites/hurl.dev/_includes/footer.html b/sites/hurl.dev/_includes/footer.html
index 646a7e0..d165c58 100644
--- a/sites/hurl.dev/_includes/footer.html
+++ b/sites/hurl.dev/_includes/footer.html
@@ -7,5 +7,3 @@
-
-
diff --git a/sites/hurl.dev/_includes/head.html b/sites/hurl.dev/_includes/head.html
index 83ebb9e..5c319e8 100644
--- a/sites/hurl.dev/_includes/head.html
+++ b/sites/hurl.dev/_includes/head.html
@@ -10,3 +10,6 @@
+
\ No newline at end of file
diff --git a/sites/hurl.dev/assets/js/common.js b/sites/hurl.dev/assets/js/common.js
deleted file mode 100644
index 98a350d..0000000
--- a/sites/hurl.dev/assets/js/common.js
+++ /dev/null
@@ -1,89 +0,0 @@
-document.getElementById("theme-toggle").addEventListener("click", () => {
- modeSwitcher();
-});
-
-document.getElementById("menu").addEventListener("click", () => {
- toggleMenu();
-})
-
-function toggleMenu() {
- const x = document.getElementById("top-nav-toc");
- if (x.style.display !== "block") {
- x.style.display = "block";
- } else {
- x.style.display = "none";
- }
-}
-
-// Dark mode switcher
-// Courtesy of https://derekkedziora.com/blog/dark-mode-revisited
-// Source code from: https://github.com/derekkedziora/jekyll-demo
-
-const lightElem = " Theme";
-const darkElem = " Theme";
-
-
-// This checks whether system dark mode is set
-const systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
-// this checks for session storage telling to override
-// the system preferences
-const theme = sessionStorage.getItem('theme');
-
-
-if (systemInitiatedDark.matches) {
- document.getElementById("theme-toggle").innerHTML = lightElem;
-} else {
- document.getElementById("theme-toggle").innerHTML = darkElem;
-}
-
-// Detect if the system preferences change.
-// Changes the site to match the system preferences.
-function prefersColorTest(e) {
- if (e.matches) {
- document.documentElement.setAttribute('data-theme', 'dark');
- document.getElementById("theme-toggle").innerHTML = lightElem;
- // this clears the session storage
- sessionStorage.setItem('theme', '');
- } else {
- document.documentElement.setAttribute('data-theme', 'light');
- document.getElementById("theme-toggle").innerHTML = darkElem;
- sessionStorage.setItem('theme', '');
- }
-}
-systemInitiatedDark.addListener(prefersColorTest);
-
-function modeSwitcher() {
- // It’s important to check for overrides again
- let currentTheme = sessionStorage.getItem('theme');
- // Checks if reader selected dark mode
- if (currentTheme === "dark") {
- document.documentElement.setAttribute('data-theme', 'light');
- sessionStorage.setItem('theme', 'light');
- document.getElementById("theme-toggle").innerHTML = darkElem;
- // checks if reader selected light mode
- } else if (currentTheme === "light") {
- document.documentElement.setAttribute('data-theme', 'dark');
- sessionStorage.setItem('theme', 'dark');
- document.getElementById("theme-toggle").innerHTML = lightElem;
- // checks if system set dark mode
- } else if (systemInitiatedDark.matches) {
- document.documentElement.setAttribute('data-theme', 'light');
- sessionStorage.setItem('theme', 'light');
- document.getElementById("theme-toggle").innerHTML = darkElem;
- // the only option left is system set light mode
- } else {
- document.documentElement.setAttribute('data-theme', 'dark');
- sessionStorage.setItem('theme', 'dark');
- document.getElementById("theme-toggle").innerHTML = lightElem;
- }
-}
-
-if (theme === "dark") {
- document.documentElement.setAttribute('data-theme', 'dark');
- sessionStorage.setItem('theme', 'dark');
- document.getElementById("theme-toggle").innerHTML = lightElem;
-} else if (theme === "light") {
- document.documentElement.setAttribute('data-theme', 'light');
- sessionStorage.setItem('theme', 'light');
- document.getElementById("theme-toggle").innerHTML = darkElem;
-}
\ No newline at end of file