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.js

@@ -10,12 +10,23 @@ const selectors = {
   avatar: "[data-test-label='avatar']",
   siteNavLogo: "[data-test-label='site-nav-logo']",
   postPublishedTime: "[data-test-label='post-published-time']",
+  menuButton: "[data-test-label='header-menu-button']",
+  menu: "[data-test-label='header-menu']",
+  darkModeButton: "[data-test-label='dark-mode-button']",
   banner: "[data-test-label='banner']"
 };
 
 describe('Landing', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme: light)')
+          .returns({
+            matches: true
+          });
+      }
+    });
     loadAllPosts();
   });
 
@@ -33,6 +44,25 @@ describe('Landing', () => {
     );
   });
 
+  it('Clicking the menu button should open the menu', function () {
+    cy.get(selectors.menuButton).should('be.visible').click();
+    cy.get(selectors.menu).should('be.visible');
+  });
+
+  it('The menu should be able to change the theme', function () {
+    cy.get(selectors.menuButton).click();
+    cy.get(selectors.menu).should('be.visible');
+    cy.get(selectors.darkModeButton).click();
+
+    cy.get('body', { timeout: 1000 }).should('have.class', 'dark-mode');
+    cy.get(selectors.siteNavLogo).click();
+    cy.get(selectors.menu).should('not.be.visible');
+    cy.get(selectors.menuButton).click();
+    cy.get(selectors.menu).should('be.visible');
+    cy.get(selectors.darkModeButton).click();
+    //cy.get('body', { timeout: 1000 }).should('not.have.class', 'dark-mode');
+  });
+
   it("should show the author's profile image", () => {
     cy.get(selectors.postCard)
       .contains(

package.json

@@ -105,5 +105,8 @@
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0"
   }
 }

src/_includes/assets/css/global.css

@@ -1,23 +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;
-}
-
 /* Fonts
 /*------------------------------------------------------------*/
 /*@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700|Roboto+Mono:400,700");*/
@@ -285,6 +265,7 @@ html {
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
 body {
   overflow-x: hidden;
   color: var(--gray90);
@@ -295,7 +276,7 @@ body {
   font-style: normal;
   letter-spacing: 0;
   text-rendering: optimizeLegibility;
-  background: #fff;
+  background: var(--primary-background);
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -494,3 +475,147 @@ h6 {
   font-size: 1.4rem;
   font-weight: 500;
 }
+
+/**
+ * Site header menu list
+ */
+.nav-list {
+  background-color: var(--gray90);
+  display: none;
+  justify-content: flex-end;
+  list-style: none;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+
+/**
+ * Site header language list
+ */
+.lang-button-nav[aria-expanded='true'] + .nav-list {
+  -ms-overflow-style: none;
+  display: block;
+  max-height: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  scrollbar-width: none;
+  top: calc(var(--header-height));
+}
+
+.lang-button-nav[aria-expanded='true'] + .nav-list::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 601px) {
+  [dir='rtl'] .nav-list {
+    right: auto;
+    left: 0;
+  }
+}
+
+/* WCAG fix */
+.sr-only {
+  color: white;
+  background-color: black;
+}
+
+/**
+ * Check mark for current language
+ */
+.nav-lang-list-option[aria-current='true'] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg fill='white'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06a.733.733 0 0 1 1.047 0l3.052 3.093l5.4-6.425a.247.247 0 0 1 .02-.022z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+  background-size: 1.2rem;
+  background-position: calc(100% - 10px) center;
+  background-repeat: no-repeat;
+}
+
+.nav-lang-list-option[aria-current='true']:hover,
+.nav-lang-list-option[aria-current='true']:focus-visible {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg fill='currentColor'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06a.733.733 0 0 1 1.047 0l3.052 3.093l5.4-6.425a.247.247 0 0 1 .02-.022z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important;
+}
+
+/**
+ * Sub menu dividers
+ */
+.nav-line {
+  border-top: 0.0625rem solid var(--gray45);
+}
+
+/**
+ * Site navigation first level CTA's
+ */
+.exposed-button-nav,
+.lang-button-nav {
+  align-items: center;
+  background-color: var(--gray90);
+  border: 1px solid var(--gray00);
+  color: var(--gray00);
+  display: flex;
+  font-size: 18px;
+  height: var(--header-element-size);
+  justify-content: center;
+  min-width: var(--header-element-size);
+  padding: 0 4px;
+}
+
+@media (min-width: 601px) {
+  .exposed-button-nav {
+    padding-inline: 12px;
+  }
+}
+
+.exposed-button-nav:hover,
+.exposed-button-nav:hover:focus {
+  border: 1px solid var(--gray00);
+}
+
+.exposed-button-nav:is(
+    :hover,
+    :hover:focus,
+    [aria-expanded='true'],
+    [aria-expanded='true']:hover
+  ),
+.lang-button-nav:is(
+    :hover,
+    :hover:focus,
+    [aria-expanded='true'],
+    [aria-expanded='false'].force-show
+  ) {
+  background-color: var(--gray00);
+  color: var(--gray90);
+}
+
+/**
+ * Text and icon handling for first level CTA's
+ *
+ * Login btn icon is used in other places different from the site navigation
+ * and is expected to not to be displayed. The default is to hide the element
+ * but on the site navigation display it only on small viewports.
+ */
+.login-btn-icon {
+  display: none;
+}
+
+#toggle-button-nav .menu-btn-text,
+#universal-nav .login-btn-text {
+  display: none;
+}
+
+@media (min-width: 601px) {
+  #toggle-button-nav .menu-btn-text,
+  #universal-nav .login-btn-text {
+    display: inline-block;
+  }
+}
+
+#toggle-button-nav .menu-btn-icon,
+#universal-nav .login-btn-icon {
+  display: inline-block;
+}
+
+@media (min-width: 601px) {
+  #toggle-button-nav .menu-btn-icon,
+  #universal-nav .login-btn-icon {
+    display: none;
+  }
+}