Feature: Make theme colors configurable.

2020-02-15 04:05:31 +08:00 · 2020-02-15 04:05:31 +08:00 · 79c7a5101f
commit 79c7a5101f
parent b43c162903
3 changed files with 22 additions and 1 deletions
--- a/_config.yml
+++ b/_config.yml
@ -67,6 +67,18 @@ disqus:
 # The year your website first ran.
 first_run: 2019

+
+# Prefer color scheme setting, available values:
+#
+#     dual   - Follow the system prefer color by default, and a toggle will display
+#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+#
+#     light  - Use the light color scheme
+#
+#     dark   - Use the dark color scheme
+#
+theme_mode: dual
+
 # boolean type, global switch for ToC in posts.
 toc: true

--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@ -57,9 +57,11 @@

 <div class="sidebar-bottom d-flex justify-content-around mt-4">

+  {% if site.theme_mode == "dual" %}
  <span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
    {% include mode-toggle.html %}
  </span>
+  {% endif %}

  <a href="https://github.com/{{ site.github.username }}" target="_blank">
    <i class="fab fa-github-alt"></i>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -8,7 +8,14 @@ layout: compress
 ---

 <!DOCTYPE html>
-<html lang="en">
+
+{% capture prefer_mode %}
+  {% if site.theme_mode != "dual" %}
+    mode="{{ site.theme_mode }}"
+  {% endif %}
+{% endcapture %}
+
+<html lang="en" {{ prefer_mode }} >

  {% include head.html %}