Add option for auto theme switching depending on system preference. (sergiokopplin#497)

Author: RicardoEPRodrigues

_config.yml

@@ -10,8 +10,9 @@ description: A blog about technology and stuff related
 external-image: false
 picture: assets/images/profile.jpg
 
-# your site color theme, false to light theme
-dark-theme: true
+# your site color theme, true for dark theme, 
+# false to light theme, auto to switch with system.
+dark-theme: auto
 
 # If you want to include your resume, set to true
 # and specify source (external or local).

_layouts/default.html

@@ -23,7 +23,15 @@
     <script src="https://kit.fontawesome.com/d9b09040a7.js" crossorigin="anonymous"></script>
 
     <style>
-    {% if site.dark-theme %}
+    
+    {% if site.dark-theme == "auto" %}
+        {% capture scss_sheet %}
+            {% include style.scss %}
+            @media (prefers-color-scheme: dark) {
+                {% include style-dark.scss %}
+            }
+        {% endcapture %}
+    {% elsif site.dark-theme %}
         {% capture scss_sheet %}{% include style-dark.scss %}{% endcapture %}
     {% else %}
         {% capture scss_sheet %}{% include style.scss %}{% endcapture %}