feat: theme toggle as option in config

Author: Knhash

_assets/javascripts/application.js

@@ -16,31 +16,4 @@ $(document).ready(function() {
     window.open($(this).attr('href'), 'Share', 'width=200,height=200,noopener');
     return false;
   });
-});
-
-//Theme initialize
-if (!localStorage.getItem('theme'))
-  localStorage.setItem('theme', "light");
-themer();
-
-// Theme toggle
-function toggle() {
-  if(localStorage.getItem('theme') == "light")
-    localStorage.setItem('theme', "dark");
-  else if(localStorage.getItem('theme') == "dark")
-    localStorage.setItem('theme', "light");
-  themer();
-}
-
-// Theme set
-function themer() {
-  var tone = localStorage.getItem('theme');
-  var light = document.getElementById("light");
-
-  if(tone == "dark"){
-    dark.disabled = false;
-  }
-  else{
-    dark.disabled = true;
-  }
-}
+});

_assets/javascripts/themetoggle.js

@@ -0,0 +1,26 @@
+//Theme initialize
+if (!localStorage.getItem('theme'))
+  localStorage.setItem('theme', "light");
+themer();
+
+// Theme toggle
+function toggle() {
+  if(localStorage.getItem('theme') == "light")
+    localStorage.setItem('theme', "dark");
+  else if(localStorage.getItem('theme') == "dark")
+    localStorage.setItem('theme', "light");
+  themer();
+}
+
+// Theme set
+function themer() {
+  var tone = localStorage.getItem('theme');
+  var light = document.getElementById("light");
+
+  if(tone == "dark"){
+    dark.disabled = false;
+  }
+  else{
+    dark.disabled = true;
+  }
+}

_config.yml

@@ -8,6 +8,7 @@ url: # add your site url (format: https://example.com)
 
 # Optional settings
 
+theme_toggle: false # Change to true if you wish to show an icon in the navigation for dynamic theme toggling
 about_enabled: false # Change to true if you wish to show an icon in the navigation that redirects to the about page
 baseurl: # Set if blog doesn't sit at the root of the domain (format: /blog)
 discus_identifier: # Add your Disqus identifier

_includes/head.html

@@ -35,15 +35,32 @@
     {% asset fonts.css %}
   {% endif %}
 
-  {% if site.blog_theme == "light" %}
-    <link rel="icon" type="image/x-icon" href="{% asset favicon-light.ico @path %}">
-    <link rel="apple-touch-icon" href="{% asset apple-touch-icon-light.png @path %}">
-    <link rel="stylesheet" type="text/css" title="light" id="light" href="{% asset light.css @path%}">
-    <link rel="stylesheet" type="text/css" title="dark" id="dark" href="{% asset dark.css @path%}" disabled="true">
+  {% if site.theme_toggle == true %}
+
+    {% if site.blog_theme == "light" %}
+      <link rel="icon" type="image/x-icon" href="{% asset favicon-light.ico @path %}">
+      <link rel="apple-touch-icon" href="{% asset apple-touch-icon-light.png @path %}">
+      <link rel="stylesheet" type="text/css" title="light" id="light" href="{% asset light.css @path%}">
+      <link rel="stylesheet" type="text/css" title="dark" id="dark" href="{% asset dark.css @path%}" disabled="true">
+    {% else %}
+      <link rel="icon" type="image/x-icon" href="{% asset favicon-dark.ico @path %}">
+      <link rel="apple-touch-icon" href="{% asset apple-touch-icon-dark.png @path %}">
+      <link rel="stylesheet" type="text/css" title="light" id="light" href="{% asset light.css @path%}">
+      <link rel="stylesheet" type="text/css" title="dark" id="dark" href="{% asset dark.css @path%}" disabled="false">
+    {% endif %}
+
   {% else %}
-    <link rel="icon" type="image/x-icon" href="{% asset favicon-dark.ico @path %}">
-    <link rel="apple-touch-icon" href="{% asset apple-touch-icon-dark.png @path %}">
-    <link rel="stylesheet" type="text/css" title="light" id="light" href="{% asset light.css @path%}">
-    <link rel="stylesheet" type="text/css" title="dark" id="dark" href="{% asset dark.css @path%}" disabled="false">
+
+    {% if site.blog_theme == "light" %}
+      <link rel="icon" type="image/x-icon" href="{% asset favicon-light.ico @path %}">
+      <link rel="apple-touch-icon" href="{% asset apple-touch-icon-light.png @path %}">
+      {% asset light.css %}
+    {% else %}
+      <link rel="icon" type="image/x-icon" href="{% asset favicon-dark.ico @path %}">
+      <link rel="apple-touch-icon" href="{% asset apple-touch-icon-dark.png @path %}">
+      {% asset dark.css %}
+    {% endif %}
+
   {% endif %}
+  
 </head>

_includes/javascripts.html

@@ -19,3 +19,7 @@
 {% endif %}
 
 {% asset application.js %}
+
+{% if site.theme_toggle == true %}
+  {% asset themetoggle.js %}
+{% endif %}

_includes/navigation.html

@@ -169,10 +169,12 @@
         </a>
       </li>
     {% endif %}
-    <li>
-      <a onclick="toggle()" title="Toggle Theme">
-        {% include svg-icon.html icon="theme" %}
-      </a>
-    </li>
+    {% if site.theme_toggle == true %}
+      <li>
+        <a onclick="toggle()" title="Toggle Theme">
+          {% include svg-icon.html icon="theme" %}
+        </a>
+      </li>
+    {% endif %}
   </ul>
 </nav>