Make style switcher more intelligent: it can now switch between light…

… and dark styling

_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 -%}

_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>

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);
+    }
+}

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>