Improve theme selection

+ Stylized option menu
+ The menu now defaults to whatever theme being the most preferred one

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

@@ -5,12 +5,11 @@
   <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>
+        </select> 
+        <a href="#top">Back to top</a>
       </span>
       {{{_appFooter}}}
       {{^_appFooter}}<span>Generated by <strong>DocFX</strong></span>{{/_appFooter}}

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

@@ -197,3 +197,28 @@ tbody>tr {
 .table>tbody+tbody {
   border-top:2px solid rgb(173, 173, 173)
 }
+
+/* select */
+select {
+  display: inline-block;
+  overflow: auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px 0 6px;
+  vertical-align: middle;
+  height: 28px;
+  border: 1px solid #e3e3e3;
+  line-height: 16px;
+  outline: 0;
+  text-overflow: ellipsis;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  background-image: linear-gradient(45deg,transparent 50%,#707070 0),linear-gradient(135deg,#707070 50%,transparent 0);
+  background-position: calc(100% - 13px) 11px,calc(100% - 8px) 11px;
+  background-size: 5px 5px,5px 6px;
+  background-repeat: no-repeat;
+  background-color: #3b3b3b;
+  border-color: #2e2e2e;
+}

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

@@ -40,3 +40,28 @@ tbody>tr {
 .table>tbody+tbody {
   border-top:2px solid rgb(173, 173, 173)
 }
+
+/* select */
+select {
+  display: inline-block;
+  overflow: auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px 0 6px;
+  vertical-align: middle;
+  height: 28px;
+  border: 1px solid #e3e3e3;
+  line-height: 16px;
+  outline: 0;
+  text-overflow: ellipsis;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  background-image: linear-gradient(45deg,transparent 50%,#707070 0),linear-gradient(135deg,#707070 50%,transparent 0);
+  background-position: calc(100% - 13px) 11px,calc(100% - 8px) 11px;
+  background-size: 5px 5px,5px 6px;
+  background-repeat: no-repeat;
+  background-color: #fcfcfc;
+  border-color: #aeb1b5;
+}

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

@@ -1,6 +1,6 @@
 function getSelectionChange(e){
   var selectValue = e.options[e.selectedIndex].value;
-  setActiveStyleSheet(selectValue);
+  if (selectValue != null) setActiveStyleSheet(selectValue);
 }
 
 function setActiveStyleSheet(title) {
@@ -57,13 +57,10 @@ window.onload = function(e) {
   var cookie = readCookie("style");
   var title = cookie ? cookie : getPreferredStyleSheet();
   setActiveStyleSheet(title);
+  document.getElementById("theme-switcher").value = title;
 }
 
 window.onunload = function(e) {
   var title = getActiveStyleSheet();
   createCookie("style", title, 365);
-}
-
-var cookie = readCookie("style");
-var title = cookie ? cookie : getPreferredStyleSheet();
-setActiveStyleSheet(title);
+}