.

public/js/toggle.js

@@ -0,0 +1,43 @@
+function toggleTheme() {
+
+  var stylesheet = document.getElementById('stylesheet');
+
+  if (stylesheet.getAttribute('href') === '/css/dark.css') {
+
+    // update stylesheet and store
+    stylesheet.setAttribute('href', '/css/light.css');
+    localStorage.setItem('stylesheet', '/css/light.css');
+    // update button emoji and store
+    button = document.getElementById('toggle-button').innerText = '🌚'
+    localStorage.setItem('button-emoji', '🌚');
+
+  } else {
+
+    // update stylesheet and store
+    stylesheet.setAttribute('href', '/css/dark.css');
+    localStorage.setItem('stylesheet', '/css/dark.css');
+    // update button emoji and store
+    button = document.getElementById('toggle-button').innerText = '🌞'
+    localStorage.setItem('button-emoji', '🌞');
+
+  }
+}
+
+window.addEventListener('load', function() {
+
+  // get stored style
+  var storedStyle = localStorage.getItem('stylesheet');
+  var stylesheet = document.getElementById('stylesheet');
+  // get stored emoji
+  var storedEmoji = localStorage.getItem('button-emoji');
+  var button = document.getElementById('toggle-button')
+
+  // set stored style it exists
+  if (storedStyle) {
+    stylesheet.setAttribute('href', storedStyle);
+  }
+  // set stored emoji it exists
+  if (storedEmoji) {
+    button.innerText = storedEmoji;
+  }
+});