From 29959d2e8c5037d554afce03fc141495394bf484 Mon Sep 17 00:00:00 2001
From: Christoph Zwerschke <cito@online.de>
Date: Wed, 20 May 2020 17:26:19 +0200
Subject: [PATCH 1/2] Make the switcher sticky at the top of the page

---
 index.html  | 9 ++++++++-
 switcher.js | 7 ++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index d10a5db..53e02e6 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,13 @@
       body {
         padding-left: 24px;
       }
+      #switcher {
+        position: sticky;
+        top: 0;
+        padding-bottom: 9px;
+        background: white;
+        box-shadow: 0 2px 1px -1px #ccc;
+      }
     </style>
     <script type="text/javascript">
       function quick_api() {
@@ -413,6 +420,6 @@
         <p>View this project on <a href="https://github.com/dohliam/dropin-minimal-css">GitHub</a>.</p>
       </footer>
     </div>
-    <script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
+    <script src="./switcher.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/switcher.js b/switcher.js
index d663b5b..6a92a85 100644
--- a/switcher.js
+++ b/switcher.js
@@ -40,10 +40,11 @@ function add_switcher() {
     head.appendChild(link);
   }
 
-  var new_div = document.createElement("div");
-  new_div.innerHTML = '      <div id="switcher">&nbsp;</div>\n      <script type="text/javascript">inline_switcher();</script>';
+  var new_div = document.createElement('div');
+  new_div.id = 'switcher';
+  new_div.innerHTML = '      <div>&nbsp;</div>\n      <script type="text/javascript">inline_switcher();</script>';
   document.body.insertBefore(new_div, document.body.firstChild);
-  document.body.style.paddingLeft = "24px"
+  document.body.style.paddingLeft = "24px";
 
   inline_switcher();
 }

From 2e00e7a6c1114d483d33d2bd074dc46fd16338fd Mon Sep 17 00:00:00 2001
From: Christoph Zwerschke <cito@online.de>
Date: Mon, 1 Jun 2020 23:34:52 +0200
Subject: [PATCH 2/2] Adapt background in sticky switcher to selected theme

---
 index.html  |  1 +
 switcher.js | 26 +++++++++++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index cb32578..d016a4e 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
         padding-bottom: 9px;
         background: white;
         box-shadow: 0 2px 1px -1px #ccc;
+        z-index: 999999;
       }
     </style>
     <script type="text/javascript">
diff --git a/switcher.js b/switcher.js
index f2b4a70..b6aafff 100644
--- a/switcher.js
+++ b/switcher.js
@@ -3,7 +3,7 @@ var frameworks = "a11yana,bahunya,bare,base,bullframe,bulma,caiuss,caramel,cardi
 add_switcher();
 
 function switch_css(css) {
-  document.getElementsByTagName("link")[0].href = "https://dohliam.github.io/dropin-minimal-css/min/" + css + ".min.css";
+  css_link.href = "https://dohliam.github.io/dropin-minimal-css/min/" + css + ".min.css";
 }
 
 function capitalize(s) {
@@ -13,6 +13,12 @@ function capitalize(s) {
   return u;
 }
 
+function on_css_load() {
+  var bgColor = getComputedStyle(document.body).backgroundColor;
+  if (bgColor.match(/^rgba\(.*\)/) ) bgColor = 'white';
+  switcher.style.backgroundColor = bgColor;
+}
+
 function inline_switcher() {
   switcher = document.getElementById("switcher");
   frameworks_array = frameworks.split(",");
@@ -30,21 +36,23 @@ function inline_switcher() {
 }
 
 function add_switcher() {
-  stylesheet = document.getElementsByTagName("link")[0];
-  if (stylesheet == undefined) {
+  css_link = document.getElementsByTagName("link")[0];
+  if (css_link == undefined) {
     head = document.getElementsByTagName('head')[0];
-    link = document.createElement('link');
-    link.rel="stylesheet";
-    link.type="text/css";
-    link.href="https://dohliam.github.io/dropin-minimal-css/min/" + frameworks.split(",")[0] + ".min.css";
-    head.appendChild(link);
+    css_link = document.createElement('link');
+    css_link.rel="stylesheet";
+    css_link.type="text/css";
+    css_link.href="https://dohliam.github.io/dropin-minimal-css/min/" + frameworks.split(",")[0] + ".min.css";
+    head.appendChild(css_link);
   }
 
   var new_div = document.createElement('div');
   new_div.id = 'switcher';
   new_div.innerHTML = '      <div>&nbsp;</div>\n      <script type="text/javascript">inline_switcher();</script>';
-  document.body.insertBefore(new_div, document.body.firstChild);
+  document.body.prepend(new_div);
   document.body.style.paddingLeft = "24px";
 
   inline_switcher();
+
+  css_link.onload = on_css_load;
 }