diff --git a/docs/_coverpage.md b/docs/_coverpage.md
index 04feae02ea5..1c3e0bb59d1 100644
--- a/docs/_coverpage.md
+++ b/docs/_coverpage.md
@@ -1,4 +1,4 @@
-> ## Contribute to freeCodeCamp.org
+# Contribute to freeCodeCamp.org
 
 ## This community is possible thanks to thousands of kind volunteers like you.
 
diff --git a/docs/_theme.css b/docs/_theme.css
index 4fc5e8ca03b..62e61485d0f 100644
--- a/docs/_theme.css
+++ b/docs/_theme.css
@@ -1,20 +1,86 @@
 :root {
   --theme-color: #0a0a23;
-  --theme-color-dark: #002ead;
+  --yellow-gold: #ffbf00;
+  --gray-00: #ffffff;
+  --gray-05: #f5f6f7;
+  --gray-10: #dfdfe2;
+  --gray-15: #d0d0d5;
+  --gray-45: #858591;
+  --gray-75: #3b3b4f;
+  --gray-80: #2a2a40;
+  --gray-85: #1b1b32;
+  --gray-90: #0a0a23;
+  --purple-light: #dbb8ff;
+  --purple-dark: #5a01a7;
+  --yellow-light: #ffc300;
+  --yellow-dark: #4d3800;
+  --blue-light: rgb(153, 201, 255);
+  --blue-light-translucent: rgba(153, 201, 255, 0.3);
+  --blue-dark: rgb(0, 46, 173);
+  --blue-dark-translucent: rgba(0, 46, 173, 0.3);
+  --green-light: #acd157;
+  --blue-mid: #198eee;
+  --purple-mid: #9400d3;
+  --green-dark: #00471b;
+  --red-light: #ffadad;
+  --red-dark: #850000;
+  --love-light: #f8577c;
+  --love-dark: #f82153;
+  --editor-background-light: #fffffe;
+  --editor-background-dark: #2a2b40;
+  --focus-outline-color: var(--blue-mid);
+  --font-family-sans-serif: 'Lato', sans-serif;
+  --font-family-monospace: 'Hack-ZeroSlash', monospace;
 
-  --text-color-base: #2e2e46;
-  --text-color-secondary: #646473;
-  --text-color-tertiary: #81818e;
-
-  --line-height: 2rem;
-  --bg-color: #ffffff;
   --size: 1.5rem;
+  --line-height: 2rem;
+}
+
+.light {
+  --primary-color: var(--gray-90);
+  --secondary-color: var(--gray-85);
+  --tertiary-color: var(--gray-80);
+  --quaternary-color: var(--gray-75);
+  --quaternary-background: var(--gray-15);
+  --tertiary-background: var(--gray-10);
+  --secondary-background: var(--gray-05);
+  --primary-background: var(--gray-00);
+  --highlight-color: var(--blue-dark);
+  --highlight-background: var(--blue-light);
+  --selection-color: var(--blue-dark-translucent);
+  --success-color: var(--green-dark);
+  --success-background: var(--green-light);
+  --danger-color: var(--red-dark);
+  --danger-background: var(--red-light);
+  --love-color: var(--love-dark);
+  --editor-background: var(--editor-background-light);
+}
+
+.dark {
+  --primary-color: var(--gray-00);
+  --secondary-color: var(--gray-05);
+  --tertiary-color: var(--gray-10);
+  --quaternary-color: var(--gray-15);
+  --quaternary-background: var(--gray-75);
+  --tertiary-background: var(--gray-80);
+  --secondary-background: var(--gray-85);
+  --primary-background: var(--gray-90);
+  --highlight-color: var(--blue-light);
+  --highlight-background: var(--blue-dark);
+  --selection-color: var(--blue-light-translucent);
+  --success-color: var(--green-light);
+  --success-background: var(--green-dark);
+  --danger-color: var(--red-light);
+  --danger-background: var(--red-dark);
+  --love-color: var(--love-light);
+  --editor-background: var(--editor-background-dark);
 }
 
 body {
   font-size: 100%;
-  line-height: 2em;
-  color: var(--text-color);
+  line-height: 2.3em;
+  background: var(--secondary-background);
+  color: var(--secondary-color);
 }
 
 * {
@@ -42,7 +108,7 @@ body .content {
 }
 
 .universal-nav a.translations-link {
-  color: var(--bg-color);
+  color: var(--gray-00);
   position: fixed;
   right: 50px;
   line-height: 24px;
@@ -70,14 +136,24 @@ body .content {
   }
 }
 
+.theme-toggle {
+  background-color: var(--tertiary-background);
+  position: fixed;
+  left: 10px;
+  line-height: 24px;
+  font-size: 16px;
+  margin: 2px 0;
+  padding: 4px;
+}
+
 /****** Cover Page ******/
 
 section.cover {
   padding-bottom: 112px;
   height: auto;
   min-height: 100vh;
-  background: var(--bg-color) !important;
-  color: var(--theme-color);
+  background: var(--secondary-background) !important;
+  color: var(--secondary-color);
 }
 
 section.cover .cover-main {
@@ -89,28 +165,29 @@ section.cover .cover-main {
   padding: 32px 16px 0;
 }
 
-section.cover img {
-  width: 400px;
-}
-
 section.cover h1 {
-  margin: 0.625rem 0 1rem;
+  font-weight: bold;
+  font-size: 2.3rem;
+  margin: 2em 0;
 }
 
-section.cover blockquote,
-section.cover blockquote p {
-  margin: 1.5em 0;
+section.cover span {
+  background-color: var(--secondary-background);
+  color: var(--secondary-color);
 }
 
 section.cover a {
   text-decoration: none;
-  border-bottom: 0.01rem solid var(--theme-color);
+  border-bottom: 0.01rem solid var(--secondary-color);
+  color: var(--secondary-color);
+  background-color: var(--secondary-background);
   transition: all 0.3s ease;
 }
 
 section.cover a:hover {
-  border-color: var(--theme-color-dark);
-  color: var(--theme-color-dark);
+  background-color: var(--tertiary-background);
+  color: var(--tertiary-color);
+  border: none;
 }
 
 section.cover a.anchor {
@@ -136,15 +213,17 @@ section.cover ul {
 section.cover .cover-main > p:last-child a:last-child {
   font-size: var(--size);
   line-height: var(--line-height);
-  background-color: var(--theme-color);
-  color: var(--bg-color);
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
+  border-radius: 0;
+  border: 3px solid var(--secondary-color);
 }
 
 section.cover .cover-main > p:last-child a:last-child:hover {
   font-size: var(--size);
   line-height: var(--line-height);
-  background-color: var(--theme-color-dark);
-  color: var(--bg-color);
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
   opacity: 1;
 }
 
@@ -186,14 +265,28 @@ section.cover.show ~ .sidebar-toggle {
 
 /****** Sidebar ******/
 
-.sidebar ul li a:hover {
-  color: var(--theme-color);
+.sidebar {
+  background-color: var(--primary-background);
+  color: var(--quaternary-color);
+  padding: 0;
+}
+
+.sidebar ul li a {
+  color: var(--quaternary-color);
+}
+
+.sidebar ul li > a:hover {
+  color: var(--primary-color);
 }
 
 .sidebar .search .clear-button {
   cursor: pointer;
 }
 
+.sidebar ul li.active > a {
+  color: var(--primary-color);
+}
+
 /****** Sidebar Toggle ******/
 
 .sidebar-toggle,
@@ -202,10 +295,6 @@ section.cover.show ~ .sidebar-toggle {
   margin-top: 38px;
 }
 
-.sidebar {
-  padding: 0;
-}
-
 .sidebar-toggle {
   cursor: pointer;
 }
@@ -222,7 +311,7 @@ body .sidebar-toggle {
 }
 
 body .sidebar-toggle span {
-  background-color: var(--theme-color);
+  background-color: var(--secondary-color);
   height: 0.2rem;
   width: var(--size);
   position: absolute;
@@ -234,6 +323,7 @@ body .sidebar-toggle span {
 
 body.close .sidebar-toggle {
   transition: left 0.25s ease-out;
+  background-color: var(--secondary-background);
   width: var(--size);
   height: var(--size);
   left: var(--size);
@@ -277,9 +367,15 @@ body.close .github-corner {
 
 /****** Markdown General ******/
 
+/* Undo vue.css defaults */
+.anchor span {
+  all: unset;
+}
+
 .markdown-section h1,
 .markdown-section h2 {
   margin: 1em 0;
+  color: var(--secondary-color);
 }
 
 .markdown-section p {
@@ -288,8 +384,8 @@ body.close .github-corner {
 }
 
 .markdown-section code {
-  background-color: #f8f8f8;
-  color: #525252;
+  background-color: var(--quaternary-background);
+  color: var(--quaternary-color);
   padding: 0.05em 0.15em 0.15em;
   margin: 0.05em;
   font-size: 16px;
@@ -298,23 +394,35 @@ body.close .github-corner {
 
 .markdown-section a {
   text-decoration: none;
-  color: var(--theme-color);
-  border-bottom: 0.1rem solid var(--theme-color);
+  color: var(--secondary-color);
+  border-bottom: 0.1rem solid var(--secondary-color);
 }
 
 .markdown-section a:hover {
-  border-color: var(--theme-color-dark);
-  color: var(--theme-color-dark);
+  background-color: var(--tertiary-background);
+  border: none;
 }
 
 .markdown-section a.anchor {
   border: none;
 }
 
+.markdown-section strong {
+  color: var(--primary-color);
+}
+
+.markdown-section pre {
+  background-color: var(--primary-background);
+}
+.markdown-section pre > code {
+  background-color: var(--primary-background);
+  color: var(--secondary-color);
+}
+
 .markdown-section a > code,
 .markdown-section a > strong > code {
-  background-color: #f8f8f8;
-  color: #525252;
+  background-color: var(--primary-color);
+  color: var(--tertiary-background);
   padding: 0.05em 0.15em 0;
   margin: 0.05em;
 }
@@ -331,7 +439,11 @@ body.close .github-corner {
 
 .markdown-section em,
 .markdown-section blockquote {
-  color: var(--text-color-tertiary);
+  color: var(--tertiary-color);
+}
+
+.markdown-section tr:nth-child(2n) {
+  background-color: var(--tertiary-background);
 }
 
 @media screen and (max-width: 768px) {
@@ -343,18 +455,16 @@ body.close .github-corner {
 
 /****** CODE HIGHLIGHTING ******/
 
+.token.punctuation {
+  color: var(--yellow-gold);
+}
+
+.token.attr-value {
+  color: var(--blue-mid);
+}
+
 .token.string {
-  color: #42b983;
-}
-
-.token.boolean,
-.token.number {
-  color: var(--theme-color);
-}
-
-.lang-bash .token.function,
-.lang-json .token.property {
-  color: #e96900;
+  color: var(--love-dark);
 }
 
 /****** COPY TO CLIPBOARD ******/
@@ -365,6 +475,15 @@ body.close .github-corner {
 
 /****** Others ******/
 
+.search input {
+  background-color: var(--secondary-background);
+  color: var(--secondary-color);
+}
+
+.search .search-keyword {
+  color: var(--secondary-color);
+}
+
 .i18n-lang-list ul {
   height: 10em;
   font-size: larger;
@@ -385,3 +504,11 @@ body.close .github-corner {
   text-align: left;
   width: 10em;
 }
+
+.docsify-tabs__tab:not(.docsify-tabs__tab--active) {
+  color: var(--secondary-background) !important;
+}
+
+.docsify-tabs__tab:not(.docsify-tabs__tab--active):hover {
+  cursor: pointer;
+}
diff --git a/docs/index.html b/docs/index.html
index 059cc0ea4df..a3a67fcb694 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -56,6 +56,7 @@
   <body>
     <!-- Navigation (we are using a div, instead of nav to avoid conflict with docsify's nav) -->
     <div class="universal-nav">
+      <button onClick="toggleTheme()" class="theme-toggle">💡</button>
       <a class="app-name-link" data-nosearch="" href="/">
         <img alt="freeCodeCamp.org" src="images/branding/primary_logo.svg" />
       </a>
@@ -230,6 +231,34 @@
           }
         ]
       };
+
+      const elements = document.querySelectorAll('*');
+      const theme = localStorage.getItem('theme');
+
+      function toggleTheme() {
+        for (const el of elements) {
+          el.classList.toggle('dark');
+        }
+        localStorage.setItem('theme', theme === 'dark' ? 'light' : 'dark');
+      }
+
+      switch (theme) {
+        case 'dark':
+          for (const el of elements) {
+            el.classList.add('dark');
+          }
+          break;
+        case 'light':
+          for (const el of elements) {
+            el.classList.add('light');
+          }
+          break;
+        default:
+          for (const el of elements) {
+            el.classList.add('light');
+          }
+          break;
+      }
     </script>
     <!-- docsify (latest v4.x.x)-->
     <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>