Feat: Dark Theme

src/components/DayIcon.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+export default function BxBxSun(props) {
+  return (
+    <svg
+      focusable="false"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993S6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007S8.993 13.658 8.993 12S10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M4.219 18.363l2.12-2.122l1.415 1.414l-2.12 2.122z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M16.24 6.344l2.122-2.122l1.414 1.414l-2.122 2.122z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M6.342 7.759L4.22 5.637l1.415-1.414l2.12 2.122z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M19.776 18.364l-1.414 1.414l-2.122-2.122l1.414-1.414z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

src/components/Header.js

@@ -5,18 +5,29 @@ import {
   Typography,
   makeStyles,
   Link,
+  IconButton,
 } from "@material-ui/core";
 import { HeadsetTwoTone } from "@material-ui/icons";
+import { useMyTheme } from "../theme";
+// import Brightness4Icon from "@material-ui/icons/Brightness4";
+// import WbSunnyIcon from "@material-ui/icons/WbSunny";
+import NightIcon from "./NightIcon";
+import DayIcon from "./DayIcon";
+
 // Got access to theme as well
 const useStyles = makeStyles((theme) => ({
   heading: {
     marginLeft: theme.spacing(2),
   },
+  switchTheme: {
+    marginLeft: "auto",
+  },
 }));
 
 function Header() {
   //Styles can be used as hooks.
   const classes = useStyles();
+  const [darkTheme, changeTheme] = useMyTheme();
 
   return (
     <AppBar color="secondary" position="fixed">
@@ -33,6 +44,14 @@ function Header() {
             A-POP
           </Link>
         </Typography>
+        <IconButton
+          color="primary"
+          size="big"
+          style={{ marginLeft: "auto" }}
+          onClick={() => changeTheme(!darkTheme)}
+        >
+          <>{!darkTheme ? <NightIcon /> : <DayIcon />}</>
+        </IconButton>
       </Toolbar>
     </AppBar>
   );

src/components/NightIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function MdiWeatherNight(props) {
+  return (
+    <svg
+      focusable="false"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        d="M17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

src/components/SongList.js

@@ -9,6 +9,7 @@ import {
   makeStyles,
   TextField,
   InputAdornment,
+  useMediaQuery,
 } from "@material-ui/core";
 import { PlayArrow, Pause, Search } from "@material-ui/icons";
 import Skeleton from "@material-ui/lab/Skeleton";
@@ -19,6 +20,9 @@ import { REMOVE_OR_ADD_FROM_PLAYLIST } from "../graphql/mutations";
 import { GET_PLAYLIST_SONGS } from "../graphql/queries";
 import PlaylistAddOutlinedIcon from "@material-ui/icons/PlaylistAddOutlined";
 import PlaylistAddCheckIcon from "@material-ui/icons/PlaylistAddCheck";
+import NightIcon from "./NightIcon";
+import DayIcon from "./DayIcon";
+import { useMyTheme } from "../theme";
 
 const useStyles = makeStyles((theme) => ({
   containerSearch: {
@@ -52,6 +56,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function SongList() {
+  const greaterThanSm = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+
+  const [darkTheme, changeTheme] = useMyTheme();
+
   //But now we are subscribing to new data changes
   const { data, loading, error } = useSubscription(GET_SONGS);
   const {
@@ -153,6 +161,16 @@ function SongList() {
             ),
           }}
         />
+        {!greaterThanSm && (
+          <IconButton
+            color="primary"
+            size="big"
+            style={{ marginLeft: "auto" }}
+            onClick={() => changeTheme(!darkTheme)}
+          >
+            <>{!darkTheme ? <NightIcon /> : <DayIcon />}</>
+          </IconButton>
+        )}
       </div>
       <div>
         {handleDynamicSearch().map((song) => (
@@ -209,17 +227,13 @@ function Song({ song, inPlaylist }) {
             </Typography>
           </CardContent>
           <CardActions>
-            <IconButton onClick={handleSongPlay} size="small" color="primary">
+            <IconButton onClick={handleSongPlay} size="small">
               {/* here, everyone in the song list, are getting updated, 
                             but we just need the appropriate one to get updated 
                             so we can check for that using useEffects */}
               {currentSongPlaying ? <Pause /> : <PlayArrow />}
             </IconButton>
-            <IconButton
-              onClick={handleRemoveOrAddFromPlaylist}
-              size="small"
-              color="primary"
-            >
+            <IconButton onClick={handleRemoveOrAddFromPlaylist} size="small">
               {inPlaylist ? (
                 <PlaylistAddCheckIcon />
               ) : (

src/index.js

@@ -1,20 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import { MuiThemeProvider, CssBaseline } from "@material-ui/core";
-import theme from "./theme";
+import { CssBaseline } from "@material-ui/core";
+import ThemeProvider from "./theme";
 import { ApolloProvider } from "@apollo/react-hooks";
 import client from "./graphql/client";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <MuiThemeProvider theme={theme}>
+    <ThemeProvider>
       <CssBaseline />
       <App />
-    </MuiThemeProvider>
+    </ThemeProvider>
   </ApolloProvider>,
   document.getElementById("root")
 );
 
-serviceWorker.register();
+serviceWorker.unregister();

src/theme.js

@@ -1,34 +1,52 @@
-import { createMuiTheme } from "@material-ui/core/styles";
-import { deepPurple, pink } from "@material-ui/core/colors";
+import React, { createContext, useState, useContext } from "react";
+import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
+import { deepPurple, grey } from "@material-ui/core/colors";
 
-const theme = createMuiTheme({
-  palette: {
-    type: "dark",
-    primary: {
-      main: pink[600],
-    },
-    secondary: {
-      main: deepPurple[500],
-    },
-  },
-  typography: {
-    // Use the system font.
-    fontSize: 12,
-    fontFamily: "Balsamiq Sans",
-  },
-  overrides: {
-    MuiSlider: {
-      thumb: {
-        color: "white",
+const Theme = createContext();
+const changeTheme = createContext();
+
+export function useMyTheme() {
+  return [useContext(Theme), useContext(changeTheme)];
+}
+
+export default function ThemeProvider({ children }) {
+  const [darkTheme, setDarkTheme] = useState(false);
+
+  const theme = createMuiTheme({
+    palette: {
+      type: darkTheme ? "dark" : "light",
+      primary: {
+        main: grey[500],
       },
-      track: {
-        color: "green",
+      secondary: {
+        main: deepPurple[500],
       },
-      rail: {
-        color: "grey",
+    },
+    typography: {
+      // Use the system font.
+      fontSize: 12,
+      fontFamily: "Balsamiq Sans",
+    },
+    overrides: {
+      MuiSlider: {
+        thumb: {
+          color: "grey",
+        },
+        track: {
+          color: "green",
+        },
+        rail: {
+          color: "grey",
+        },
       },
     },
-  },
-});
+  });
 
-export default theme;
+  return (
+    <Theme.Provider value={darkTheme}>
+      <changeTheme.Provider value={setDarkTheme}>
+        <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+      </changeTheme.Provider>
+    </Theme.Provider>
+  );
+}