feat: add dark mode (#10653)

Closes #5327, #9964, #10089

---------

Co-authored-by: Allan <[email protected]>
Co-authored-by: Ed Brannin (BW) <[email protected]>

Author: 3 people

config/jest/jest.unit.config.js

@@ -16,7 +16,8 @@ module.exports = {
     '<rootDir>/test/unit/setup.js',
   ],
   moduleNameMapper: {
-    '^.+\\.svg$': 'jest-transform-stub'
+    '^.+\\.svg$': 'jest-transform-stub',
+    '^standalone/(.*)$': '<rootDir>/src/standalone/$1',
   },
   transformIgnorePatterns: ['/node_modules/(?!(sinon|react-syntax-highlighter|@asamuzakjp/css-color)/)'],
   silent: true, // set to `false` to allow console.* calls to be printed

src/standalone/plugins/top-bar/assets/lightbulb-off.svg

@@ -0,0 +1,47 @@
+/**
+ * @prettier
+ */
+import React, { Component } from "react"
+
+import LightBulb from "../assets/lightbulb.svg"
+import LightBulbOff from "../assets/lightbulb-off.svg"
+
+class DarkModeToggle extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isDarkMode: false,
+    }
+    this.toggleIsDarkMode = this.toggleIsDarkMode.bind(this)
+  }
+
+  componentDidMount() {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.documentElement.classList.add("dark-mode")
+      this.setState({ isDarkMode: true })
+    }
+  }
+
+  toggleIsDarkMode() {
+    document.documentElement.classList.toggle("dark-mode")
+    this.setState((prevState) => ({ isDarkMode: !prevState.isDarkMode }))
+  }
+
+  render() {
+    const { isDarkMode } = this.state
+
+    return (
+      <div className="dark-mode-toggle">
+        <button onClick={this.toggleIsDarkMode}>
+          {!isDarkMode ? (
+            <LightBulbOff height="24" />
+          ) : (
+            <LightBulb height="24" />
+          )}
+        </button>
+      </div>
+    )
+  }
+}
+
+export default DarkModeToggle

src/standalone/plugins/top-bar/assets/lightbulb.svg

@@ -113,6 +113,7 @@ class TopBar extends React.Component {
     const Button = getComponent("Button")
     const Link = getComponent("Link")
     const Logo = getComponent("Logo")
+    const DarkModeToggle = getComponent("DarkModeToggle")
 
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
@@ -164,6 +165,7 @@ class TopBar extends React.Component {
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
               {control.map((el, i) => cloneElement(el, { key: i }))}
             </form>
+            <DarkModeToggle />
           </div>
         </div>
       </div>

src/standalone/plugins/top-bar/components/DarkModeToggle.jsx

@@ -3,9 +3,10 @@
  */
 import TopBar from "./components/TopBar"
 import Logo from "./components/Logo"
+import DarkModeToggle from "./components/DarkModeToggle"
 
 const TopBarPlugin = () => ({
-  components: { Topbar: TopBar, Logo },
+  components: { Topbar: TopBar, Logo, DarkModeToggle },
 })
 
 export default TopBarPlugin