Implement dark mode theme support with styled-components

src/index.css

@@ -3,7 +3,6 @@ body {
     sans-serif, "Apple Color Emoji", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f6f7f8;
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

src/ui/App.js

@@ -1,10 +1,17 @@
-import React from "react";
-import styled from "styled-components";
+import React, { Component } from "react";
+import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
 import { Navbar } from "./components";
 import { HomeContainer } from "./containers";
 import { About } from "./screens";
+import { themes } from "./theme";
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: ${props => props.theme.pageBg};
+  }
+`;
 
 const Container = styled.div`
   display: flex;
@@ -15,16 +22,44 @@ const Container = styled.div`
   max-width: 100%;
 `;
 
-function App() {
-  return (
-    <Router>
-      <Container>
-        <Navbar />
-        <Route exact path="/" component={HomeContainer} />
-        <Route path="/about" component={About} />
-      </Container>
-    </Router>
-  );
+function getInitialMode() {
+  const stored = localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  const prefersDark =
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+}
+
+class App extends Component {
+  state = { mode: getInitialMode() };
+
+  toggleMode = () => {
+    this.setState(({ mode }) => {
+      const next = mode === "dark" ? "light" : "dark";
+      localStorage.setItem("theme", next);
+      return { mode: next };
+    });
+  };
+
+  render() {
+    const { mode } = this.state;
+
+    return (
+      <ThemeProvider theme={themes[mode]}>
+        <Router>
+          <Container>
+            <GlobalStyle />
+            <Navbar mode={mode} onToggleMode={this.toggleMode} />
+            <Route exact path="/" component={HomeContainer} />
+            <Route path="/about" component={About} />
+          </Container>
+        </Router>
+      </ThemeProvider>
+    );
+  }
 }
 
 export default App;

src/ui/components/Helper/index.tsx

@@ -6,8 +6,8 @@ const Wrapper = styled.div`
   width: 100%;
   justify-content: start;
   flex-direction: column;
-  background: #fff;
-  border: 1px solid #e9e4f7;
+  background: ${({ theme }: any) => theme.cardBg};
+  border: 1px solid ${({ theme }: any) => theme.cardBorder};
   border-radius: 4px;
   box-shadow: 0px 0px 10px rgba(48, 71, 89, 0.05);
   margin: 0 0 1rem;
@@ -17,30 +17,30 @@ const Wrapper = styled.div`
 `;
 
 const HelpTable = styled.table`
-  border: 1px solid #e9e4f7;
+  border: 1px solid ${({ theme }: any) => theme.cardBorder};
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   box-shadow: 0px 0px 10px rgba(48, 71, 89, 0.05);
 
   thead th {
-    background-color: #f3ebff;
-    border: 1px solid #dcc5ff;
-    color: #382b5f;
+    background-color: ${({ theme }: any) => theme.tableHeadBg};
+    border: 1px solid ${({ theme }: any) => theme.tableHeadBorder};
+    color: ${({ theme }: any) => theme.tableHeadText};
     padding: 10px;
   }
 
   tbody td {
-    border: 1px solid #e9e4f7;
-    color: #333;
+    border: 1px solid ${({ theme }: any) => theme.cardBorder};
+    color: ${({ theme }: any) => theme.tableCellText};
     padding: 10px;
-    text-shadow: 1px 1px 1px #fff;
+    text-shadow: 1px 1px 1px ${({ theme }: any) => theme.tableCellShadow};
     text-align: center;
   }
 `;
 
 const HelperText = styled.div`
-  color: #3d4852;
+  color: ${({ theme }: any) => theme.helperText};
   padding-bottom: 10px;
   padding-top: 10px;
 `;

src/ui/components/Input/index.tsx

@@ -3,11 +3,11 @@ import styled from "styled-components";
 
 const InputElement = styled.input`
   padding: 0.5em;
-  color: white;
+  color: ${({ theme }: any) => theme.inputText};
   border-radius: 3px;
   text-align: center;
   font-size: 130%;
-  background-color: #382b5f;
+  background-color: ${({ theme }: any) => theme.inputBg};
   border: none;
 `;
 
@@ -21,7 +21,7 @@ const ErrorWrapper = styled.div`
 `;
 
 const ErrorText = styled.span`
-  color: #ff5d63;
+  color: ${({ theme }: any) => theme.error};
   font-size: 0.75rem;
 `;
 

src/ui/components/Navbar/index.tsx

@@ -4,14 +4,68 @@ import styled from "styled-components";
 const ContributeButton = styled.a`
   text-decoration: none;
   border-radius: 3px;
-  background-color: #382b5f;
-  color: white;
+  background-color: ${({ theme }: any) => theme.buttonBg};
+  color: ${({ theme }: any) => theme.buttonText};
   padding: 10px 20px;
   cursor: pointer;
 `;
 
+const ThemeToggle = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme }: any) => theme.cardBorder};
+  border-radius: 3px;
+  background-color: ${({ theme }: any) => theme.cardBg};
+  color: ${({ theme }: any) => theme.text};
+  padding: 10px;
+  cursor: pointer;
+
+  svg {
+    display: block;
+  }
+`;
+
+const SunIcon = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+);
+
+const MoonIcon = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
 const Nav = styled.nav`
-  color: white;
+  color: ${({ theme }: any) => theme.text};
   display: flex;
   align-items: center;
   width: 100%;
@@ -21,6 +75,10 @@ const Nav = styled.nav`
     list-style: none;
     display: flex;
     margin-right: 30px;
+    align-items: center;
+  }
+  li {
+    margin-left: 10px;
   }
   a {
     text-decoration: none;
@@ -31,9 +89,24 @@ const Nav = styled.nav`
   }
 `;
 
-const Navbar = () => (
+interface NavbarProps {
+  mode: string;
+  onToggleMode: () => void;
+}
+
+const Navbar = ({ mode, onToggleMode }: NavbarProps) => (
   <Nav>
     <ul>
+      <li>
+        <ThemeToggle
+          onClick={onToggleMode}
+          aria-label={
+            mode === "dark" ? "Switch to light mode" : "Switch to dark mode"
+          }
+        >
+          {mode === "dark" ? <SunIcon /> : <MoonIcon />}
+        </ThemeToggle>
+      </li>
       <li>
         <ContributeButton
           target="_blank"
@@ -43,7 +116,6 @@ const Navbar = () => (
           Contribute
         </ContributeButton>
       </li>
-      <li></li>
     </ul>
   </Nav>
 );

src/ui/screens/Home/index.tsx

@@ -17,14 +17,14 @@ export const InnerContainer = styled.section`
 const ValuePropContainer = styled.h1`
   font-size: 25px;
   font-weight: bold;
-  color: #5e4996;
+  color: ${({ theme }: any) => theme.accent};
   margin-top: 20px;
   margin-bottom: 40px;
   text-align: center;
 
   a {
     font-family: "Source Code Pro", monospace;
-    color: #382a5f;
+    color: ${({ theme }: any) => theme.link};
   }
 `;
 
@@ -33,7 +33,7 @@ const HumanTextWrapper = styled.div`
   padding: 10px;
   margin-left: 20px;
   font-weight: bold;
-  color: #382b5f;
+  color: ${({ theme }: any) => theme.accent};
   font-size: 22px;
   align-items: center;
   font-family: monospace;
@@ -45,8 +45,8 @@ const Wrapper = styled.div`
   justify-content: center;
   align-items: baseline;
   flex-direction: row;
-  background: #fff;
-  border: 1px solid #e9e4f7;
+  background: ${({ theme }: any) => theme.cardBg};
+  border: 1px solid ${({ theme }: any) => theme.cardBorder};
   border-radius: 4px;
   box-shadow: 0px 0px 10px rgba(48, 71, 89, 0.05);
   margin: 0 0 1rem;

src/ui/theme.js

@@ -0,0 +1,41 @@
+export const light = {
+  pageBg: "#f6f7f8",
+  text: "#333",
+  accent: "#5e4996",
+  link: "#382a5f",
+  cardBg: "#fff",
+  cardBorder: "#e9e4f7",
+  inputBg: "#382b5f",
+  inputText: "#fff",
+  buttonBg: "#382b5f",
+  buttonText: "#fff",
+  tableHeadBg: "#f3ebff",
+  tableHeadBorder: "#dcc5ff",
+  tableHeadText: "#382b5f",
+  tableCellText: "#333",
+  tableCellShadow: "#fff",
+  helperText: "#3d4852",
+  error: "#ff5d63"
+};
+
+export const dark = {
+  pageBg: "#16161a",
+  text: "#d8d8de",
+  accent: "#b3a4e6",
+  link: "#b3a4e6",
+  cardBg: "#22222a",
+  cardBorder: "#33333d",
+  inputBg: "#4a3d73",
+  inputText: "#fff",
+  buttonBg: "#4a3d73",
+  buttonText: "#fff",
+  tableHeadBg: "#2b2440",
+  tableHeadBorder: "#443a63",
+  tableHeadText: "#cabff0",
+  tableCellText: "#cfcfd6",
+  tableCellShadow: "transparent",
+  helperText: "#b8b8c0",
+  error: "#ff7a80"
+};
+
+export const themes = { light, dark };