Changing theme change buttons to correlate to color clicked

docs/index.html

@@ -56,10 +56,10 @@ <h1>
     <div class="theme">
       <ul class="theme__list">
         <li class="theme__item">
-          <button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
+          <button class="theme__button" value="dark" title="Enable dark theme" onclick="themeChange(this)">Dark</button>
         </li>
         <li class="theme__item">
-          <button class="theme__button" value="light" title="Enable light theme">Light</button>
+          <button class="theme__button" value="light" title="Enable light theme" onclick="themeChange(this)">Light</button>
         </li>
       </ul>
     </div>
@@ -103,7 +103,9 @@ <h1>
       const style =
         `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
       console.log('%c■     ', style);
-      console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
+      console.log(
+        '👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design'
+      );
     }
 
     logLogo(100);
@@ -121,4 +123,4 @@ <h1>
   </script>
 </body>
 
-</html>
+</html>

docs/theme/theme.js

@@ -1,8 +1,8 @@
 var $body = document.body;
 var activeTheme = "dark";
 
-document.querySelector(".theme").onclick = function(e) {
+function themeChange(theme) {
   $body.classList.remove("js-theme-" + activeTheme);
-  activeTheme = activeTheme === "dark" ? "light" : "dark";
+  activeTheme = theme.value === "dark" ? "dark" : "light";
   $body.classList.add("js-theme-" + activeTheme);
-};
+}