nodejs · benhalverson · Apr 8, 2021 · Apr 1, 2021 · Apr 2, 2021 · Apr 2, 2021
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -16,6 +16,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-catch-links',
+    'gatsby-plugin-dark-mode',
     'gatsby-transformer-yaml',
     'gatsby-plugin-react-helmet',
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.18",
     "@mdx-js/react": "^1.6.18",
-    "@smotaal.io/dark-mode-controller": "<0.5",
     "@storybook/addon-actions": "^6.2.2",
     "@storybook/addon-links": "^6.2.2",
     "@storybook/addons": "^6.2.2",
@@ -22,13 +21,14 @@
     "gatsby": "2.24.85",
     "gatsby-plugin-canonical-urls": "^2.2.3",
     "gatsby-plugin-catch-links": "^2.2.1",
-    "gatsby-plugin-manifest": "^2.4.0",
+    "gatsby-plugin-dark-mode": "^1.1.2",
+    "gatsby-plugin-manifest": "^2.12.1",
     "gatsby-plugin-mdx": "^1.2.40",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^3.1.2",
     "gatsby-plugin-react-helmet": "^3.2.4",
     "gatsby-plugin-sass": "2.3.1",
-    "gatsby-plugin-sharp": "2.6.36",
+    "gatsby-plugin-sharp": "^2.6.36",
     "gatsby-plugin-sitemap": "^2.0.5",
     "gatsby-plugin-typescript": "^2.3.5",
     "gatsby-remark-autolink-headers": "^2.2.1",
@@ -110,6 +110,9 @@
     "type": "git",
     "url": "https://github.com/nodejs/nodejs.dev"
   },
+  "resolutions": {
+    "sharp": "0.27.2"
+  },
   "jest": {
     "transform": {
       "^.+\\.(ts|tsx|js)$": "<rootDir>/test-preprocessor.js"

diff --git a/src/components/DownloadReleases/DownloadTable.scss b/src/components/DownloadReleases/DownloadTable.scss
@@ -29,7 +29,7 @@
           padding: var(--space-16) var(--space-16);
           border-bottom: 1px solid #e2e3e7;
 
-          .dark-mode & {
+          .dark & {
             border-bottom: 1px solid var(--color-border-primary);
           }
         }
@@ -38,7 +38,7 @@
           background: var(--brand10);
         }
 
-        .dark-mode &:hover {
+        .dark &:hover {
           background: var(--brand9);
         }
       }

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,23 +1,25 @@
 import { Link } from 'gatsby';
-import React, { KeyboardEvent } from 'react';
+import React, { MouseEvent, KeyboardEvent } from 'react';
+import { ThemeToggler } from 'gatsby-plugin-dark-mode';
 import logoLight from '../../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../../images/logos/nodejs-logo-dark-mode.svg';
-import defaultDarkModeController from '../../util/darkModeController';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
 
-interface Props {
-  darkModeController?: typeof defaultDarkModeController;
-}
-
-const Header = ({
-  darkModeController = defaultDarkModeController,
-}: Props): JSX.Element => {
+const Header = (): JSX.Element => {
   const isMobile = useMediaQuery('(max-width: 870px)');
 
-  const keyPressDarkModeHandler: (
-    e: KeyboardEvent<HTMLButtonElement>
-  ) => void = e => {
-    if (e.charCode === 13 || e.charCode === 32) darkModeController.toggle();
+  const handleThemeOnClick = (
+    e: MouseEvent<HTMLButtonElement, Event> | KeyboardEvent<HTMLButtonElement>,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    toggleTheme: Function,
+    isKeyPress = false
+  ): void => {
+    if (isKeyPress) {
+      return;
+    }
+    const target = e.target as HTMLElement;
+    const toggle = target.innerText.includes('nights_stay') ? 'dark' : 'light';
+    toggleTheme(toggle);
   };
 
   return (
@@ -86,17 +88,36 @@ const Header = ({
         <div className="nav__endwrapper">
           <ul className="right-container">
             <li className="nav__tabs nav__tabs--right">
-              <button
-                type="button"
-                className="dark-mode-toggle"
-                onKeyPress={keyPressDarkModeHandler}
-                onMouseDown={darkModeController.handleEvent}
-                onMouseUp={darkModeController.handleEvent}
-              >
-                <span className="sr-only">Toggle Dark Mode</span>
-                <i className="material-icons light-mode-only">nights_stay</i>
-                <i className="material-icons dark-mode-only">wb_sunny</i>
-              </button>
+              <ThemeToggler>
+                {({
+                  theme,
+                  toggleTheme,
+                }: {
+                  theme: string | null;
+                  // eslint-disable-next-line @typescript-eslint/ban-types
+                  toggleTheme: Function;
+                }): JSX.Element | null => {
+                  if (theme === null) {
+                    return null;
+                  }
+                  return (
+                    <button
+                      type="button"
+                      onClick={(e): void => handleThemeOnClick(e, toggleTheme)}
+                      className="dark-mode-toggle"
+                      onKeyPress={(e): void =>
+                        handleThemeOnClick(e, toggleTheme, true)
+                      }
+                    >
+                      <span className="sr-only">Toggle Dark Mode</span>
+                      <i className="material-icons light-mode-only">
+                        nights_stay
+                      </i>
+                      <i className="material-icons dark-mode-only">wb_sunny</i>
+                    </button>
+                  );
+                }}
+              </ThemeToggler>
             </li>
 
             <li className="nav__tabs">

diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss
@@ -75,15 +75,15 @@
     border: var(--brand7) var(--space-02) solid;
   }
 
-  .dark-mode &.inverse {
+  .dark &.inverse {
     color: var(--black0);
   }
 
-  .light-mode &.inverse {
+  .light &.inverse {
     color: var(--brand6);
   }
 
-  .light-mode &.inverse:hover {
+  .light &.inverse:hover {
     color: var(--black0);
   }
 }

diff --git a/src/components/Layout/centered.tsx b/src/components/Layout/centered.tsx
@@ -9,9 +9,6 @@ import '../../styles/centered-layout.scss';
 import '../../styles/mobile.scss';
 import SEO from '../Seo';
 
-// NOTE: Quickly restores dark-mode state to mitigate onload flash
-import darkModeController from '../../util/darkModeController';
-
 interface Props {
   children: React.ReactNode;
   title?: string;
@@ -32,7 +29,7 @@ const CenteredLayout = ({
   return (
     <>
       <SEO title={title} description={description} img={img} />
-      <Header darkModeController={darkModeController} />
+      <Header />
       <main className="main__centered">{children}</main>
       {showFooter && <Footer />}
     </>

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -8,9 +8,6 @@ import '../../styles/layout.scss';
 import '../../styles/mobile.scss';
 import SEO from '../Seo';
 
-// NOTE: Quickly restores dark-mode state to mitigate onload flash
-import darkModeController from '../../util/darkModeController';
-
 interface Props {
   children: React.ReactNode;
   title?: string;
@@ -38,7 +35,7 @@ const Layout = ({
         img={img}
       />
       <div className="layout-container">
-        <Header darkModeController={darkModeController} />
+        <Header />
         {children}
         {showFooter && <Footer />}
       </div>

diff --git a/src/styles/docs.scss b/src/styles/docs.scss
@@ -83,7 +83,7 @@
   }
 }
 
-.dark-mode .api-key__section {
+.dark .api-key__section {
   background: var(--black9);
 
   .api-key__item {

diff --git a/src/styles/layout.scss b/src/styles/layout.scss
@@ -145,8 +145,8 @@ input {
   color: var(--color-text-primary);
 }
 
-body:not(.dark-mode) .dark-mode-only,
-.dark-mode .light-mode-only {
+body:not(.dark) .dark-mode-only,
+.dark .light-mode-only {
   display: none;
 }
 
@@ -281,7 +281,7 @@ select {
   justify-content: flex-end;
 }
 
-.dark-mode .nav {
+.dark .nav {
   border: none;
 }
 

diff --git a/src/styles/tokens.scss b/src/styles/tokens.scss
@@ -148,8 +148,7 @@ body {
   --space-128: 12.8rem;
   --space-160: 16rem;
 }
-
-.dark-mode {
+.dark {
   /* Colors */
   --color-brand-primary: var(--brand5);
   --color-text-primary: var(--black4);

diff --git a/src/types/gatsby-plugin-dark-mode.d.ts b/src/types/gatsby-plugin-dark-mode.d.ts
@@ -0,0 +1 @@
+declare module 'gatsby-plugin-dark-mode';
diff --git a/src/util/darkModeController.ts b/src/util/darkModeController.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		declare module 'gatsby-plugin-dark-mode';
lancemccluskey Apr 1, 2021 Copy link Copy Markdown Contributor Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I can be convinced to put this in a separate place. Im not sure whats best, to put it next to where its used or in this `types` folder.