Dark mode optimization. (#59)

* Dark mode optimization. - Auto dark mode based on system preference. - Manual toggle switch at the bottom of the page. - Instant and dynamic responding. * default.html. Optimization on dark mode button. * improve dark theme toggle in default.html in advance * Fix inconsistency of font family. * Fix accidentally deleting archive navigator in footer. * Rewrite CSS based on variables. * Attempt to fix the logic of switching dark and light theme. (For most cases it works.) * Add auto theme option to theme switch. - Toggle option: dark, light, auto. - Reformat some files. - Fix the logic conflict of theme switch. * Fix the italic style of <i> in button.
agorahub · May 18, 2022 · 8d0eec4 · 8d0eec4
1 parent a034df4
commit 8d0eec4
Show file tree

Hide file tree

Showing 12 changed files with 926 additions and 474 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 _posts/
 _site/
 .*/
+/vendor
+.DS_Store
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -38,7 +38,7 @@ <h2>The Republic of Agora</h2>
       <a href="{{archive.site}}">{{archive.name}}</a> |
     {% endfor %}
     </span></p>
-    <p class="name">© {{ site.time | date: '%Y' }} The Agora Community<br>
+    <p class="name">© 2022 The Agora Community<br>
     {% for editor in site.data.editors %}
       <a href="https://github.com/{{editor.github}}">{{editor.class}} {{editor.name}}</a>
     {% endfor %}

diff --git a/_includes/head.html b/_includes/head.html
@@ -10,6 +10,7 @@
 
 <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
+<link rel="stylesheet" href="{{ "/assets/dark.css" | prepend: site.baseurl | prepend: site.url }}">
 <link rel="icon" href="{{ "/assets/favicon.png" | prepend: site.baseurl | prepend: site.url }}">
 <link rel="apple-touch-icon" href="{{ "/assets/touch-icon.png" | prepend: site.baseurl | prepend: site.url }}">
 <link rel="stylesheet" href="{{ "/assets/common.css" | prepend: site.baseurl | prepend: site.url }}">

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,7 +1,7 @@
 <div class="head">
   {% if page.title %}
   <div id="masthead">
-    <h3><a href="{{ site.baseurl | prepend: site.url}}">{{ site.title }}</a></h3>
+    <h3><a href="{{ site.baseurl | prepend: site.url}}/">{{ site.title }}</a></h3>
   </div>
 
   {% else %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,6 +3,7 @@
 
 	<head>
 		{% include head.html %}
+
 	</head>
 
 	<body>
@@ -20,6 +21,12 @@
 		  {% include footer.html %}
 		</footer>
 	{% endif %}
-	<p class="love">Made with <i class="fa fa-heart"></i> by <a href="https://github.com/agorahub">Agora</a></p>
+
+	<p class="love">
+		Made with <i class="fa fa-heart"></i> by <a href="https://github.com/agorahub">Agora</a>
+		<button class="hidden scheme"><i class="toggle d-adjust"></i></button>
+	</p>
+
+	<script src="{{ "/assets/auto-dark.js" | prepend: site.baseurl | prepend: site.url }}"></script>
 
 </html>
diff --git a/assets/auto-dark.js b/assets/auto-dark.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  const root = document.querySelector(':root');
+  const schemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+  const themeBtn = document.querySelector('button.scheme');
+  const themeIcon = themeBtn.querySelector('i');
+
+  themeBtn.classList.remove('hidden');
+
+  function setThemeUIState() {
+    const themeState = localStorage.getItem('theme') || 'auto';
+    const icon = {
+      light: 'sun',
+      dark: 'moon',
+    }[themeState] || 'adjust';
+
+    themeIcon.className = `toggle d-${icon}`;
+
+    if (themeState === 'auto') {
+      delete root.dataset.scheme;
+    } else {
+      root.dataset.scheme = themeState;
+    }
+  }
+
+  function setThemeExplicitly() {
+    const themeOrder = schemeMedia.matches
+      ? ['auto', 'light', 'dark']
+      : ['auto', 'dark', 'light'];
+
+    const storedTheme = localStorage.getItem('theme');
+    const themeState = themeOrder.includes(storedTheme) ? storedTheme : 'auto';
+    const nextState = (() => {
+      let current;
+      do {
+        current = themeOrder.shift();
+        themeOrder.push(current);
+      } while (current !== themeState);
+      return themeOrder.shift();
+    })();
+
+    localStorage.setItem('theme', nextState);
+    setThemeUIState();
+  }
+
+  schemeMedia.addEventListener('change', () => {
+    document.body.className = 'transitions';
+    setThemeUIState();
+  });
+  setThemeUIState();
+
+  themeBtn.addEventListener('click', () => {
+    document.body.className = 'transitions';
+    setThemeExplicitly();
+  });
+});
+
diff --git a/assets/common.css b/assets/common.css
@@ -247,11 +247,13 @@ a:hover {
   }
 }
 
+/* Corrects for the color of the footer */
 
 .love{
   margin: 0;
   font-size: 12px;
-  padding: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
   text-align: center;
   font-family: Mansalva;
 }
diff --git a/assets/dark.css b/assets/dark.css
@@ -0,0 +1,160 @@
+/* light color set
+  --post-tc1: #222222;
+  --post-tc2: #888888;
+  --post-tc3: #444444;
+
+  --news-tc1: #222222;
+  --news-tc2: #222222;
+  --news-bd: #222222;
+
+  --bkg-color: #ffffff;
+  --page-num: #222222;
+  --page-next: #444444;
+*/
+
+
+/* dark color set
+  --post-tc1: #e6e8ea; 
+  --post-tc2: #a0a7ae; 
+  --post-tc3: #e1dfdc; 
+
+  --news-tc1: #e6e8ea; 
+  --news-tc2: #e1dfdc; 
+  --news-bd: #c8cccf; 
+
+  --bkg-color: #1e2023; 
+  --page-num: #adb3b9;
+  --page-next: #e1dfdc;
+*/
+
+:root {
+  --post-tc1: #222222;
+  --post-tc2: #888888;
+  --post-tc3: #444444;
+
+  --news-tc1: #222222;
+  --news-tc2: #222222;
+  --news-bd: #222222;
+
+  --bkg-color: #ffffff;
+  --page-num: #222222;
+  --page-next: #444444;
+}
+
+:root[data-scheme="dark"] {
+  --post-tc1: #e6e8ea; /* h1, h2, h3 */
+  --post-tc2: #a0a7ae; /* h4 */
+  --post-tc3: #e1dfdc; /* p */
+
+  --news-tc1: #e6e8ea; /* h1, h2, h3 | h4 h5 h6 */
+  --news-tc2: #e1dfdc; /* p, blockquote, ul, ol, li */
+  --news-bd: #c8cccf; /* item border */
+
+  --bkg-color: #1e2023; /* universal */
+  --page-num: #adb3b9;
+  --page-next: #e1dfdc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-scheme="light"]) {
+    --post-tc1: #e6e8ea; /* h1, h2, h3 */
+    --post-tc2: #a0a7ae; /* h4 */
+    --post-tc3: #e1dfdc; /* p */
+
+    --news-tc1: #e6e8ea; /* h1, h2, h3 | h4 h5 h6 */
+    --news-tc2: #e1dfdc; /* p, blockquote, ul, ol, li */
+    --news-bd: #c8cccf; /* item border */
+
+    --bkg-color: #1e2023; /* universal */
+    --page-num: #adb3b9;
+    --page-next: #e1dfdc;
+  }
+}
+
+
+/* */
+
+.hidden {
+  display:none
+}
+
+button.scheme {
+  background: none;
+  border: none;
+  margin: 0;
+  outline: none;
+  padding:none
+}
+
+button.scheme:hover {
+  cursor:pointer
+}
+
+.toggle{
+  font-size: 1em;
+  font-style: normal;
+}
+
+.d-sun:after{
+  content: "🌕";
+}
+
+.d-moon:after{
+  content: "🌑";
+}
+
+.d-adjust:after{
+  content: "🌓";
+}
+
+/*
+  body.light-theme {
+    --post-tc1: #222222;
+    --post-tc2: #888888;
+    --post-tc3: #444444;
+
+    --news-tc1: #222222;
+    --news-tc2: #222222;
+    --news-bd: #222222;
+
+    --bkg-color: #ffffff;
+    --page-num: #222222;
+    --page-next: #444444;
+  }*/
+
+
+/*
+  --bkg-color is universal.
+
+  Default color settings: 
+    post.css:
+      - post-tc1(h1, h2, h3): #222222
+      - post-tc2(h4): #888888
+      - post-tc3(p): #444444
+    newspaper.css: 
+      **Colors are not specified originally.**
+      - news-tc1(h1, h2, h3): #222222
+      - news-tc2(p, blockquote): #222222
+      - news-bd(item border): #222222
+*/
+
+/*h1, p, h2, h3, h4, h5, h6, a, blockquote, ul, ol, li {
+  color: var(--text-color);
+}*/
+
+a.next, div.pagination{
+  color: var(--page-next);
+}
+
+span.page_number{
+  color: var(--page-num);
+}
+
+
+.btn-toggle{
+  cursor: pointer;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}
diff --git a/assets/newspaper.css b/assets/newspaper.css
@@ -10,7 +10,7 @@
 }
 .heroColumn img {
   max-width: 100%;
-//  height: 50%;
+/*  height: 50%;*/
   margin-bottom: .75em;
   display: block;
   margin: auto;
@@ -26,28 +26,41 @@
   box-sizing: border-box;
 }
 body {
+  background: var(--bkg-color);
   font-family: 'Georgia', serif;
   margin: 0;
 }
+ul,ol,li {
+  color: var(--news-tc2);
+}
 p {
+  color: var(--news-tc2);
   text-align: justify;
   margin:.25em 0 .5em 0;
   line-height:1.35em;
 }
+
+h1, h2, h4, h5, h6 {
+  color: var(--news-tc1);
+}
+
 h3 {
+  color: var(--news-tc1);
   margin: 0;
   padding: 0 0 .25em;
   font-size:1.5em;
   text-align: center;
 }
 article {
+  color: var(--news-tc1);
   margin-bottom: 1.5em;
 }
 blockquote {
+  color: var(--news-tc2);
   padding: 1em 0;
   margin: 0 0;
-//  border-top: 1px solid #ccc;
-  border-bottom: 1px dotted #ccc;
+  /*border-top: 1px solid #ccc;*/
+  border-bottom: 1px dotted var(--news-bd);
   font-family: sans-serif;
 }
 q {
@@ -74,21 +87,20 @@ q {
 }
 .item {
   display: block;
-  background: #fff;
+  /*background: #fff;*/
   padding: 0 1em;
   width: 104%;
-  -webkit-transition:1s ease all;
+  --webkit-transition:1s ease all;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-  border-left: 1px solid black;
+  border-left: 1px solid var(--news-bd);
 /*   if using inline-block, doesn't requre min-height or height but columns don't stretch as well vertically */
   min-height: 100%;
   height:100%;
 }
 
-/* Corrects for the color of the footer */
-.love {
+.love{
   background-color: #414141;
   color: #ffffff;
 }