commit
b5e111da5c
|
@ -17,6 +17,7 @@
|
|||
"fuse.js": "^6.4.6",
|
||||
"jQuery": "^1.7.4",
|
||||
"react": "^17.0.2",
|
||||
"react-cookie": "^4.1.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.1.2"
|
||||
|
@ -3251,6 +3252,14 @@
|
|||
"@babel/types": "^7.3.0"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
|
||||
"integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/@types/eslint": {
|
||||
"version": "7.28.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
|
||||
|
@ -3282,6 +3291,18 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
|
||||
|
@ -3499,11 +3520,32 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
||||
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
|
||||
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/@types/q": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
|
||||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@types/react": {
|
||||
"version": "17.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
|
||||
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
|
@ -3512,6 +3554,14 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/@types/source-list-map": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
|
||||
|
@ -6567,6 +6617,14 @@
|
|||
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
|
||||
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/csstype": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
|
||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/cyclist": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
||||
|
@ -9736,6 +9794,17 @@
|
|||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
@ -16210,6 +16279,22 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/react-cookie": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
|
||||
"integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "^3.0.1",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"universal-cookie": "^4.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
|
@ -19251,6 +19336,18 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/universal-cookie": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
|
||||
"integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.3.3",
|
||||
"cookie": "^0.4.0"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
|
||||
"node_modules/universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
|
@ -23591,6 +23688,11 @@
|
|||
"@babel/types": "^7.3.0"
|
||||
}
|
||||
},
|
||||
"@types/cookie": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
|
||||
"integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
|
||||
},
|
||||
"@types/eslint": {
|
||||
"version": "7.28.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
|
||||
|
@ -23622,6 +23724,15 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@types/html-minifier-terser": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
|
||||
|
@ -23801,11 +23912,26 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
||||
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
|
||||
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
|
||||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
|
||||
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
|
@ -23814,6 +23940,11 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
"@types/source-list-map": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
|
||||
|
@ -26251,6 +26382,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
|
||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
|
||||
},
|
||||
"cyclist": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
|
||||
|
@ -28659,6 +28795,14 @@
|
|||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
@ -33648,6 +33792,16 @@
|
|||
"whatwg-fetch": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"react-cookie": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
|
||||
"integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
|
||||
"requires": {
|
||||
"@types/hoist-non-react-statics": "^3.0.1",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"universal-cookie": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
|
@ -36036,6 +36190,15 @@
|
|||
"crypto-random-string": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"universal-cookie": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
|
||||
"integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
|
||||
"requires": {
|
||||
"@types/cookie": "^0.3.3",
|
||||
"cookie": "^0.4.0"
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
"fuse.js": "^6.4.6",
|
||||
"jQuery": "^1.7.4",
|
||||
"react": "^17.0.2",
|
||||
"react-cookie": "^4.1.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"web-vitals": "^1.1.2"
|
||||
|
|
49
src/App.css
49
src/App.css
|
@ -291,6 +291,55 @@ footer {
|
|||
|
||||
.sect-drop {
|
||||
box-sizing: border-box;
|
||||
background-color: #222222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#root {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dark-content {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.frontPage {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
box-sizing: border-box;
|
||||
/* justify-content: normal ; */
|
||||
align-content: flex-start;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.result {
|
||||
width: 30%;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
=======
|
||||
width: 10rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
|
39
src/App.js
39
src/App.js
|
@ -1,12 +1,15 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Fuse from "fuse.js";
|
||||
|
||||
import React, { useState, useEffect, createContext } from "react";
|
||||
import LangDropdown from "./components/LangDropdown";
|
||||
import LangFilters from "./components/LangFilters";
|
||||
import SectDropdown from "./components/SectDropdown";
|
||||
import SearchBar from "./components/SearchBar";
|
||||
import SearchResult from "./components/SearchResult";
|
||||
import LightSwitch from "./components/LightSwitch";
|
||||
import axios from "axios";
|
||||
import Fuse from "fuse.js";
|
||||
import { ThemeContext, themes, swapMode } from './darkMode';
|
||||
import { useCookies } from 'react-cookie';
|
||||
|
||||
import Default from "./components/Default";
|
||||
|
||||
import SunImg from "./img/sun.png";
|
||||
|
@ -111,6 +114,8 @@ function App() {
|
|||
const [searchParams, setSearchParams] = useState({ searchTerm: "" });
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [sectionResults, setSectionResults] = useState([]);
|
||||
const [cookies, setCookie, removeCookie] = useCookies(['lightMode']);
|
||||
|
||||
const [lightMode, setLightMode] = useState(true);
|
||||
|
||||
// eslint-disable-next-line
|
||||
|
@ -126,6 +131,7 @@ function App() {
|
|||
|
||||
// fetches data the first time the page renders
|
||||
useEffect(() => {
|
||||
swapMode(cookies.lightMode ? themes.lightMode : themes.darkMode)
|
||||
async function fetchData() {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
@ -287,8 +293,31 @@ function App() {
|
|||
// });
|
||||
}
|
||||
return (
|
||||
<div className="wrapper">
|
||||
|
||||
<div
|
||||
className="wrapper"
|
||||
// style={{
|
||||
// color: lightMode ? "black" : "white",
|
||||
// backgroundColor: lightMode ? "white" : "black",
|
||||
// }}
|
||||
>
|
||||
<ThemeContext.Consumer>
|
||||
{ ({ changeTheme }) => {
|
||||
let willBeDarkMode = (cookies.lightMode && cookies.lightMode.toLowerCase() !== "true") //whether or not we are currently light mode and will become dark mode
|
||||
changeTheme(willBeDarkMode ? themes.light : themes.dark)
|
||||
return (<img src={willBeDarkMode ? MoonImg : SunImg}
|
||||
onClick = {()=>{
|
||||
setCookie("lightMode",willBeDarkMode);
|
||||
changeTheme(willBeDarkMode ? themes.light : themes.dark)
|
||||
}}
|
||||
style={{width: "20px", height: "20px",display: "block",
|
||||
marginLeft: "auto"
|
||||
}}
|
||||
/>)}
|
||||
}
|
||||
</ThemeContext.Consumer>
|
||||
<header className="header">
|
||||
|
||||
<h1>
|
||||
<a href="https://ebookfoundation.github.io/free-programming-books/" target="_blank" rel="noreferrer">
|
||||
free-programming-books
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
import React, { useState, useEffect, createContext } from "react";
|
||||
|
||||
//https://levelup.gitconnected.com/dark-mode-in-react-533faaee3c6e
|
||||
|
||||
export const themes = {
|
||||
dark: "",
|
||||
light: "dark-content",
|
||||
};
|
||||
|
||||
export const swapMode = (theme) => {
|
||||
switch (theme) {
|
||||
case themes.light:
|
||||
document.body.classList.add('dark-content');
|
||||
break;
|
||||
case themes.dark:
|
||||
default:
|
||||
document.body.classList.remove('dark-content');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
export const ThemeContext = createContext({
|
||||
theme: themes.dark,
|
||||
changeTheme: () => {},
|
||||
});
|
||||
|
||||
export default function ThemeContextWrapper(props) {
|
||||
const [theme, setTheme] = useState(props.theme);
|
||||
|
||||
function changeTheme(theme) {
|
||||
setTheme(theme);
|
||||
}
|
||||
// console.log(theme)
|
||||
swapMode(theme)
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
|
||||
{props.children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
BIN
src/img/moon.png
BIN
src/img/moon.png
Binary file not shown.
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
After Width: | Height: | Size: 162 KiB |
BIN
src/img/sun.png
BIN
src/img/sun.png
Binary file not shown.
Before Width: | Height: | Size: 285 KiB After Width: | Height: | Size: 85 KiB |
12
src/index.js
12
src/index.js
|
@ -2,12 +2,18 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import './App.css';
|
||||
import App from './App';
|
||||
import ThemeContextWrapper from './darkMode';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import { CookiesProvider } from 'react-cookie';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
<CookiesProvider>
|
||||
<ThemeContextWrapper>
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</ThemeContextWrapper>
|
||||
</CookiesProvider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue