diff --git a/.nvmrc b/.nvmrc
index 3f6c11fc18..368fe859d7 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v8.12.0
\ No newline at end of file
+v8.12.0
diff --git a/package.json b/package.json
index 341fe02550..b4f6e258c2 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "author": "Adam Miller <ammiller@linkedin.com>",
   "private": true,
   "dependencies": {
+    "@smotaal.io/dark-mode-controller": "^0.0.4",
     "@emotion/core": "^10.0.7",
     "@types/react-helmet": "^5.0.7",
     "dotenv": "^6.0.0",
diff --git a/src/components/controls.tsx b/src/components/controls.tsx
deleted file mode 100644
index aaa2fe932d..0000000000
--- a/src/components/controls.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-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): JSX.Element => (
-  <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 ff8032f96f..3266863125 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,7 +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';
+import defaultDarkModeController from '../util/darkModeController';
 
 const activeStyleTab = {
   fontWeight: 'var(--font-weight-semibold)',
@@ -11,10 +11,12 @@ const activeStyleTab = {
 };
 
 interface Props {
-  darkModeController?: DarkModeController;
+  darkModeController?: typeof defaultDarkModeController;
 }
 
-const Header = ({ darkModeController }: Props): JSX.Element => (
+const Header = ({
+  darkModeController = defaultDarkModeController,
+}: Props): JSX.Element => (
   <nav className="nav">
     <div className="logo">
       <Link to="/">
@@ -56,16 +58,8 @@ const Header = ({ darkModeController }: Props): JSX.Element => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={(): void => {
-            if (!darkModeController)
-              document.body.classList.toggle('dark-mode');
-          }}
-          onPointerDown={(): void => {
-            if (darkModeController) darkModeController.onPointerDown();
-          }}
-          onPointerUp={(): void => {
-            if (darkModeController) darkModeController.onPointerUp();
-          }}
+          onMouseDown={darkModeController.handleEvent}
+          onMouseUp={darkModeController.handleEvent}
         >
           <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 4ed69bff56..b9ec93531b 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -7,7 +7,9 @@ import '../styles/tokens.css';
 import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
-import DarkModeController from '../util/DarkModeController';
+
+// NOTE: Quickly restores dark-mode state to mitigate onload flash
+import darkModeController from '../util/darkModeController';
 
 interface Props {
   children: React.ReactNode;
@@ -17,7 +19,6 @@ interface Props {
   href?: string;
   showFooter?: boolean;
   location?: any;
-  darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -27,7 +28,6 @@ const Layout = ({
   img,
   location,
   showFooter = true,
-  darkModeController = new DarkModeController(),
 }: Props): JSX.Element => {
   return (
     <React.Fragment>
diff --git a/src/util/DarkModeController.js b/src/util/DarkModeController.js
deleted file mode 100644
index fb1e260cff..0000000000
--- a/src/util/DarkModeController.js
+++ /dev/null
@@ -1,161 +0,0 @@
-// @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/src/util/darkModeController.ts b/src/util/darkModeController.ts
new file mode 100644
index 0000000000..a1745152f7
--- /dev/null
+++ b/src/util/darkModeController.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DarkModeController } from '@smotaal.io/dark-mode-controller/commonjs';
+
+export interface ReactDarkModeController extends DarkModeController {
+  onPointerDown(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  onPointerUp(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  handleEvent(event?: React.PointerEvent | React.MouseEvent | Event): void;
+}
+
+// TODO: Figure out a way around HRM glitching (tackled upstream)
+// SEE: https://github.com/SMotaal/meta/issues/7
+
+// We're exporting a singleton
+export default new DarkModeController() as ReactDarkModeController;
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
index 1cbd94b6ef..84efecf7a2 100644
--- a/test/components/__snapshots__/header.test.tsx.snap
+++ b/test/components/__snapshots__/header.test.tsx.snap
@@ -92,9 +92,8 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <button
         className="dark-mode-toggle"
-        onClick={[Function]}
-        onPointerDown={[Function]}
-        onPointerUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
         type="button"
       >
         <span
diff --git a/yarn.lock b/yarn.lock
index 48d8cfba52..2547c3c0db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1547,6 +1547,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@smotaal.io/dark-mode-controller@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.4.tgz#0412651850db97c8f9ca3e2f269042aae6a01755"
+  integrity sha512-BUU3rNWh8VAvpJgMzz/WTk7PdlA5tI+ys4XveO5Q5Zk6xgB0utWZZSGcbSP2rk+TlUvUsLKCzNDA3t3UTLsy2A==
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"