Added skin switching functionality to a separate skins.html that is included in the head.html

- docRot and cookie handling is moded to the new skin hanling part that is always presented this way in each page very early
Signed-off-by: Hofi <hofione@gmail.com>

Author: HofiOne

_includes/head.html

@@ -6,15 +6,12 @@
   <link href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
 {% endunless %}
 
-<!-- https://t.co/dKP3o1e -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<script>
-  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
-</script>
+<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';</script>
+
+{% include skins.html %}
 
-<!-- For all browsers -->
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"></noscript>
 

_includes/skins.html

@@ -0,0 +1,108 @@
+{% comment %}
+<!-- Dynamic loading of the user selected skin stylesheet -->
+{% endcomment %}
+
+{% comment %}<!-- NOTE: the 'default' skin is in the 'main.css', see the main.scss file for details -->{% endcomment %}
+<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+<style>
+  #full-page-container.full-page-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: contents;
+  }
+
+  #full-page-container.hidden {
+    visibility: hidden;
+    display: none;
+  }
+</style>
+
+<script async="false">
+
+  // FIXME: How to get the real base URL (without using Liquid and Front Matter) ?!?!
+  const docRoot = '';
+  const darkSkin = 'midnight';
+  const lightSkin = 'default';
+
+  function docPrefix() {
+    return (docRoot != '' ? docRoot + '/' : '');    
+  }
+
+  function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
+  }
+
+  function getCookie(name, defaultValue = null) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1, c.length);
+      }
+      if (c.indexOf(nameEQ) == 0) {
+        return c.substring(nameEQ.length, c.length);
+      }
+    }
+    return defaultValue;
+  }
+
+  function setSkin(skin) {
+    const stylesheet = document.getElementById('skinedStylesheet');
+    //stylesheet.onload = saveChanges;
+    stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
+    setCookie('skin', skin, 365 * 100);
+  }
+
+  function toggleSkin() {
+    if (getCookie('skin', 'default') == darkSkin)
+      setSkin(lightSkin);
+    else
+      setSkin(darkSkin);
+    //location.reload();
+  }
+
+  /* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
+     half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
+  */
+  window.addEventListener("load", function () {
+    function saveChanges() {
+      const htmlStyle = window.getComputedStyle(document.documentElement);
+      const backgroundColor = htmlStyle.backgroundColor;
+      setCookie('skin-background-color', backgroundColor, 365 * 100);
+    };    
+
+    var container = document.getElementById("full-page-container");
+    if (container)
+      container.classList.remove('hidden');
+
+    // Why this is not working?!?!
+    //document.body.style.removeProperty("backgroundColor");
+    document.body.style.backgroundColor = "";
+
+    saveChanges();
+
+    $(".skin__toggle").on("click", toggleSkin);
+  });
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const skinBackgroundColor = getCookie('skin-background-color');
+    if (skinBackgroundColor)
+      document.body.style.backgroundColor = skinBackgroundColor;
+  });
+
+  const storedSkin = getCookie('skin', 'default');
+  if (storedSkin !== 'default')
+    setSkin(storedSkin);
+
+</script>

_layouts/base.html

@@ -1,4 +1,5 @@
 ---
+<!-- layout: compress -->
 ---
 
 <!doctype html>
@@ -15,6 +16,8 @@
   </head>
 
   <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}">
-    {{ content }}
+    <div id="full-page-container" class="full-page-container hidden">
+      {{ content }}
+    </div>
   </body>
 </html>