Implemented a dark mode

client/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.3",
@@ -14,6 +16,7 @@
     "react-scripts": "4.0.3",
     "react-spotify-web-playback": "^0.8.1",
     "spotify-web-api-node": "^5.0.2",
+    "styled-components": "^5.2.3",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

client/src/App.css

@@ -0,0 +1,3 @@
+body {
+    transition: all 500ms;
+}

client/src/App.js

@@ -1,11 +1,31 @@
 import "bootstrap/dist/css/bootstrap.min.css"
 import Login from "./Login"
 import Dashboard from "./Dashboard"
+import "./App.css"
+import { ThemeContext } from "./ThemeProvider"
+import GlobalStyles from "./theme/GlobalStyles"
 
 const code = new URLSearchParams(window.location.search).get("code")
 
 function App() {
-  return code ? <Dashboard code={code} /> : <Login />
+  return (
+    <ThemeContext.Consumer>
+      {(context) => (
+        <>
+          <GlobalStyles theme={context.theme} />
+          {code ? (
+            <Dashboard
+              code={code}
+              toggleTheme={context.toggleTheme}
+              theme={context.theme}
+            />
+          ) : (
+            <Login />
+          )}
+        </>
+      )}
+    </ThemeContext.Consumer>
+  )
 }
 
 export default App

client/src/Dashboard.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react"
 import useAuth from "./useAuth"
 import Player from "./Player"
+import LightModeIcon from "@material-ui/icons/Brightness5"
+import DarkModeIcon from "@material-ui/icons/Brightness4"
 import TrackSearchResult from "./TrackSearchResult"
 import { Container, Form } from "react-bootstrap"
 import SpotifyWebApi from "spotify-web-api-node"
@@ -10,7 +12,7 @@ const spotifyApi = new SpotifyWebApi({
   clientId: "8b945ef10ea24755b83ac50cede405a0",
 })
 
-export default function Dashboard({ code }) {
+export default function Dashboard({ code, toggleTheme, theme }) {
   const accessToken = useAuth(code)
   const [search, setSearch] = useState("")
   const [searchResults, setSearchResults] = useState([])
@@ -75,6 +77,13 @@ export default function Dashboard({ code }) {
 
   return (
     <Container className="d-flex flex-column py-2" style={{ height: "100vh" }}>
+      <button
+        className="btn"
+        style={{ marginLeft: "auto", marginBottom: "2rem", background: theme.btnBackground }}
+        onClick={toggleTheme}
+      >
+        {theme.name === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
+      </button>
       <Form.Control
         type="search"
         placeholder="Search Songs/Artists"
@@ -96,7 +105,11 @@ export default function Dashboard({ code }) {
         )}
       </div>
       <div>
-        <Player accessToken={accessToken} trackUri={playingTrack?.uri} />
+        <Player
+          accessToken={accessToken}
+          trackUri={playingTrack?.uri}
+          theme={theme}
+        />
       </div>
     </Container>
   )

client/src/Player.js

@@ -1,14 +1,18 @@
 import { useState, useEffect } from "react"
 import SpotifyPlayer from "react-spotify-web-playback"
+import { lightThemePlayer } from "./theme/lightTheme"
+import { darkThemePlayer } from "./theme/darkTheme"
 
-export default function Player({ accessToken, trackUri }) {
+export default function Player({ accessToken, trackUri, theme }) {
   const [play, setPlay] = useState(false)
 
   useEffect(() => setPlay(true), [trackUri])
 
   if (!accessToken) return null
   return (
     <SpotifyPlayer
+      key={theme.name}
+      styles={theme.name === "dark" ? { ...darkThemePlayer } : { ...lightThemePlayer }}
       token={accessToken}
       showSaveIcon
       callback={state => {

client/src/ThemeProvider.js

@@ -0,0 +1,34 @@
+import React from "react";
+import darkTheme from "./theme/darkTheme";
+import lightTheme from "./theme/lightTheme";
+export const ThemeContext = React.createContext();
+
+const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = React.useState("light");
+  React.useEffect(() => {
+    let theme = window.localStorage.getItem("theme");
+    if (!theme) {
+      theme = "light";
+      window.localStorage.setItem("theme", theme);
+    }
+    setTheme(theme);
+  }, []);
+  const toggleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+      window.localStorage.setItem("theme", "dark");
+    } else {
+      setTheme("light");
+      window.localStorage.setItem("theme", "light");
+    }
+  };
+  return (
+    <ThemeContext.Provider
+      value={{ theme: theme === "light" ? lightTheme : darkTheme, toggleTheme }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

client/src/index.js

@@ -1,10 +1,13 @@
 import React from "react"
 import ReactDOM from "react-dom"
 import App from "./App"
+import ThemeProvider from "./ThemeProvider"
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById("root")
 )

client/src/theme/GlobalStyles.js

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+    body {
+        background: ${(props) => props.theme.bg};
+        color: ${(props) => props.theme.color};
+    }
+`;
+
+export default GlobalStyle;

client/src/theme/darkTheme.js

@@ -0,0 +1,17 @@
+const darkTheme = {
+  name: "dark",
+  bg: "#121212",
+  color: "#1db954",
+  btnBackground: "#1db954"
+};
+
+export const darkThemePlayer = {
+  bgColor: "#212121",
+  color: "#b3b3b3",
+  trackNameColor: "white",
+  sliderColor: "#b3b3b3",
+  sliderHandleColor: "#1db954",
+  activeColor: "#1db954",
+}
+
+export default darkTheme;

client/src/theme/lightTheme.js

@@ -0,0 +1,10 @@
+const lightTheme = {
+  name: "light",
+  bg: "",
+  color: "",
+  btnBackground: "#b3b3b3"
+};
+
+export const lightThemePlayer = {}
+
+export default lightTheme;