From 04b21a2f34745c9f0c521ad1f7071431e3fd2565 Mon Sep 17 00:00:00 2001
From: Hsu Still <341464@gmail.com>
Date: Fri, 6 Apr 2018 18:14:28 +0800
Subject: [PATCH] Improve theme selection

+ Stylized option menu
+ The menu now defaults to whatever theme being the most preferred one
---
 .../partials/footer.tmpl.partial              |  5 ++--
 .../light-dark-theme/styles/dark.css          | 25 +++++++++++++++++++
 .../light-dark-theme/styles/light.css         | 25 +++++++++++++++++++
 .../light-dark-theme/styles/styleswitcher.js  |  9 +++----
 4 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/docs/_template/light-dark-theme/partials/footer.tmpl.partial b/docs/_template/light-dark-theme/partials/footer.tmpl.partial
index 1f6afa00e..37efe0515 100644
--- a/docs/_template/light-dark-theme/partials/footer.tmpl.partial
+++ b/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}}
diff --git a/docs/_template/light-dark-theme/styles/dark.css b/docs/_template/light-dark-theme/styles/dark.css
index a268ea4f8..f014b8242 100644
--- a/docs/_template/light-dark-theme/styles/dark.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/docs/_template/light-dark-theme/styles/light.css b/docs/_template/light-dark-theme/styles/light.css
index 5b1d5abe9..1637bf60b 100644
--- a/docs/_template/light-dark-theme/styles/light.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/docs/_template/light-dark-theme/styles/styleswitcher.js b/docs/_template/light-dark-theme/styles/styleswitcher.js
index cd9807e3f..9ca71bb18 100644
--- a/docs/_template/light-dark-theme/styles/styleswitcher.js
+++ b/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);
+}
\ No newline at end of file