feat(UI): create night mode

config/i18n/locales/english/links.json

@@ -13,5 +13,12 @@
     "support": "https://www.freecodecamp.org/news/support/",
     "honesty": "https://www.freecodecamp.org/news/academic-honesty-policy/",
     "coc": "https://www.freecodecamp.org/news/code-of-conduct/"
+  },
+  "nav": {
+    "contribute": "https://contribute.freecodecamp.org/#/",
+    "forum": "https://forum.freecodecamp.org/",
+    "learn": "https://www.freecodecamp.org/learn",
+    "news": "https://freecodecamp.org/news/",
+    "podcast": "https://freecodecamp.libsyn.com/"
   }
 }

config/i18n/locales/english/translations.json

@@ -2,7 +2,11 @@
   "buttons": {
     "forum": "Forum",
     "donate": "Donate",
-    "load-more-articles": "Load More Articles"
+    "menu": "Menu",
+    "news": "News",
+    "curriculum": "Curriculum",
+    "load-more-articles": "Load More Articles",
+    "toggle-dark-mode": "Night Mode"
   },
   "search": {
     "label": "Search",
@@ -94,5 +98,8 @@
     "audio": "audio",
     "video": "video"
   },
-  "ad-text": "Advertisement"
+  "ad-text": "Advertisement",
+  "aria": {
+    "opens-new-window": "Opens in new window"
+  }
 }

cypress/e2e/english/landing/landing.cy.ts

@@ -1,6 +1,6 @@
 const commonExpectedMeta = require('../../../fixtures/common-expected-meta.json');
 const { loadAllPosts } = require('../../../support/utils/post-cards');
-
+import 'cypress-localstorage-commands';
 const selectors = {
   featureImage: "[data-test-label='feature-image']",
   postCard: "[data-test-label='post-card']",
@@ -10,7 +10,8 @@ const selectors = {
   avatar: "[data-test-label='avatar']",
   siteNavLogo: "[data-test-label='site-nav-logo']",
   postPublishedTime: "[data-test-label='post-published-time']",
-  banner: "[data-test-label='banner']"
+  banner: "[data-test-label='banner']",
+  darkModeButton: "[data-test-label='dark-mode-button']"
 };
 
 describe('Landing (Hashnode sourced)', () => {
@@ -35,6 +36,39 @@ describe('Landing (Hashnode sourced)', () => {
       );
     });
 
+    const visit = darkAppearance =>
+      cy.visit('/', {
+        onBeforeLoad(win) {
+          cy.stub(win, 'matchMedia')
+            .withArgs('(prefers-color-scheme: dark)')
+            .returns({
+              matches: darkAppearance
+            });
+        }
+      });
+
+    it('The dark mode button should be able to change the theme to dark mode from light mode', function () {
+      visit(false);
+      cy.get(selectors.darkModeButton).click();
+
+      cy.get('body', { timeout: 1000 }).should('have.class', 'dark-mode');
+    });
+
+    it('The dark mode button should be able to change the theme to light mode from dark mode', function () {
+      visit(true);
+      cy.get(selectors.darkModeButton).click();
+
+      cy.get('body', { timeout: 1000 }).should('not.have.class', 'dark-mode');
+    });
+
+    it('The theme should be set to dark and update the value in localStorage to dark', function () {
+      visit(false);
+      cy.get(selectors.darkModeButton).click();
+      cy.window().then(win => {
+        expect(win.localStorage.getItem('theme')).to.equal('dark');
+      });
+    });
+
     // Because all templates readers see use `default.njk` as a base,
     // we can test the favicon here
     it('should have a favicon', () => {

package.json

@@ -75,6 +75,7 @@
     "clean-css": "5.3.3",
     "cross-env": "7.0.3",
     "cypress": "13.17.0",
+    "cypress-localstorage-commands": "^2.2.7",
     "dayjs": "1.11.13",
     "dotenv": "16.5.0",
     "eslint": "8.57.1",

src/_includes/assets/css/global.css

@@ -1,25 +1,3 @@
-/* Variables
-/* ---------------------------------------------------------- */
-
-:root {
-  /* Colours */
-  --dark-blue: #002ead;
-  --theme-color: #0a0a23;
-  --gray90: #0a0a23;
-  --gray85: #1b1b32;
-  --gray80: #2a2a40;
-  --gray75: #3b3b4f;
-  --gray45: #858591;
-  --gray15: #d0d0d5;
-  --gray10: #dfdfe2;
-  --gray05: #eeeef0;
-  --gray00: #fff;
-  --header-height: 38px;
-  --blue-dark: #002ead;
-  /* Font */
-  --font-family-sans-serif: 'Lato', sans-serif;
-}
-
 /* Japanese Font */
 :root:lang(ja) {
   --font-family-sans-serif: 'Lato', 'Noto Sans JP', sans-serif;

src/_includes/assets/css/screen.css

@@ -34,7 +34,7 @@ on every page through _includes/layouts/default.njk
 /* ---------------------------------------------------------- */
 
 body {
-  background: #fff;
+  background: var(--primary-background);
 }
 
 .img {
@@ -311,7 +311,7 @@ a.nav-forum {
   border-width: 3px;
   border-color: #f1a02a;
   background-image: none;
-  color: var(--theme-color);
+  color: var(--gray90);
   text-decoration: none;
 }
 
@@ -374,7 +374,7 @@ a.nav-forum {
 .rss-button svg {
   margin-bottom: 1px;
   height: 2.1rem;
-  fill: #fff;
+  fill: var(--primary-background);
 }
 
 @media (max-width: 999px) {
@@ -438,7 +438,7 @@ a.nav-forum {
   overflow: hidden;
   margin: 0 20px 50px;
   min-height: 100px;
-  background: #fff center center;
+  background: var(--primary-background) center center;
   background-size: cover;
 }
 
@@ -470,7 +470,7 @@ a.nav-forum {
 
 .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;
@@ -484,7 +484,7 @@ a.nav-forum {
 }
 
 .post-card-title a {
-  color: var(--gray90);
+  color: var(--primary-color);
 }
 
 .post-card-content {
@@ -579,7 +579,7 @@ a.nav-forum {
   margin: 0 -5px;
   width: 34px;
   height: 34px;
-  border: #fff 2px solid;
+  border: var(--primary-background) 2px solid;
 }
 
 .moving-avatar {
@@ -588,7 +588,7 @@ a.nav-forum {
   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;
 }
 
@@ -610,7 +610,7 @@ a.nav-forum {
 .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;
@@ -718,7 +718,7 @@ make sure this only happens on large viewports / desktop-ish devices.
 .post-template.site-main,
 .page-template.site-main {
   padding-bottom: 4vw;
-  background: #fff;
+  background: var(--primary-background);
 }
 
 .post-full {
@@ -1957,8 +1957,8 @@ p:has(mjx-container.MathJax) {
 /* ---------------------------------------------------------- */
 
 .site-footer {
-  color: var(--gray85);
-  background: var(--gray05);
+  color: var(--secondary-color);
+  background: var(--primary-background);
   line-height: 1.6;
   padding: 40px 15px;
   font-size: 16px;
@@ -1988,7 +1988,7 @@ p:has(mjx-container.MathJax) {
 }
 
 .site-footer a {
-  color: var(--gray85);
+  color: var(--secondary-color);
   text-decoration: none;
   padding: 2px;
 }
@@ -2177,7 +2177,7 @@ p.footer-donation a:hover {
   align-items: center;
   display: flex;
   border: 2px solid #0a0a23;
-  background: #eeeef0;
+  background: var(--secondary-background);
   color: #0a0a23;
 }
 

src/_includes/assets/css/variables.css

@@ -0,0 +1,40 @@
+:root {
+  /* Colours */
+  --dark-blue: #002ead;
+  --theme-color: #0a0a23;
+  --gray90: #0a0a23;
+  --gray85: #1b1b32;
+  --gray80: #2a2a40;
+  --gray75: #3b3b4f;
+  --gray45: #858591;
+  --gray15: #d0d0d5;
+  --gray10: #dfdfe2;
+  --gray05: #eeeef0;
+  --gray00: #fff;
+  --header-height: 38px;
+  --blue-dark: #002ead;
+  /* Font */
+  --font-family-sans-serif: 'Lato', sans-serif;
+}
+
+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);
+}

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

@@ -0,0 +1,22 @@
+function loadDarkModePreference() {
+  const theme = localStorage.getItem('theme');
+  if (
+    window.matchMedia('(prefers-color-scheme: dark)')?.matches ||
+    theme == 'dark' ||
+    theme == 'night'
+  ) {
+    document.body.classList.add('dark-mode');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadDarkModePreference();
+  document
+    .getElementById('toggle-dark-mode')
+    .addEventListener('click', function () {
+      const currentTheme = localStorage.getItem('theme');
+      const invertedTheme = currentTheme === 'dark' ? 'light' : 'dark';
+      localStorage.setItem('theme', invertedTheme);
+      document.body.classList.toggle('dark-mode');
+    });
+});

src/_includes/layouts/default.njk

@@ -25,6 +25,7 @@
 
         {# News Theme Styles #}
         <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="{% cacheBuster '/assets/css/global.css' %}" />
+        <link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/variables.css' %}" />
         <link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/screen.css' %}" />
         <link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/search-bar.css' %}" />
 
@@ -47,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>
 
@@ -61,7 +63,7 @@
         {% if secrets.eleventyEnv === 'prod' %}
             {% include "partials/gtm-head.njk" %}
         {% endif %}
-        
+
         {# Dynamically load MathJax script #}
         {% block mathjax %}
         {% endblock %}