Added basic skin switch button skeleton (not finished yet, but functioning)

Signed-off-by: Hofi <hofione@gmail.com>

Author: HofiOne

_includes/masthead.html

@@ -22,10 +22,20 @@
         </ul>
         {% if site.search == true %}
         <button class="search__toggle" type="button">
-          <span id="searchHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
+          <span id="searchHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
+            + F or ESC to close)" }}</span>
           <i class="fas fa-search"></i>
         </button>
         {% endif %}
+        {% if site.skin_switchable == true %}
+        <span class="skin__toggle_img"><i class="fa fa-sun-o"></i></span>
+        <button class="skin__toggle" type="button">
+          <!-- <span id="skinHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
+                    + F or ESC to close)" }}</span> -->
+          <i class="fa fa-toggle-off"></i>
+        </button>
+        <span class="skin__toggle_img"><i class="fa fa-moon-o"></i></span>
+        {% endif %}
         <button class="greedy-nav__toggle hidden" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
           <div class="navicon"></div>

_sass/minimal-mistakes/minimal-mistakes/_masthead.scss

@@ -96,3 +96,57 @@
     font-weight: 700;
   }
 }
+
+.skin__toggle {
+  position: relative;
+  display: inline-block;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  height: $nav-toggle-height;
+  border: 0;
+  outline: none;
+  color: $primary-color;
+  background-color: transparent;
+  cursor: pointer;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+
+  &:hover {
+    color: mix(#000, $primary-color, 25%);
+  }
+}
+
+.skin-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.skin__toggle_img {
+  position: relative;
+  display: inline-block;
+  margin-left: 0rem;
+  margin-right: 0rem;
+  width: calc($nav-toggle-height * 0.75);
+  height: calc($nav-toggle-height * 0.75);
+  border: 0;
+  outline: none;
+  color: $primary-color;
+  background-color: transparent;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+
+  &:hover {
+    color: mix(#000, $primary-color, 25%);
+  }
+}
+
+#skinHint {
+  display: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: -110px;
+  max-width: 100px;
+  font-size: 12px;
+  margin-left: 10px;
+}