1 files changed, 35 insertions, 0 deletions
diff --git a/pyssg.xyz/live/static/scripts/theme.js b/pyssg.xyz/live/static/scripts/theme.js
new file mode 100644
index 0000000..a107101
--- /dev/null
+++ b/pyssg.xyz/live/static/scripts/theme.js
@@ -0,0 +1,35 @@
+// refactored code for a better solution found in:
+//  https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2
+var local_storage = window.localStorage;
+
+// changed window.onload to document.addEventListener, as suggested here:
+//  https://stackoverflow.com/a/800010
+document.addEventListener("DOMContentLoaded", function(event) {
+  let theme = local_storage.getItem('theme');
+
+  if(theme == null){
+    local_storage.setItem('theme', 'theme-dark');
+  }
+  else{
+    if(theme == 'theme-dark'){
+      setTheme('theme-dark');
+    }
+    else{
+      setTheme('theme-light');
+    }
+  }
+})
+
+function setTheme(themeName){
+  local_storage.setItem('theme', themeName)
+  document.documentElement.className = themeName;
+}
+
+function toggleTheme(){
+  if (local_storage.getItem('theme') == 'theme-dark') {
+    setTheme('theme-light');
+  }
+  else{
+    setTheme('theme-dark');
+  }
+}