From 0cc7b2f32a3841754b3ca9e1294ea53cbd69089d Mon Sep 17 00:00:00 2001
From: b2a3e8 <31370519+b2a3e8@users.noreply.github.com>
Date: Fri, 5 Apr 2019 15:38:06 +0200
Subject: [PATCH] Make style switcher more intelligent: it can now switch
 between light and dark styling

---
 _includes/head.html      |  2 +-
 _layouts/default.html    | 17 +----------------
 assets/style-switcher.js | 24 ++++++++++++++++++++++++
 index.md                 |  2 +-
 4 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 assets/style-switcher.js

diff --git a/_includes/head.html b/_includes/head.html
index 700b686ae..c93008a93 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>{{ site.title }}{{ page.title }}</title>
   {%- seo title=false -%}
-  <link rel="stylesheet" href="{{ "/assets/main-dark.css" | relative_url }}">
+  <link id="main-dark" rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
diff --git a/_layouts/default.html b/_layouts/default.html
index ad4b53f3f..a5f7a7de0 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,21 +16,6 @@
 
     </div>
 
-    <script>
-    function enableLightStyles(number) {
-      var cssId = 'main-light';
-      if (!document.getElementById(cssId))
-      {
-          var head  = document.getElementsByTagName('head')[0];
-          var link  = document.createElement('link');
-          link.id   = cssId;
-          link.rel  = 'stylesheet';
-          link.type = 'text/css';
-          link.href = "{{ "/assets/main-light.css" | relative_url }}";
-          link.media = 'all';
-          head.appendChild(link);
-      }
-    }
-    </script>
+    <script type="text/javascript" src="{{ "/assets/style-switcher.js" | relative_url }}"></script>
   </body>
 </html>
diff --git a/assets/style-switcher.js b/assets/style-switcher.js
new file mode 100644
index 000000000..8697115d8
--- /dev/null
+++ b/assets/style-switcher.js
@@ -0,0 +1,24 @@
+function enableStyle (style) {
+    var head  = document.getElementsByTagName('head')[0];
+    var link  = document.createElement('link');
+    link.id   = style;
+    link.rel  = 'stylesheet';
+    link.type = 'text/css';
+    link.href = '/assets/' + style + '.css';
+    head.appendChild(link);
+}
+function disableStyle (style) {
+    var element = document.getElementById(style);
+    element.parentNode.removeChild(element);
+}
+function switchDarkLightStyles () {
+    var cssIdLight = 'main-light';
+    var cssIdDark = 'main-dark';
+    if (document.getElementById(cssIdDark)) {
+        enableStyle(cssIdLight);
+        setTimeout(function(){ disableStyle(cssIdDark) }, 500);
+    } else {
+        enableStyle(cssIdDark);
+        setTimeout(function(){ disableStyle(cssIdLight) }, 500);
+    }
+}
diff --git a/index.md b/index.md
index 79062ddd7..0d83a8322 100644
--- a/index.md
+++ b/index.md
@@ -10,4 +10,4 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 
 
-<a href="#" onclick="enableLightStyles()">light mode</a>
+<a href="#" onclick="switchDarkLightStyles()">light mode</a>