Implement rudimentary support for theme switching

docs/_template/light-dark-theme/partials/footer.tmpl.partial

@@ -0,0 +1,19 @@
+{{!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>
+        <select onchange="getSelectionChange(this);" id="theme-switcher">
+          <option>Theme</option>
+          <option value="theme_dark">Dark</option>
+          <option value="theme_light">Light</option>
+        </select>
+      </span>
+      {{{_appFooter}}}
+      {{^_appFooter}}<span>Generated by <strong>DocFX</strong></span>{{/_appFooter}}
+    </div>
+  </div>
+</footer>

docs/_template/light-dark-theme/partials/head.tmpl.partial

@@ -11,8 +11,8 @@
   <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
   <link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.css">
   <link rel="stylesheet" href="{{_rel}}styles/docfx.css">
-  <link rel="stylesheet" href="{{_rel}}styles/dark.css">
-  <link rel="stylesheet" href="{{_rel}}styles/dracula.css">
+  <link rel="stylesheet" href="{{_rel}}styles/dark.css" title="theme_dark" >
+  <link rel="alternate stylesheet" href="{{_rel}}styles/light.css" title="theme_light">
   <link rel="stylesheet" href="{{_rel}}styles/main.css">
   <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.css" type="text/css" rel="stylesheet" />
   <meta property="docfx:navrel" content="{{_navRel}}">

docs/_template/light-dark-theme/partials/scripts.tmpl.partial

@@ -5,4 +5,5 @@
 <script type="text/javascript" src="{{_rel}}styles/main.js"></script>
 <script src="//code.jquery.com/jquery-latest.js"></script>
 <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript" src="{{_rel}}styles/plugin-featherlight.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/plugin-featherlight.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/styleswitcher.js"></script>

docs/_template/light-dark-theme/styles/dark.css

@@ -1,5 +1,6 @@
 /* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
 @import url('https://fonts.googleapis.com/css?family=Titillium+Web');
+@import url('dracula.css');
 html,
 body {
   font-family: 'Titillium Web', 'Segoe UI', Tahoma, Helvetica, sans-serif;
@@ -177,7 +178,8 @@ body .toc{
 code {
   color:white;
   background-color:#4a4c52;
-  border-radius:4px
+  border-radius:4px;
+  padding: 3px 7px;
 }
 pre {
   background-color: #282a36;

docs/_template/light-dark-theme/styles/light.css

@@ -4,193 +4,38 @@ html,
 body {
   font-family: 'Titillium Web', 'Segoe UI', Tahoma, Helvetica, sans-serif;
   height: 100%;
-  color: #212121;
-  background: #C0C0C0;
+  color: #000;
+  background: #fff;
   font-size: 15px;  
 }
-button,
-a {
-  color: #64B5F6;
-}
-button:hover,
-button:focus,
-a:hover,
-a:focus {
-  color: #2196F3;
-}
-a.disable,
-a.disable:hover {
-  color: #EEEEEE;
-}
-.divider {
-  color: #37474F;
-}
-hr {
-  border-color: #37474F;
-}
 header .navbar {
   border-width: 0 0 0px;
   border-radius: 0;
 }
-.subnav {
-  background: #383838
-}
-
-.inheritance h5, .inheritedMembers h5{
-  border-bottom: 1px solid #37474F;
-}
-
-article h4{
-  border-bottom: 1px solid #37474F;
-}
-.docs-search {
-  background: #424242;
-}
-.search-results-group-heading {
-  color: #424242;
-}
-.search-close {
-  color: #424242;
-}
-.sidetoc {
-  background-color: #1b1b1b;
-  border-left: 0px solid #37474F;
-  border-right: 0px solid #37474F;
-}
 .sideaffix{
   overflow: visible;
 }
-
 body .toc{
   background-color: inherit;
   overflow: visible;
 }
 
-.toc .nav > li > a {
-  color: rgb(218, 218, 218);
-}
-.toc .nav > li > a:hover,
-.toc .nav > li > a:focus {
-  color: #E0E0E0;
-}
-.toc .nav > li.active > a {
-  color: #90CAF9;
-}
-.toc .nav > li.active > a:hover,
-.toc .nav > li.active > a:focus {
-  color: #4FC3F7;
-}
-
-.sidefilter {
-  background-color: #1b1b1b;
-  border-left: 0px solid #37474F;
-  border-right: 0px solid #37474F;
-}
-.affix ul > li > a:hover {
-  background: none;
-  color: #EEEEEE;
-}
-.affix ul > li.active > a,
-.affix ul > li.active > a:before {
-  color: #B3E5FC;
-}
-.affix ul > li > a {
-  color: #EEEEEE;
-}
-.affix > ul > li.active > a,
-.affix > ul > li.active > a:before {
-  color: #B3E5FC;
-}
-.tryspan {
-  border-color: #37474F;
-}
-.footer {
-  border-top: 1px solid #5F5F5F;
-  background: #616161;
-}
-
-.alert-info {
-    color: #d9edf7;
-    background: #004458;
-    border-color: #005873
-}
-.alert-warning {
-  color: #fffaf2;
-  background: #80551a;
-  border-color: #99661f
-}
-.alert-danger {
-  color: #fff2f2;
-  background: #4d0000;
-  border-color: #660000
-}
-
-/* For tabbed content */
-
-.tabGroup {
-  margin-top: 1rem; }
-  .tabGroup ul[role="tablist"] {
-    margin: 0;
-    padding: 0;
-    list-style: none; }
-    .tabGroup ul[role="tablist"] > li {
-      list-style: none;
-      display: inline-block; }
-  .tabGroup a[role="tab"] {
-    color: white;
-    box-sizing: border-box;
-    display: inline-block;
-    padding: 5px 7.5px;
-    text-decoration: none;
-    border-bottom: 2px solid #fff; }
-    .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus, .tabGroup a[role="tab"][aria-selected="true"] {
-      border-bottom: 2px solid #607D8B; }
-    .tabGroup a[role="tab"][aria-selected="true"] {
-      color: #81D4FA; }
-    .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus {
-      color: #29B6F6; }
-    .tabGroup a[role="tab"]:focus {
-      outline: 1px solid #607D8B;
-      outline-offset: -1px; }
-  @media (min-width: 768px) {
-    .tabGroup a[role="tab"] {
-      padding: 5px 15px; } }
-  .tabGroup section[role="tabpanel"] {
-    border: 1px solid #607D8B;
-    padding: 15px;
-    margin: 0;
-    overflow: hidden; }
-    .tabGroup section[role="tabpanel"] > .codeHeader,
-    .tabGroup section[role="tabpanel"] > pre {
-      margin-left: -16px;
-      margin-right: -16px; }
-    .tabGroup section[role="tabpanel"] > :first-child {
-      margin-top: 0; }
-    .tabGroup section[role="tabpanel"] > pre:last-child {
-      display: block;
-      margin-bottom: -16px; }
-
-.mainContainer[dir='rtl'] main ul[role="tablist"] {
-  margin: 0; }
-
 /* code */
 code {
-  color:white;
-  background-color:#4a4c52;
-  border-radius:4px
-}
-pre {
-  background-color: #282a36;
+  color:#222f3d;
+  background-color: #f9f9f9;
+  border-radius:4px;
+  padding: 3px 7px;
 }
 
 /* table */
 .table-striped>tbody>tr:nth-of-type(odd) {
-  background-color:#333333;
-  color: #d3d3d3
+  color:#333333;
+  background-color: #d3d3d3
 }
 tbody>tr {
-  background-color:#424242;
-  color: #c0c0c0
+  color:#424242;
+  background-color: #c0c0c0
 }
 .table>tbody+tbody {
   border-top:2px solid rgb(173, 173, 173)

docs/_template/light-dark-theme/styles/styleswitcher.js

@@ -0,0 +1,69 @@
+function getSelectionChange(e){
+  var selectValue = e.options[e.selectedIndex].value;
+  setActiveStyleSheet(selectValue);
+}
+
+function setActiveStyleSheet(title) {
+  var i, a, main;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+      a.disabled = true;
+      if(a.getAttribute("title") == title) a.disabled = false;
+    }
+  }
+}
+
+function getActiveStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
+  }
+  return null;
+}
+
+function getPreferredStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1
+       && a.getAttribute("rel").indexOf("alt") == -1
+       && a.getAttribute("title")
+       ) return a.getAttribute("title");
+  }
+  return null;
+}
+
+function createCookie(name,value,days) {
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime()+(days*24*60*60*1000));
+    var expires = "; expires="+date.toGMTString();
+  }
+  else expires = "";
+  document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name) {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(';');
+  for(var i=0;i < ca.length;i++) {
+    var c = ca[i];
+    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  }
+  return null;
+}
+
+window.onload = function(e) {
+  var cookie = readCookie("style");
+  var title = cookie ? cookie : getPreferredStyleSheet();
+  setActiveStyleSheet(title);
+}
+
+window.onunload = function(e) {
+  var title = getActiveStyleSheet();
+  createCookie("style", title, 365);
+}
+
+var cookie = readCookie("style");
+var title = cookie ? cookie : getPreferredStyleSheet();
+setActiveStyleSheet(title);