#120 Adds custom Theming Functionality, and Dark Theme toggle Logic. (#…

…121) * Adds Theming functionality * Fixes React.strict bugs * Initiates Dark/Light Global themes * Edits ThemeIcon Styles
shravan20 · Apr 25, 2021 · 054f554 · 054f554
1 parent 4a63d18
commit 054f554
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 13 deletions.
diff --git a/frontend/src/components/Dashboard/index.js b/frontend/src/components/Dashboard/index.js
@@ -1,11 +1,17 @@
-import React from 'react';
+import React,{useState} from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Container from '@material-ui/core/Container';
+import { IconButton,Paper } from "@material-ui/core";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { dashConstants } from '../../config/constants';
+import {LightTheme,DarkTheme} from "../../util/themes/GlobalThemes"
+import {getAppBarStyles} from "../../util/styles/componentStyles"
+import MoonIcon from '../../moon.svg';
+import LightIcon from "../../sun.svg"
 import Home from '../Pages/Home';
 
 function ElevationScroll(props) {
@@ -25,20 +31,32 @@ function ElevationScroll(props) {
 }
 
 function Dashboard(props) {
+   const [isDark, setIsDark] = useState(false);
+   const theme = isDark ? createMuiTheme(DarkTheme) : createMuiTheme(LightTheme)
+   const classes = getAppBarStyles()
+
+   function handleThemeChange(){
+      setIsDark(!isDark)
+   }
     return (
         <React.Fragment>
-            <CssBaseline />
-            <ElevationScroll {...props}>
-                <AppBar>
-                    <Toolbar>
-                        <Typography variant="h6">{dashConstants.APP_NAME}</Typography>
-                    </Toolbar>
-                </AppBar>
-            </ElevationScroll>
-            <Toolbar />
-            <Container style={{backgroundColor:'white'}}>
-                <Home/>
-            </Container>
+            <ThemeProvider theme={theme}>
+                <Paper>
+                    <CssBaseline />
+                    <ElevationScroll {...props}>
+                    <AppBar>
+                        <Toolbar className = {classes.root}>
+                            <Typography variant="h6" className = {classes.title}>{dashConstants.APP_NAME}</Typography>
+                            <IconButton className = {classes.themeIcon}  onClick = {handleThemeChange} >{<img alt="Theme Icon" src={isDark ? LightIcon : MoonIcon}/>}</IconButton>
+                        </Toolbar>
+                    </AppBar>
+                    </ElevationScroll>
+                    <Toolbar />
+                    <Container style={{backgroundColor:'white'}}>
+                        <Home/>
+                    </Container>
+                </Paper>
+            </ThemeProvider>
         </React.Fragment>
     );
 }

diff --git a/frontend/src/moon.svg b/frontend/src/moon.svg
diff --git a/frontend/src/sun.svg b/frontend/src/sun.svg
diff --git a/frontend/src/util/styles/componentStyles.js b/frontend/src/util/styles/componentStyles.js
@@ -0,0 +1,13 @@
+import { makeStyles } from "@material-ui/core";
+
+export const getAppBarStyles = makeStyles((theme) => ({
+    title: {
+      flexGrow: 1,
+    },
+    themeIcon:{
+        backgroundColor:"transparent !important",
+        height:"38px",
+        width:"38px",
+        boxShadow:"0px 0px 0.5px 0.5px #6e7681"
+    }
+  }));
diff --git a/frontend/src/util/themes/GlobalThemes.js b/frontend/src/util/themes/GlobalThemes.js
@@ -0,0 +1,151 @@
+export const LightTheme = {
+   palette: {
+      primary: {
+         light: "#7986cb",
+         main: "#3f51b5",
+         dark: "#303f9f",
+         contrastText: "#fff",
+      },
+
+      text: {
+         primary: "rgba(0, 0, 0, 0.87)",
+         secondary: "rgba(0, 0, 0, 0.54)",
+         disabled: "rgba(0, 0, 0, 0.38)",
+         hint: "rgba(0, 0, 0, 0.38)",
+      },
+      background: {
+         paper: "#fff",
+         default: "#fafafa",
+      },
+      action: {
+         active: "rgba(0, 0, 0, 0.54)",
+         hover: "rgba(0, 0, 0, 0.04)",
+         selected: "rgba(0, 0, 0, 0.08)",
+         focus:"rgba(0, 0, 0, 0.12)"
+      },
+   },
+
+   typography: {
+      allVariants: {
+         color: "#000",
+      },
+      h5: {
+         color: "#000",
+      },
+      h6: {
+         color: "#fff",
+      },
+      h2: {
+         color: "#000",
+      },
+   },
+   overrides: {
+      MuiToolbar: {
+         root: {
+            background: "#3f51b5",
+         },
+      },
+      MuiPaper: {
+         root: {
+            border: "none",
+         },
+      },
+      MuiContainer: {
+         root: {
+            backgroundColor: "#fff !important",
+         },
+      },
+      MuiInputBase: {
+        root: {
+           border: "none",
+        },
+     },
+     MuiSvgIcon:{
+      root:{
+        color:"#484f58"
+      }
+    },
+    MuiInputLabel:{
+      root:{
+        background:"#fff",
+        color:"#000"
+      }
+    }
+   },
+};
+
+export const DarkTheme = {
+   palette: {
+      primary: {
+         light: "#0d419d",
+         main: "#0d419d",
+         dark: "#0d419d",
+         contrastText: "#fff",
+      },
+
+      text: {
+         primary: "#bdd1d9",
+         secondary: "#f0f6fc",
+         disabled: "#30363d",
+         hint: "#6e7681",
+      },
+      background: {
+         paper: "#0d1117",
+         default: "#0d1117",
+      },
+      action: {
+        active: "rgba(0, 0, 0, 0.54)",
+        hover: "#30363d",
+        selected: "#21262d",
+        focus:"rgba(0, 0, 0, 0.12)"
+     },
+   },
+   typography: {
+      allVariants: {
+         color: "#bdd1d9",
+      },
+      h5: {
+         color: "#bdd1d9",
+      },
+      h6: {
+         color: "#f0f6fc",
+      },
+      h2: {
+         color: "#c9d1d9",
+      },
+   },
+   overrides: {
+      MuiToolbar: {
+         root: {
+            background: "#1c2128",
+         },
+      },
+      MuiPaper: {
+         root: {
+            border: "1px solid #30363d",
+         },
+      },
+      MuiContainer: {
+         root: {
+            backgroundColor: "#0d1117 !important",
+         },
+      },
+      MuiInputBase: {
+        root: {
+           border: "solid #30363d 1px",
+        },
+     },
+     MuiSvgIcon:{
+      root:{
+        color:"#484f58"
+      }
+    },
+    MuiInputLabel:{
+      root:{
+        background:"#0d1117",
+        color:"#f0f6fc"
+      }
+    },
+   },
+
+};