Add support for dark mode

src/components/footer/index.js

@@ -1,14 +1,12 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import Settings from '../settings'
 
 class Footer extends Component {
   render() {
     return window === window.top ? (
       <footer className="footer">
-        <Settings />
         <Link className="logo" to="/">
-          Wikipedia
+          Wikipadia
         </Link>
       </footer>
     ) : null

src/components/header/index.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
+
 import Search from '../search'
+import Settings from '../settings'
 import { Link } from 'react-router-dom'
 
 class Header extends Component {
@@ -46,6 +48,7 @@ class Header extends Component {
           Home
         </Link>
         <Search />
+        <Settings />
       </header>
     ) : null
   }

src/components/modal/index.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import { createPortal } from "react-dom";
+import withClickOutside from "react-click-outside";
+
+class Modal extends Component {
+  constructor() {
+    super();
+    this.el = null;
+  }
+
+  componentDidMount() {
+    this.el = document.createElement("div");
+    document.querySelector(".settings-wrapper").appendChild(this.el);
+  }
+
+  componentWillUnmount() {
+    if (this.el) {
+      this.el.remove();
+    }
+  }
+
+  handleClickOutside(event) {
+    const { closeOnOutsideClick, handleClose } = this.props;
+
+    if (closeOnOutsideClick) {
+      event.preventDefault();
+      return handleClose();
+    }
+  }
+
+  render() {
+    const { children, handleClose, isOpen, title } = this.props;
+
+    if (!isOpen) return null;
+
+    return createPortal(
+      <div className="modal">
+        {title && <h3 className="modal-title">{title}</h3>}
+        {children}
+        <button className="close" onClick={handleClose}>
+          Close
+        </button>
+      </div>,
+      this.el
+    );
+  }
+}
+
+Modal.defaultProps = {
+  closeOnOutsideClick: true,
+  isOpen: false
+};
+
+export default withClickOutside(Modal);

src/components/settings/index.js

@@ -1,66 +1,71 @@
-import React, { Component } from 'react'
-import { compose } from 'redux'
-import { connect } from 'react-redux'
-import { updateSetting } from '../../store/settings'
-import withClickOutside from 'react-click-outside'
+import React, { Component, Fragment } from "react";
+import { connect } from "react-redux";
+import { updateSetting } from "../../store/settings";
 
-import Toggle from '../toggle'
+import Modal from "../modal";
+import Toggle from "../toggle";
 
 class Settings extends Component {
   constructor() {
-    super()
+    super();
     this.state = {
       open: false
-    }
+    };
   }
 
   handleClickOutside(event) {
     if (this.state.open) {
-      event.preventDefault()
-      this.setState({ open: false })
+      event.preventDefault();
+      this.setState({ open: false });
     }
   }
 
   render() {
-    const { settings } = this.props
-    const { open } = this.state
+    const { settings } = this.props;
+    const { open } = this.state;
 
     return (
-      <div className="settings">
+      <Fragment>
         <button
           className="settings-button"
-          onClick={() => this.setState({ open: true })}>
+          onClick={() => this.setState({ open: true })}
+        >
           Settings
         </button>
-        {open && (
-          <div className="modal settings-modal">
-            <button
-              className="close"
-              onClick={() => this.setState({ open: false })}>
-              Close
-            </button>
-            <h3>Settings</h3>
+        <Modal
+          isOpen={open}
+          title="Settings"
+          handleClose={() => this.setState({ open: false })}
+        >
+          <Toggle
+            label="Dark Mode"
+            name="darkMode"
+            checked={settings.darkMode}
+            onChange={this.props.updateSetting}
+          />
+          <p className="settings-hint">
+            Light text on dark background (defaults to OS preference)
+          </p>
 
-            <Toggle
-              label="Low contrast"
-              name="lowContrast"
-              checked={settings.lowContrast}
-              onChange={this.props.updateSetting}
-            />
-            <p className="settings-hint">
-              Reduce eye strain for low-light reading.
-            </p>
-          </div>
-        )}
-      </div>
-    )
+          <Toggle
+            label="Low contrast"
+            name="lowContrast"
+            checked={settings.lowContrast}
+            onChange={this.props.updateSetting}
+          />
+          <p className="settings-hint">
+            Reduce eye strain for low-light reading.
+          </p>
+        </Modal>
+      </Fragment>
+    );
   }
 }
 
-const mapStateToProps = ({ settings }) => ({ settings })
-const mapDispatchToProps = { updateSetting }
+const mapStateToProps = ({ settings }) => ({ settings });
+const mapDispatchToProps = { updateSetting };
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withClickOutside
-)(Settings)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Settings);

src/index.js

@@ -1,26 +1,27 @@
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import { Provider } from 'react-redux'
-import ReactDOM from 'react-dom'
-import configureStore from './store'
-import initReactFastclick from 'react-fastclick'
-import registerServiceWorker from './registerServiceWorker'
-import './styles/styles.css'
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import ReactDOM from "react-dom";
+import configureStore from "./store";
+import initReactFastclick from "react-fastclick";
+import registerServiceWorker from "./registerServiceWorker";
+import "./styles/styles.css";
+import "./lib/favicon";
 
-import App from './routes'
+import App from "./routes";
 
-if ('ontouchstart' in document.documentElement) {
-  document.body.style.cursor = 'pointer'
+if ("ontouchstart" in document.documentElement) {
+  document.body.style.cursor = "pointer";
 }
 
-initReactFastclick()
+initReactFastclick();
 
 ReactDOM.render(
   <Provider store={configureStore()}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
   </Provider>,
-  document.getElementById('root')
-)
-registerServiceWorker()
+  document.getElementById("root")
+);
+registerServiceWorker();

src/routes/app/index.js

@@ -1,19 +1,40 @@
-import React from 'react'
-import { connect } from 'react-redux'
+import React, { Component } from "react";
+import { connect } from "react-redux";
 
-import Header from '../../components/header'
-import Footer from '../../components/footer'
+import Header from "../../components/header";
+import Footer from "../../components/footer";
 
-const App = ({ classNames, children }) => (
-  <div className={classNames.join(' ')}>
-    <Header />
-    {children}
-    <Footer />
-  </div>
-)
+class App extends Component {
+  componentDidMount() {
+    if (this.props.darkMode) {
+      document.documentElement.style.backgroundColor = "black";
+    }
+  }
+
+  componentDidUpdate({ darkMode }) {
+    if (this.props.darkMode !== darkMode) {
+      document.documentElement.style.backgroundColor = this.props.darkMode
+        ? "black"
+        : "transparent";
+    }
+  }
+
+  render() {
+    const { children, classNames } = this.props;
+
+    return (
+      <div className={`settings-wrapper ${classNames.join(" ")}`}>
+        <Header />
+        {children}
+        <Footer />
+      </div>
+    );
+  }
+}
 
 const mapStateToProps = ({ settings }) => ({
+  darkMode: settings.darkMode,
   classNames: Object.keys(settings).filter(setting => settings[setting])
-})
+});
 
-export default connect(mapStateToProps)(App)
+export default connect(mapStateToProps)(App);

src/store/settings/index.js

@@ -3,26 +3,29 @@ export const updateSetting = (name, value) => dispatch =>
     .then(() => localStorage.setItem(name, value))
     .then(() =>
       dispatch({
-        type: 'SETTINGS/UPDATE',
+        type: "SETTINGS/UPDATE",
         payload: { name, value }
       })
-    )
+    );
 
-const getBooleanValue = key => localStorage.getItem(key) === 'true'
+const getBooleanValue = key => localStorage.getItem(key) === "true";
 
 const initialState = {
-  lowContrast: getBooleanValue('lowContrast')
-}
+  darkMode: localStorage.getItem("darkMode")
+    ? getBooleanValue("darkMode")
+    : window.matchMedia("(prefers-color-scheme: dark)").matches,
+  lowContrast: getBooleanValue("lowContrast")
+};
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case 'SETTINGS/UPDATE':
-      const { name, value } = action.payload
+    case "SETTINGS/UPDATE":
+      const { name, value } = action.payload;
       return {
         ...state,
         [name]: value
-      }
+      };
     default:
-      return state
+      return state;
   }
-}
+};