diff --git a/src/components/controls.tsx b/src/components/controls.tsx
new file mode 100644
index 0000000000..49b49924b1
--- /dev/null
+++ b/src/components/controls.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { css } from '@emotion/core';
+import DarkModeController from '../util/DarkModeController';
+
+const controlsStyles = {
+  header: css/* scss */ `
+    position: fixed;
+    padding: 0.25ch 1ch;
+    margin-bottom: 1ch;
+    margin-top: -1ch;
+    right: 0;
+    z-index: 999;
+    box-sizing: border-box;
+    will-change: transform;
+
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-gap: 1ch;
+    align-items: center;
+
+    opacity: 0.9;
+    color: var(--color-text-accent, #999);
+    background-color: var(--black9, #9993);
+    border-top-left-radius: 1ch;
+    border-bottom-left-radius: 1ch;
+
+    min-width: max-content;
+    width: 0;
+    white-space: normal;
+    text-size-adjust: 100%;
+    text-shadow: #333f46 0px 0.875px 0px;
+    user-select: none;
+  `,
+  button: css/* scss */ `
+    color: inherit;
+    border: none;
+    width: max-content;
+    display: contents;
+  `,
+  controls: css/* scss */ `
+    color: inherit;
+  `,
+};
+
+interface Props {
+  lightModeIcon?: string;
+  darkModeIcon?: string;
+  controller?: DarkModeController;
+}
+
+const Controls = ({
+  lightModeIcon = 'wb_sunny',
+  darkModeIcon = 'nights_stay',
+  controller = new DarkModeController(),
+}: Props) => (
+  <header css={controlsStyles.header}>
+    <div id="controls" css={controlsStyles.controls}>
+      <span>
+        <button
+          type="button"
+          css={controlsStyles.button}
+          id="contrast"
+          title="Dark/Light"
+          onPointerDown={(): void => {
+            controller.onPointerDown();
+          }}
+          onPointerUp={(): void => {
+            controller.onPointerUp();
+          }}
+        >
+          <span className="sr-only">Toggle Dark Mode</span>
+          <i className="material-icons light-mode-only">{darkModeIcon}</i>
+          <i className="material-icons dark-mode-only">{lightModeIcon}</i>
+        </button>
+      </span>
+    </div>
+  </header>
+);
+
+export default Controls;
diff --git a/src/components/header.tsx b/src/components/header.tsx
index f96cee335c..9f3b01197b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,6 +2,7 @@ import { Link } from 'gatsby';
 import React from 'react';
 import logoLight from '../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../images/logos/nodejs-logo-dark-mode.svg';
+import DarkModeController from '../util/DarkModeController';
 
 const activeStyleTab = {
   fontWeight: 'var(--font-weight-semibold)',
@@ -9,7 +10,11 @@ const activeStyleTab = {
   borderBottom: 'var(--space-04) inset var(--color-text-accent)',
 };
 
-const Header = () => (
+interface Props {
+  darkModeController?: DarkModeController;
+}
+
+const Header = ({ darkModeController }: Props) => (
   <nav className="nav">
     <div className="logo">
       <Link to="/">
@@ -51,7 +56,16 @@ const Header = () => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={() => document.body.classList.toggle('dark-mode')}
+          onClick={() => {
+            if (!darkModeController)
+              document.body.classList.toggle('dark-mode');
+          }}
+          onPointerDown={(): void => {
+            if (darkModeController) darkModeController.onPointerDown();
+          }}
+          onPointerUp={(): void => {
+            if (darkModeController) darkModeController.onPointerUp();
+          }}
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 4b29e1e34f..8e810eade5 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -6,6 +6,7 @@ import '../styles/tokens.css';
 import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
+import DarkModeController from '../util/DarkModeController';
 
 interface Props {
   children: React.ReactNode;
@@ -13,6 +14,7 @@ interface Props {
   description?: string;
   img?: string;
   href: string;
+  darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -21,11 +23,12 @@ const Layout = ({
   description,
   img,
   location,
+  darkModeController = new DarkModeController(),
 }: Props): JSX.Element => {
   return (
     <React.Fragment>
       <SEO title={title} description={description} img={img} />
-      <Header />
+      <Header darkModeController={darkModeController} />
       {children}
     </React.Fragment>
   );
diff --git a/src/util/DarkModeController.js b/src/util/DarkModeController.js
new file mode 100644
index 0000000000..fb1e260cff
--- /dev/null
+++ b/src/util/DarkModeController.js
@@ -0,0 +1,161 @@
+// @ts-check
+
+/*eslint-disable */
+
+export default class DarkModeController {
+  static get timeout() {
+    const value = Symbol.for('dark-mode.toggler.timeout');
+    Object.defineProperty(this, 'timeout', { value, writable: false });
+    return value;
+  }
+
+  static get resetting() {
+    const value = Symbol.for('dark-mode.toggler.resetting');
+    Object.defineProperty(this, 'resetting', { value, writable: false });
+    return value;
+  }
+
+  static get prefersLightMode() {
+    const value =
+      (typeof matchMedia === 'function' &&
+        matchMedia('(prefers-color-scheme: light)')) ||
+      undefined;
+    Object.defineProperty(this, 'prefersLightMode', { value, writable: false });
+    return value;
+  }
+
+  static get prefersDarkMode() {
+    const value =
+      (typeof matchMedia === 'function' &&
+        matchMedia('(prefers-color-scheme: dark)')) ||
+      undefined;
+    Object.defineProperty(this, 'prefersDarkMode', { value, writable: false });
+    return value;
+  }
+
+  /** @param {HTMLElement} [target] */
+  constructor(target) {
+    Object.defineProperties(this, {
+      target: {
+        value:
+          /** @type {HTMLElement|undefined} */ (target ||
+          (typeof document === 'object' && document.body) ||
+          undefined),
+        writable: false,
+      },
+      [DarkModeController.timeout]: {
+        value: /** @type {number|undefined} */ (undefined),
+        writable: true,
+      },
+      [DarkModeController.resetting]: {
+        value: /** @type {boolean|undefined} */ (undefined),
+        writable: true,
+      },
+      state: {
+        value: /** @type {DarkModeState|undefined} */ (undefined),
+        writable: true,
+      },
+      prefers: {
+        value: /** @type {PrefersColorSchemes|undefined} */ (undefined),
+        writable: true,
+      },
+      enable: { value: this.enable.bind(this), writable: false },
+      disable: { value: this.disable.bind(this), writable: false },
+      toggle: { value: this.toggle.bind(this), writable: false },
+      onPointerDown: { value: this.onPointerDown.bind(this), writable: false },
+      onPointerUp: { value: this.onPointerUp.bind(this), writable: false },
+    });
+
+    ((prefersDarkMode, prefersLightMode, localStorage) => {
+      if (!localStorage || !prefersDarkMode || !prefersLightMode) return;
+      localStorage.darkMode === 'enabled'
+        ? ((this.state = 'enabled'), this.enable())
+        : localStorage.darkMode === 'disabled'
+        ? ((this.state = 'disabled'), this.disable())
+        : this.toggle(
+            prefersDarkMode.matches === true ||
+              prefersLightMode.matches !== true,
+            !!(localStorage.darkMode = this.state = 'auto')
+          );
+      prefersDarkMode.addListener(
+        ({ matches = false }) =>
+          matches === true && this.toggle(!!matches, true)
+      );
+      prefersLightMode.addListener(
+        ({ matches = false }) => matches === true && this.toggle(!matches, true)
+      );
+    })(
+      DarkModeController.prefersDarkMode,
+      DarkModeController.prefersLightMode,
+      (typeof localStorage === 'object' && localStorage) || undefined
+    );
+
+    Object.preventExtensions(this);
+  }
+
+  /**
+   * @param {DarkModeState|boolean} [state]
+   * @param {boolean} [auto]
+   */
+  async toggle(state, auto) {
+    const { classList } = this.target;
+
+    if (auto === true) {
+      if (state === true) this.prefers = 'dark';
+      else if (state === false) this.prefers = 'light';
+      if (this.state !== 'auto') return;
+    }
+
+    state =
+      state === 'auto'
+        ? ((auto = true), this.prefers !== 'light')
+        : state == null
+        ? !classList.contains('dark-mode')
+        : !!state;
+
+    this.state = localStorage.darkMode = auto
+      ? 'auto'
+      : state
+      ? 'enabled'
+      : 'disabled';
+
+    state
+      ? (classList.add('dark-mode'), classList.remove('light-mode'))
+      : (classList.add('light-mode'), classList.remove('dark-mode'));
+  }
+
+  /** @param {boolean} [auto] */
+  enable(auto) {
+    this.toggle(true, auto);
+  }
+
+  /** @param {boolean} [auto] */
+  disable(auto) {
+    this.toggle(false, auto);
+  }
+
+  onPointerDown() {
+    clearTimeout(this[DarkModeController.timeout]);
+    this[DarkModeController.timeout] = setTimeout(() => {
+      this.toggle('auto');
+      this[DarkModeController.resetting] = true;
+      // console.log('Reset dark mode!');
+    }, 2000);
+  }
+
+  onPointerUp() {
+    this[DarkModeController.timeout] = clearTimeout(
+      this[DarkModeController.timeout]
+    );
+    this[DarkModeController.resetting] === true
+      ? (this[DarkModeController.resetting] = false)
+      : this.toggle();
+  }
+}
+
+Object.preventExtensions(DarkModeController);
+
+/** @typedef {'auto'|'enabled'|'disabled'} DarkModeState */
+/** @typedef {'light'|'dark'} PrefersColorSchemes */
+
+/* eslint-enable */
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index 89542ee104..1cbd94b6ef 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -4,46 +4,40 @@ exports[`Tests for Header component renders correctly 1`] = `
 <nav
   className="nav"
 >
+  <div
+    className="logo"
+  >
+    <a
+      href="/"
+    >
+      <img
+        alt="Node.js"
+        className="nav__logo light-mode-only"
+        src="test-file-stub"
+      />
+      <img
+        alt="Node.js"
+        className="nav__logo dark-mode-only"
+        src="test-file-stub"
+      />
+    </a>
+  </div>
   <ul
-    css={
-      Object {
-        "map": undefined,
-        "name": "xzcnt4",
-        "next": undefined,
-        "styles": "
-  @media (max-width: 380px) {
-    padding: 0;
-  }
-  margin: 0 auto;
-  padding: 0 4.8rem;
-  display: flex;
-  align-items: center;
-  list-style: none;
-",
-      }
-    }
+    className="nav__tabs__container"
   >
-    <li>
-      <a
-        href="/"
-        style={
-          Object {
-            "display": "block",
-          }
-        }
-      >
-        <img
-          alt="Node.js"
-          className="nav__logo"
-          src="test-file-stub"
-        />
-      </a>
-    </li>
     <li
       className="nav__tabs"
     >
       <a
+        activeStyle={
+          Object {
+            "borderBottom": "var(--space-04) inset var(--color-text-accent)",
+            "color": "var(--color-text-accent)",
+            "fontWeight": "var(--font-weight-semibold)",
+          }
+        }
         href="/learn"
+        partiallyActive={true}
       >
         Learn
       </a>
@@ -52,42 +46,55 @@ exports[`Tests for Header component renders correctly 1`] = `
       className="nav__tabs"
     >
       <a
+        activeStyle={
+          Object {
+            "borderBottom": "var(--space-04) inset var(--color-text-accent)",
+            "color": "var(--color-text-accent)",
+            "fontWeight": "var(--font-weight-semibold)",
+          }
+        }
         href="/docs"
+        partiallyActive={true}
       >
-        Docs
-      </a>
-    </li>
-    <li
-      className="nav__tabs"
-    >
-      <a
-        href="/community"
-      >
-        Community
+        Documentation
       </a>
     </li>
     <li
       className="nav__tabs"
     >
       <a
+        activeStyle={
+          Object {
+            "borderBottom": "var(--space-04) inset var(--color-text-accent)",
+            "color": "var(--color-text-accent)",
+            "fontWeight": "var(--font-weight-semibold)",
+          }
+        }
         href="/download"
+        partiallyActive={true}
       >
         Download
       </a>
     </li>
-    <li
-      style={
-        Object {
-          "flexGrow": 1,
-        }
+  </ul>
+  <div
+    style={
+      Object {
+        "flexGrow": 1,
       }
-    />
+    }
+  />
+  <ul
+    className="right-container"
+  >
     <li
       className="nav__tabs nav__tabs--right"
     >
       <button
         className="dark-mode-toggle"
         onClick={[Function]}
+        onPointerDown={[Function]}
+        onPointerUp={[Function]}
         type="button"
       >
         <span
@@ -112,7 +119,7 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <a
         href="https://github.com/nodejs/nodejs.dev"
-        rel="noreferrer noopener"
+        rel="noopener noreferrer"
         target="_blank"
       >
         <span
@@ -121,14 +128,14 @@ exports[`Tests for Header component renders correctly 1`] = `
           GitHub
         </span>
         <svg
-          height="2.0rem"
+          height="2.4rem"
           style={
             Object {
               "fill": "var(--color-text-accent)",
             }
           }
           viewBox="0 0 438.549 438.549"
-          width="2.0rem"
+          width="2.4rem"
         >
           <path
             d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z"
diff --git a/test/components/__snapshots__/hero.test.tsx.snap b/test/components/__snapshots__/hero.test.tsx.snap
index 3ec10731b2..e07b7f2237 100644
--- a/test/components/__snapshots__/hero.test.tsx.snap
+++ b/test/components/__snapshots__/hero.test.tsx.snap
@@ -2,27 +2,55 @@
 
 exports[`Hero component renders correctly 1`] = `
 <div
-  className="hero"
+  className="home-page-hero"
 >
   <h1>
     Introduction to Node.js
   </h1>
+  <h2
+    className="sub-title t-subheading"
+  />
   <div
-    className="diagonal-hero-bg"
+    className="btn-ctas"
   >
     <div
-      className="stars"
+      className="download-lts-container"
     >
-      <div
-        className="small"
-      />
-      <div
-        className="medium"
-      />
-      <div
-        className="big"
-      />
+      <button
+        className="download-lts-cta t-body1"
+        type="button"
+      >
+        Download Node (LTS)
+      </button>
+      <p
+        className="links t-caption"
+      >
+        Version 10.15.3
+         - 
+        <a
+          href="/download"
+        >
+          What’s new
+        </a>
+         /
+         
+        <a
+          href="/download"
+        >
+          Get Current
+        </a>
+      </p>
     </div>
+    <a
+      href="/learn"
+    >
+      <button
+        className="learn-cta t-body1"
+        type="button"
+      >
+        Learn Node
+      </button>
+    </a>
   </div>
 </div>
 `;
diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
index ae210445a8..1e944fd4b8 100644
--- a/test/templates/__snapshots__/learn.test.tsx.snap
+++ b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -1,63 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Learn Template renders correctly 1`] = `
-<Layout
-  description="test-description"
-  title="test-title"
->
-  <Navigation
-    currentSlug="test-slug"
-    sections={
-      Object {
-        "test-section": Array [
-          Object {
-            "section": "test-section",
-            "slug": "test-slug",
-            "title": "test-title",
-          },
-          Object {
-            "section": "test-section",
-            "slug": "test-slug",
-            "title": "test-title",
-          },
-        ],
-        "test-section2": Array [
-          Object {
-            "section": "test-section",
-            "slug": "test-slug",
-            "title": "test-title",
-          },
-          Object {
-            "section": "test-section",
-            "slug": "test-slug",
-            "title": "test-title",
-          },
-        ],
+<main>
+  <Layout
+    description="test-description"
+    title="test-title"
+  >
+    <Navigation
+      currentSlug="test-slug"
+      sections={
+        Object {
+          "test-section": Array [
+            Object {
+              "section": "test-section",
+              "slug": "test-slug",
+              "title": "test-title",
+            },
+            Object {
+              "section": "test-section",
+              "slug": "test-slug",
+              "title": "test-title",
+            },
+          ],
+          "test-section2": Array [
+            Object {
+              "section": "test-section",
+              "slug": "test-slug",
+              "title": "test-title",
+            },
+            Object {
+              "section": "test-section",
+              "slug": "test-slug",
+              "title": "test-title",
+            },
+          ],
+        }
       }
-    }
-  />
-  <Article
-    authors={
-      Array [
-        "test-user1",
-        "test-user2",
-      ]
-    }
-    html="<span>Test html</span>"
-    next={
-      Object {
-        "slug": "test-slug",
-        "title": "test-title",
+    />
+    <Article
+      authors={
+        Array [
+          "test-user1",
+          "test-user2",
+        ]
       }
-    }
-    previous={
-      Object {
-        "slug": "test-slug",
-        "title": "test-title",
+      html="<span>Test html</span>"
+      next={
+        Object {
+          "slug": "test-slug",
+          "title": "test-title",
+        }
       }
-    }
-    relativePath="test-path"
-    title="test-title"
-  />
-</Layout>
+      previous={
+        Object {
+          "slug": "test-slug",
+          "title": "test-title",
+        }
+      }
+      relativePath="test-path"
+      title="test-title"
+    />
+  </Layout>
+</main>
 `;