now theme is working

Author: ashishlamsal

src/App.js

@@ -1,11 +1,43 @@
+import { useEffect, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import {
+  lightBlue,
+  blueGrey,
+  deepOrange,
+  yellow,
+} from "@material-ui/core/colors";
+
 import PredictionPage from "./prediction";
 import AnalysisPage from "./analysis";
 import Layout from "./components/Layout";
-import { useEffect, useState } from "react";
 import api from "./lib/api";
 
 function App() {
+  const [darkState, setDarkState] = useState(false);
+  const palletType = darkState ? "dark" : "light";
+  const mainPrimaryColor = darkState ? blueGrey[800] : lightBlue[800];
+  const mainSecondaryColor = darkState ? deepOrange[400] : yellow[800];
+  const theme = createTheme({
+    palette: {
+      type: palletType,
+      primary: {
+        main: mainPrimaryColor,
+      },
+      secondary: {
+        main: mainSecondaryColor,
+      },
+      contrastThreshold: 3,
+      tonalOffset: 0.2,
+    },
+  });
+
+  const handleThemeChange = () => {
+    setDarkState(!darkState);
+  };
+
   const [rank, setRank] = useState("");
   const [showresult, setShowresult] = useState(false);
   const [collegeList, setCollegeList] = useState([]);
@@ -56,52 +88,57 @@ function App() {
   }, [selectedCollege]);
 
   return (
-    <Router>
-      <div>
-        <Layout
-          collegeList={collegeList}
-          facultyList={facultyList}
-          selectedCollege={selectedCollege}
-          selectedFaculty={selectedFaculty}
-          setSelectedCollege={handleCollegeSelect}
-          setSelectedFaculty={setSelectedFaculty}
-          setShowResult={setShowresult}
-          showResult={showresult}
-        >
-          <Switch>
-            <Route path="/" exact>
-              <PredictionPage
-                selectedCollege={selectedCollege}
-                selectedFaculty={selectedFaculty}
-                rank={rank}
-                setRank={setRank}
-                setShowResult={setShowresult}
-                showResult={showresult}
-              />
-            </Route>
-            <Route path="/predict" exact>
-              <PredictionPage
-                selectedCollege={selectedCollege}
-                selectedFaculty={selectedFaculty}
-                rank={rank}
-                setRank={setRank}
-                setShowResult={setShowresult}
-                showResult={showresult}
-              />
-            </Route>
-            <Route path="/analyse" exact>
-              <AnalysisPage
-                selectedCollege={selectedCollege}
-                selectedFaculty={selectedFaculty}
-              />
-            </Route>
-            <Route>
-              <h1>404</h1>
-            </Route>
-          </Switch>
-        </Layout>
-      </div>
-    </Router>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Router>
+        <div>
+          <Layout
+            collegeList={collegeList}
+            facultyList={facultyList}
+            selectedCollege={selectedCollege}
+            selectedFaculty={selectedFaculty}
+            setSelectedCollege={handleCollegeSelect}
+            setSelectedFaculty={setSelectedFaculty}
+            setShowResult={setShowresult}
+            showResult={showresult}
+            darkState={darkState}
+            handleThemeChange={handleThemeChange}
+          >
+            <Switch>
+              <Route path="/" exact>
+                <PredictionPage
+                  selectedCollege={selectedCollege}
+                  selectedFaculty={selectedFaculty}
+                  rank={rank}
+                  setRank={setRank}
+                  setShowResult={setShowresult}
+                  showResult={showresult}
+                />
+              </Route>
+              <Route path="/predict" exact>
+                <PredictionPage
+                  selectedCollege={selectedCollege}
+                  selectedFaculty={selectedFaculty}
+                  rank={rank}
+                  setRank={setRank}
+                  setShowResult={setShowresult}
+                  showResult={showresult}
+                />
+              </Route>
+              <Route path="/analyse" exact>
+                <AnalysisPage
+                  selectedCollege={selectedCollege}
+                  selectedFaculty={selectedFaculty}
+                />
+              </Route>
+              <Route>
+                <h1>404</h1>
+              </Route>
+            </Switch>
+          </Layout>
+        </div>
+      </Router>
+    </ThemeProvider>
   );
 }
 

src/components/Dropdown.js

@@ -6,9 +6,16 @@ import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 
 const useStyles = makeStyles((theme) => ({
-  margin: {
+  form: {
     margin: theme.spacing(2, 4),
   },
+  title:{
+    fontSize: "1.1rem",
+  },
+  fields:{
+    fontSize: "1.2rem",
+    paddingTop:"0.5rem",
+  },
 }));
 
 export default function CustomizedSelects({
@@ -25,12 +32,12 @@ export default function CustomizedSelects({
     <div style={{ width: "70%" }}>
       <FormControl
         fullWidth={true}
-        className={classes.margin}
+        className={classes.form}
       >
-        <InputLabel color="secondary" disableAnimation style={{ fontSize: "1.3rem" }}>
+        <InputLabel color="secondary" disableAnimation className={classes.title}>
           {type.toUpperCase()}
         </InputLabel>
-        <Select
+        <Select className={classes.fields}
           id="demo-customized-select-native"
           value={selected}
           onChange={handleChange}