feat(UI): create a dark mode toggle

config/i18n/locales/english/translations.json

@@ -2,7 +2,8 @@
   "buttons": {
     "forum": "Forum",
     "donate": "Donate",
-    "load-more-articles": "Load More Articles"
+    "load-more-articles": "Load More Articles",
+    "toggle-dark-mode": "Toggle Dark Mode"
   },
   "search": {
     "label": "Search",

src/_includes/assets/css/global.css

@@ -4,7 +4,6 @@
 :root {
   /* Colours */
   --dark-blue: #002ead;
-  --theme-color: #0a0a23;
   --gray90: #0a0a23;
   --gray85: #1b1b32;
   --gray80: #2a2a40;
@@ -15,9 +14,32 @@
   --gray05: #eeeef0;
   --gray00: #fff;
   --header-height: 38px;
-  --blue-dark: #002ead;
 }
 
+body {
+    --primary-color: var(--gray90);
+    --secondary-color: var(--gray85);
+    --tertiary-color: var(--gray80);
+    --quaternary-color: var(--gray75);
+    --quaternary-background: var(--gray15);
+    --tertiary-background: var(--gray10);
+    --secondary-background: var(--gray05);
+    --primary-background: var(--gray00);
+}
+
+body.dark-mode
+{
+    --primary-color: var(--gray00);
+    --secondary-color: var(--gray05);
+    --tertiary-color: var(--gray10);
+    --quaternary-color: var(--gray15);
+    --quaternary-background: var(--gray75);
+    --tertiary-background: var(--gray80);
+    --secondary-background: var(--gray85);
+    --primary-background: var(--gray90);
+}
+
+
 /* Fonts
 /*------------------------------------------------------------*/
 /*@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700|Roboto+Mono:400,700");*/
@@ -285,7 +307,7 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
   overflow-x: hidden;
   color: var(--gray90);
   font-family: 'Lato', sans-serif;
@@ -295,7 +317,7 @@
   font-style: normal;
   letter-spacing: 0;
   text-rendering: optimizeLegibility;
-  background: #fff;
+  background: var(--primary-background);
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/_includes/assets/css/screen.css

@@ -34,7 +34,7 @@
 /* ---------------------------------------------------------- */
 
 body {
-  background: #fff;
+  background: var(--primary-background);
 }
 
 .img {
@@ -171,7 +171,7 @@
 /* ---------------------------------------------------------- */
 
 .site-nav {
   z-index: 300;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -180,7 +180,7 @@
   font-family: Lato, sans-serif;
   font-display: swap;
   height: var(--header-height);
-  background: var(--theme-color);
+  background: var(--gray90);
   position: fixed;
   z-index: 1000;
   color: #fff;
@@ -263,7 +263,7 @@
 a.nav-forum:hover,
 .nav li a:hover {
   background: white;
-  color: var(--theme-color);
+  color: var(--gray90);
   text-decoration: none;
 }
 
@@ -302,7 +302,7 @@
   background-color: #feac32;
   background-image: linear-gradient(#fecc4c, #ffac33);
   border: 3px solid #feac32;
-  color: var(--theme-color);
+  color: var(--gray90);
 }
 
 .toggle-button-nav:hover,
@@ -312,7 +312,7 @@
   border-width: 3px;
   border-color: #f1a02a;
   background-image: none;
-  color: var(--theme-color);
+  color: var(--gray90);
   text-decoration: none;
 }
 
@@ -378,7 +378,7 @@
 .rss-button svg {
   margin-bottom: 1px;
   height: 2.1rem;
-  fill: #fff;
+  fill: var(--primary-background);
 }
 
 @media (max-width: 999px) {
@@ -442,7 +442,7 @@
   overflow: hidden;
   margin: 0 20px 50px;
   min-height: 100px;
-  background: #fff center center;
+  background: var(--primary-background) center center;
   background-size: cover;
 }
 
@@ -474,7 +474,7 @@
 
 .post-card-tags a {
   margin-bottom: 1.3rem;
-  color: var(--gray75);
+  color: var(--quaternary-color);
   font-size: 1.5rem;
   line-height: 1.15em;
   font-weight: 500;
@@ -583,7 +583,7 @@
   margin: 0 -5px;
   width: 34px;
   height: 34px;
-  border: #fff 2px solid;
+  border: var(--primary-background) 2px solid;
 }
 
 .moving-avatar {
@@ -592,7 +592,7 @@
   margin: 0 -6px;
   width: 56px;
   height: 56px;
-  border: #fff 2px solid;
+  border: var(--primary-background) 2px solid;
   transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
 }
 
@@ -614,7 +614,7 @@
 .reading-time {
   flex-shrink: 0;
   margin-left: 20px;
-  color: var(--gray75);
+  color: var(--quaternary-color);
   font-size: 1.2rem;
   line-height: 20px;
   font-weight: 500;
@@ -625,7 +625,7 @@
 
 .meta-item-single {
   flex-shrink: 0;
-  color: var(--gray75);
+  color: var(--quaternary-color);
   font-size: 1.2rem;
   line-height: 33px;
   font-weight: 500;
@@ -722,7 +722,7 @@
 .post-template.site-main,
 .page-template.site-main {
   padding-bottom: 4vw;
-  background: #fff;
+  background: var(--primary-background);
 }
 
 .post-full {
@@ -803,7 +803,7 @@
   font-display: swap;
   font-size: 2.2rem;
   line-height: 1.6em;
-  background: #fff;
+  background: var(--primary-background);
 }
 
 /* Japanese font */
@@ -1954,8 +1954,8 @@
 /* ---------------------------------------------------------- */
 
 .site-footer {
-  color: var(--gray85);
-  background: var(--gray05);
+  color: var(--secondary-color);
+  background: var(--secondary-background);
   line-height: 1.6;
   padding: 40px 15px;
   font-size: 16px;
@@ -1985,7 +1985,7 @@
 }
 
 .site-footer a {
-  color: var(--gray85);
+  color: var(--secondary-color);
   text-decoration: none;
   padding: 2px;
 }
@@ -2271,7 +2271,7 @@
 a.banner {
   position: fixed;
   top: var(--header-height);
-  background-color: var(--blue-dark);
+  background-color: var(--dark-blue);
   align-items: center;
   justify-content: center;
   font-size: 14px;

src/_includes/assets/css/search-bar.css

@@ -205,7 +205,7 @@ a:active {
 
 /* Show default colors if disabled */
 .disabled:hover {
-  background: #eeeef0;
+  background: var(--secondary-background);
   color: #0a0a23;
 }
 

src/_includes/assets/js/dark-mode.js

@@ -0,0 +1,23 @@
+function loadDarkModePreference() {
+  const darkMode = localStorage.getItem('fcc-dark-mode');
+  if (darkMode === 'enabled' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.body.classList.add('dark-mode');
+  }
+}
+
+
+document.addEventListener("DOMContentLoaded", () =>
+{
+  loadDarkModePreference();
+  document.getElementById('toggle-dark-mode').addEventListener('click', function ()
+  {
+    document.body.classList.toggle('dark-mode');
+    if (document.body.classList.contains('dark-mode')) {
+      localStorage.setItem('fcc-dark-mode', 'enabled');
+    } else {
+      localStorage.setItem('fcc-dark-mode', 'disabled');
+    }
+  });
+}
+)
+

src/_includes/layouts/default.njk

@@ -48,6 +48,7 @@
             {% include "assets/js/search-bar.js" %}
             {% include "assets/js/client-dayjs.js" %}
             {% include "assets/js/cookie-checker.js" %}
+                {% include "assets/js/dark-mode.js" %}
         {% endset %}
         <script>{{ js | jsMin | safe }}</script>
 

src/_includes/partials/site-nav.njk

@@ -23,6 +23,7 @@
                 target="_blank"
                 data-test-label="donate-button"
             >{% t 'buttons.donate' %}</a>
+           <button class="toggle-button-nav" id="toggle-dark-mode" data-test-label="dark-mode-button">{% t 'buttons.toggle-dark-mode' %}</button>
         </div>
     </div>
 </nav>