feat: create a functional dark mode

Author: a2937

config/i18n/locales/english/translations.json

@@ -4,7 +4,8 @@
     "donate": "Donate",
     "load-more-articles": "Load More Articles",
     "menu": "Menu",
-    "learn": "Curriculum"
+    "learn": "Curriculum",
+    "toggle-dark-mode": "Night Mode"
   },
   "search": {
     "label": "Search",

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

@@ -12,7 +12,8 @@ const selectors = {
   postPublishedTime: "[data-test-label='post-published-time']",
   banner: "[data-test-label='banner']",
   dropDownMenu: "[data-test-label='header-menu']",
-  toggleDropDownMenuButton: "[data-test-label='header-menu-button']"
+  toggleDropDownMenuButton: "[data-test-label='header-menu-button']",
+  darkModeButton: "[data-test-label='dark-mode-button']"
 };
 
 describe('Landing (Hashnode sourced)', () => {
@@ -37,6 +38,44 @@ describe('Landing (Hashnode sourced)', () => {
       );
     });
 
+    const visit = (darkAppearance: boolean) =>
+      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.toggleDropDownMenuButton).click();
+      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.toggleDropDownMenuButton).click();
+      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 () {
+      cy.clearLocalStorage();
+      cy.clearCookies();
+      cy.get(selectors.toggleDropDownMenuButton).click();
+      cy.get(selectors.darkModeButton).click();
+      cy.window().then(win => {
+        expect(win.localStorage.getItem('theme')).to.equal('dark');
+      });
+      visit(false);
+    });
+
     // Because all templates readers see use `default.njk` as a base,
     // we can test the favicon here
     it('should have a favicon', () => {

src/_includes/assets/css/global.css

@@ -267,15 +267,15 @@ html {
 }
 body {
   overflow-x: hidden;
-  color: var(--gray90);
+  color: var(--primary-color);
   font-family: var(--font-family-sans-serif);
   font-size: 1.5rem;
   line-height: 1.6em;
   font-weight: 400;
   font-style: normal;
   letter-spacing: 0;
   text-rendering: optimizeLegibility;
-  background: var(--gray00);
+  background: var(--primary-background);
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -286,7 +286,7 @@ body {
 ::selection {
   text-shadow: none;
   background: var(--dark-blue);
-  color: var(--gray00);
+  color: var(--primary-background);
 }
 
 hr {
@@ -297,7 +297,7 @@ hr {
   padding: 0;
   height: 1px;
   border: 0;
-  border-top: 1px solid var(--gray75);
+  border-top: 1px solid var(--quaternary-color);
 }
 
 audio,
@@ -363,7 +363,7 @@ dt {
   float: left;
   margin: 0 20px 0 0;
   width: 120px;
-  color: var(--gray90);
+  color: var(--primary-color);
   font-weight: 500;
   text-align: right;
 }
@@ -376,7 +376,7 @@ dd {
 blockquote {
   margin: 1.5em 0;
   padding: 0 1.6em;
-  border-left: var(--gray10) 0.5em solid;
+  border-left: var(--tertiary-background) 0.5em solid;
 }
 
 blockquote p {