├── src
    ├── context
    │   ├── DarkContext.js
    │   └── DarkState.js
    ├── components
    │   ├── Form.jsx
    │   ├── Card.jsx
    │   ├── Home.jsx
    │   ├── Navbar.jsx
    │   └── About.jsx
    ├── index.js
    ├── index.css
    └── App.js
├── .gitignore
├── .circleci
    └── config.yml
├── package.json
├── public
    └── index.html
└── README.md


/src/context/DarkContext.js:
--------------------------------------------------------------------------------
1 | import {createContext} from "react";
2 | 
3 | const darkContext = createContext();
4 | 
5 | export default darkContext;
6 | 


--------------------------------------------------------------------------------
/src/components/Form.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | const Form = () => {
4 |   return <>This is a form</>;
5 | };
6 | 
7 | export default Form;
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import DarkState from "./context/DarkState";
 5 | 
 6 | ReactDOM.render(
 7 |   <DarkState>
 8 |     <App />
 9 |   </DarkState>,
10 |   document.getElementById("root")
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | # This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
 2 | version: 2.1
 3 | 
 4 | orbs:
 5 |   node: circleci/node@4.7
 6 | 
 7 | workflows:
 8 |   sample:
 9 |     jobs:
10 |       - node/test:
11 |           version: '16.10'
12 |           # If you are using yarn, change the line below from "npm" to "yarn"
13 |           pkg-manager: npm
14 |           #
15 |           # This is the node version to use for the `cimg/node` tag
16 |           # Relevant tags can be found on the CircleCI Developer Hub
17 |           # https://circleci.com/developer/images/image/cimg/node
18 | 


--------------------------------------------------------------------------------
/src/context/DarkState.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from "react";
 2 | import DarkContext from "./DarkContext";
 3 | 
 4 | const DarkState = props => {
 5 |   const state = {
 6 |     darkTheme: true,
 7 |   };
 8 | 
 9 |   const [theme, setTheme] = useState(state);
10 | 
11 |   const switchTheme = () => {
12 |     if (theme.darkTheme === true) {
13 |       setTheme({
14 |         darkTheme: false,
15 |       });
16 |     } else {
17 |       setTheme({
18 |         darkTheme: true,
19 |       });
20 |     }
21 |   };
22 | 
23 |   return (
24 |     <DarkContext.Provider value={{theme, switchTheme}}>
25 |       {props.children}
26 |     </DarkContext.Provider>
27 |   );
28 | };
29 | 
30 | export default DarkState;
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "context-practice",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-router-dom": "^5.3.0",
12 |     "react-scripts": "4.0.3",
13 |     "web-vitals": "^1.0.1"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/Card.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Card = props => {
 4 |   return (
 5 |     <>
 6 |       <div
 7 |         className={`card w-25 m3 p-2 bg-${
 8 |           props.obj.theme.darkTheme === false ? "light" : "dark"
 9 |         }`}
10 |       >
11 |         <div className="card-body">
12 |           <h5
13 |             className={`card-title text-${
14 |               props.obj.theme.darkTheme === false ? "dark" : "light"
15 |             }`}
16 |           >
17 |             {props.title}
18 |           </h5>
19 |           <p
20 |             className={`card-text text-${
21 |               props.obj.theme.darkTheme === false ? "dark" : "light"
22 |             }`}
23 |           >
24 |             {props.desc}
25 |           </p>
26 |           <button
27 |             type="button"
28 |             onClick={props.click}
29 |             className="btn btn-primary"
30 |           >
31 |             {props.button}
32 |           </button>
33 |         </div>
34 |       </div>
35 |     </>
36 |   );
37 | };
38 | 
39 | export default Card;
40 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <link
 9 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
10 |       rel="stylesheet"
11 |       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
12 |       crossorigin="anonymous"
13 |     />
14 |     <meta
15 |       name="description"
16 |       content="Web site created using create-react-app"
17 |     />
18 |     <title>Dark to Light Effect | useContext API</title>
19 |   </head>
20 |   <body>
21 |     <noscript>You need to enable JavaScript to run this app.</noscript>
22 |     <div id="root"></div>
23 |     <script
24 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
25 |       integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
26 |       crossorigin="anonymous"
27 |     ></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Home = props => {
 4 |   return (
 5 |     <>
 6 |       <div
 7 |         className={`p-5 mb-4 bg-light rounded-3 bg-${
 8 |           props.obj.theme.darkTheme === false ? "light" : "dark"
 9 |         }`}
10 |       >
11 |         <div className="container-fluid py-5">
12 |           <h1
13 |             className={`display-5 fw-bold text-${
14 |               props.obj.theme.darkTheme === false ? "dark" : "light"
15 |             }`}
16 |           >
17 |             Darkight
18 |           </h1>
19 |           <p
20 |             className={`col-md-8 fs-4 text text-${
21 |               props.obj.theme.darkTheme === false ? "dark" : "light"
22 |             }`}
23 |           >
24 |             Click the Switch Theme button to switch from dark theme to light
25 |             theme or vice-versa.
26 |           </p>
27 |           <button
28 |             onClick={props.click}
29 |             className={`btn btn-lg btn-${
30 |               props.obj.theme.darkTheme === false ? "dark" : "light"
31 |             }`}
32 |           >
33 |             {props.obj.theme.darkTheme === false ? "Dark Theme" : "Light Theme"}
34 |           </button>
35 |         </div>
36 |       </div>
37 |     </>
38 |   );
39 | };
40 | 
41 | export default Home;
42 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from "react";
 2 | import Home from "./components/Home";
 3 | import Navbar from "./components/Navbar";
 4 | import DarkContext from "./context/DarkContext";
 5 | import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 6 | import About from "./components/About";
 7 | import Card from "./components/Card";
 8 | 
 9 | const App = () => {
10 |   const dark = useContext(DarkContext);
11 |   const handleClick = () => {
12 |     dark.switchTheme();
13 |     console.log("The theme has changed.");
14 |   };
15 | 
16 |   return (
17 |     <Router>
18 |       <Navbar click={handleClick} obj={dark} />
19 |       <Switch>
20 |         <Route exact path="/">
21 |           <Home click={handleClick} obj={dark} />
22 |           <div className="container">
23 |             <Card
24 |               click={handleClick}
25 |               obj={dark}
26 |               title="Switch Theme"
27 |               desc="Click the Switch Theme Button to switch theme from light to dark or vice-versa"
28 |               button="Switch Theme"
29 |             />
30 |           </div>
31 |         </Route>
32 | 
33 |         <Route path="/about">
34 |           <About click={handleClick} obj={dark} />
35 |         </Route>
36 |       </Switch>
37 |     </Router>
38 |   );
39 | };
40 | 
41 | export default App;
42 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Link} from "react-router-dom";
 3 | 
 4 | const Navbar = props => {
 5 |   return (
 6 |     <>
 7 |       <nav
 8 |         className={`navbar navbar-expand-lg navbar-${
 9 |           props.obj.theme.darkTheme === false ? "light" : "dark"
10 |         } bg-${props.obj.theme.darkTheme === false ? "light" : "dark"}`}
11 |       >
12 |         <div className="container-fluid">
13 |           <Link className="navbar-brand" to="/">
14 |             Darkight
15 |           </Link>
16 |           <button
17 |             className="navbar-toggler"
18 |             type="button"
19 |             data-bs-toggle="collapse"
20 |             data-bs-target="#navbarSupportedContent"
21 |             aria-controls="navbarSupportedContent"
22 |             aria-expanded="false"
23 |             aria-label="Toggle navigation"
24 |           >
25 |             <span className="navbar-toggler-icon"></span>
26 |           </button>
27 |           <div className="collapse navbar-collapse" id="navbarSupportedContent">
28 |             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
29 |               <li className="nav-item">
30 |                 <Link className="nav-link" aria-current="page" to="/">
31 |                   Home
32 |                 </Link>
33 |               </li>
34 |               <li className="nav-item">
35 |                 <Link className="nav-link" to="/about">
36 |                   About
37 |                 </Link>
38 |               </li>
39 |             </ul>
40 |           </div>
41 |           <button
42 |             onClick={props.click}
43 |             className={`btn btn-${
44 |               props.obj.theme.darkTheme === false ? "dark" : "light"
45 |             }`}
46 |           >
47 |             {props.obj.theme.darkTheme === false ? "Dark Theme" : "Light Theme"}
48 |           </button>
49 |         </div>
50 |       </nav>
51 |     </>
52 |   );
53 | };
54 | 
55 | export default Navbar;
56 | 


--------------------------------------------------------------------------------
/src/components/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Link} from "react-router-dom";
 3 | 
 4 | const About = props => {
 5 |   return (
 6 |     <div>
 7 |       <main
 8 |         className={`container mt-5 bg-${
 9 |           props.obj.theme.darkTheme === false ? "light" : "dark"
10 |         } border-5 py-3 px-5 pb-5 rounded`}
11 |       >
12 |         <h1 className="text-primary mt-5">About Darkight</h1>
13 |         <p
14 |           className={`fs-5 col-md-8 text-${
15 |             props.obj.theme.darkTheme === false ? "dark" : "light"
16 |           }`}
17 |         >
18 |           Darkight is a practice project for understanding the uses of
19 |           useContext hook in ReactJs. You can go to the Home Page to switch
20 |           theme and watch useContext hook in action. Now, this is some random
21 |           text to make the content larger.
22 |         </p>
23 | 
24 |         <div className="mb-5">
25 |           <Link to="/" className="btn btn-primary btn-lg px-4">
26 |             Home
27 |           </Link>
28 |         </div>
29 | 
30 |         <hr className="col-3 col-md-2 mb-5" />
31 | 
32 |         <div className="row g-5">
33 |           <div className="col-md-6">
34 |             <h2
35 |               className={`text-${
36 |                 props.obj.theme.darkTheme === false ? "dark" : "light"
37 |               }`}
38 |             >
39 |               Features
40 |             </h2>
41 |             <p
42 |               className={`text-${
43 |                 props.obj.theme.darkTheme === false ? "dark" : "light"
44 |               }`}
45 |             >
46 |               Go to the home page and switch theme to see the featureds of
47 |               Darkight in action. Or simply switch the theme using the button in
48 |               the navigation bar.
49 |             </p>
50 |           </div>
51 | 
52 |           <div className="col-md-6">
53 |             <h2
54 |               className={`text-${
55 |                 props.obj.theme.darkTheme === false ? "dark" : "light"
56 |               }`}
57 |             >
58 |               Framework Used
59 |             </h2>
60 |             <p
61 |               className={`text-${
62 |                 props.obj.theme.darkTheme === false ? "dark" : "light"
63 |               }`}
64 |             >
65 |               The framework used to build this awesome website is ReactJs and
66 |               Bootstrap.
67 |             </p>
68 |             <button
69 |               onClick={props.click}
70 |               className={`btn btn-lg btn-${
71 |                 props.obj.theme.darkTheme === false ? "dark" : "light"
72 |               }`}
73 |             >
74 |               {props.obj.theme.darkTheme === false
75 |                 ? "Dark Theme"
76 |                 : "Light Theme"}
77 |             </button>
78 |           </div>
79 |         </div>
80 |       </main>
81 |     </div>
82 |   );
83 | };
84 | 
85 | export default About;
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `yarn start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `yarn test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `yarn build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `yarn eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `yarn build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------