Support switching theme style on mobile devices

Fixes #5

darkfx/partials/affix.tmpl.partial

@@ -29,7 +29,6 @@
       <div class="icon">
         <i aria-hidden="true">☾</i>
       </div>
-      <script type="text/javascript" src="{{_rel}}styles/toggle-theme.js"></script>
     </div>
 
     <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">

darkfx/partials/footer.tmpl.partial

@@ -0,0 +1,29 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<footer>
+  <div class="grad-bottom"></div>
+  <div class="footer">
+    <div class="container">
+      <span class="pull-right">
+        <a href="#top">Back to top</a>
+      </span>
+      <div class="pull-left">
+        {{{_appFooter}}}
+        {{^_appFooter}}<span>Generated by <strong>DocFX</strong></span>{{/_appFooter}}
+      </div>
+      <div class="toggle-mode pull-right visible-sm visible-xs">
+        <div class="icon">
+          <i aria-hidden="true">☀</i>
+        </div>
+        <label class="switch">
+          <input type="checkbox" id="switch-style-m">
+          <span class="slider round"></span>
+        </label>
+        <div class="icon">
+          <i aria-hidden="true">☾</i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript" src="{{_rel}}styles/toggle-theme.js"></script>
+</footer>

darkfx/styles/toggle-theme.js

@@ -1,14 +1,35 @@
-const sw = document.getElementById("switch-style"), b = document.body;
-if (sw && b) {
-  sw.checked = !window.localStorage || !window.localStorage.getItem("theme") || window.localStorage && localStorage.getItem("theme") === "dark-theme";
-  b.classList.toggle("dark-theme", sw.checked)
-  b.classList.toggle("light-theme", !sw.checked)
-
-  sw.addEventListener("change", function (){
-    b.classList.toggle("dark-theme", this.checked)
-    b.classList.toggle("light-theme", !this.checked)
+const sw = document.getElementById("switch-style"), sw_mobile = document.getElementById("switch-style-m"), b = document.body;
+if (b) {
+  function toggleTheme(target, dark) {
+    target.classList.toggle("dark-theme", dark)
+    target.classList.toggle("light-theme", !dark)
+  }
+
+  function switchEventListener() {
+    toggleTheme(b, this.checked);
     if (window.localStorage) {
       this.checked ? localStorage.setItem("theme", "dark-theme") : localStorage.setItem("theme", "light-theme")
     }
-  })
+  }
+
+  var isDarkTheme = !window.localStorage || !window.localStorage.getItem("theme") || window.localStorage && localStorage.getItem("theme") === "dark-theme";
+
+  if(sw && sw_mobile){
+    sw.checked = isDarkTheme;
+    sw_mobile.checked = isDarkTheme;
+
+    sw.addEventListener("change", switchEventListener);
+    sw_mobile.addEventListener("change", switchEventListener);
+
+    // sync state between switches
+    sw.addEventListener("change", function() {
+      sw_mobile.checked = this.checked;
+    });
+
+    sw_mobile.addEventListener("change", function() {
+      sw.checked = this.checked;
+    });
+  }
+
+  toggleTheme(b, isDarkTheme);
 }