diff --git a/package-lock.json b/package-lock.json index 7ecf9b306..2859259b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-lazy-load-image-component": "^1.5.6", + "react-router-dom": "^5.3.0", "uuid": "^9.0.0" }, "devDependencies": { @@ -2507,6 +2508,19 @@ "node": ">=4" } }, + "node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "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", @@ -2595,6 +2609,11 @@ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" }, + "node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2991,6 +3010,14 @@ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, + "node_modules/path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dependencies": { + "isarray": "0.0.1" + } + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -3175,6 +3202,47 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router-dom": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", + "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.3.4", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/react-router/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -3227,6 +3295,11 @@ "node": ">=4" } }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "node_modules/rollup": { "version": "3.17.2", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.2.tgz", @@ -3368,6 +3441,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -3455,6 +3533,11 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "node_modules/vite": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz", diff --git a/package.json b/package.json index fc5f4ee91..669ba07aa 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-lazy-load-image-component": "^1.5.6", + "react-router-dom": "^5.3.0", "uuid": "^9.0.0" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index e87f95ec2..c64bd7300 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,29 +1,19 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import Post from "./components/Post"; -import { - db, - auth, - storage, - googleProvider, - facebookProvider, -} from "./lib/firebase"; -import { - Modal, - Button, - Input, - Dialog, - DialogTitle, - DialogContent, -} from "@mui/material"; +import { db, auth } from "./lib/firebase"; +import { Button, Dialog, Modal, DialogContent } from "@mui/material"; import { makeStyles } from "@mui/styles"; import ImgUpload from "./components/ImgUpload"; import Loader from "./components/Loader"; -import AnimatedButton from "./components/AnimatedButton"; import { FaArrowCircleUp } from "react-icons/fa"; import { useSnackbar } from "notistack"; import logo from "./assets/logo.png"; +import { Switch, Route, useHistory } from "react-router-dom"; +import LoginScreen from "./pages/Login"; +import SignupScreen from "./pages/Signup"; +import AnimatedButton from "./components/AnimatedButton"; -function getModalStyle() { +export function getModalStyle() { const top = 50; const left = 50; const padding = 5; @@ -36,43 +26,35 @@ function getModalStyle() { padding: `${padding}%`, borderRadius: `${radius}%`, textAlign: "center", + backgroundColor: "var(--bg-color)", }; } -const useStyles = makeStyles((theme) => ({ +export const useStyles = makeStyles((theme) => ({ paper: { position: "absolute", width: 200, - backgroundColor: theme.palette.background.paper, - border: "2px solid #000", + border: "1px solid var(--color)", borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[5], + boxShadow: theme.shadows[10], padding: theme.spacing(2, 4, 3), + color: "var(--color)", }, })); function App() { const classes = useStyles(); - const [modalStyle] = useState(getModalStyle); + const history = useHistory(); + const [posts, setPosts] = useState([]); - const [openSignUp, setOpenSignUp] = useState(false); - const [openSignIn, setOpenSignIn] = useState(false); - const [username, setUsername] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); const [user, setUser] = useState(null); - const [signingUp, setSigningUp] = useState(false); - const [loggingIn, setLoggingIn] = useState(false); const [loadingPosts, setLoadingPosts] = useState(true); const [pageSize, setPageSize] = useState(10); const [loadMorePosts, setLoadMorePosts] = useState(false); const [openNewUpload, setOpenNewUpload] = useState(false); const [logout, setLogout] = useState(false); - const processingAuth = useMemo( - () => loggingIn || signingUp || loadingPosts, - [loggingIn, signingUp, loadingPosts] - ); + const buttonStyle = { background: "linear-gradient(40deg, #e107c1, #59afc7)", borderRadius: "20px", @@ -81,19 +63,9 @@ function App() { }, }; - const [image, setImage] = useState(null); - const [address, setAddress] = useState(null); - const { enqueueSnackbar } = useSnackbar(); const [showScroll, setShowScroll] = useState(false); - const handleChange = (e) => { - if (e.target.files[0]) { - setImage(e.target.files[0]); - setAddress(e.target.value); - } - }; - const checkScrollTop = () => { if (!showScroll && window.pageYOffset > 400) { setShowScroll(true); @@ -111,20 +83,34 @@ function App() { useEffect(() => { const unsubscribe = auth.onAuthStateChanged((authUser) => { if (authUser) { - // user has logged in setUser(authUser); + history.push("/dummygram/"); } else { - // user has logged out setUser(null); + history.push("/dummygram/login"); } }); + return () => { - // perform some cleanup actions unsubscribe(); }; - }, [user, username]); + }, [user]); useEffect(() => { + if (document.body.classList.contains("darkmode--activated")) { + window.document.body.style.setProperty("--bg-color", "black"); + window.document.body.style.setProperty("--color", "white"); + window.document.body.style.setProperty("--val", 1); + document.getElementsByClassName("app__header__img").item(0).style.filter = + "invert(100%)"; + } else { + window.document.body.style.setProperty("--bg-color", "white"); + window.document.body.style.setProperty("--color", "#2B1B17"); + window.document.body.style.setProperty("--val", 0); + document.getElementsByClassName("app__header__img").item(0).style.filter = + "invert(0%)"; + } + window.addEventListener("scroll", handleMouseScroll); db.collection("posts") .orderBy("timestamp", "desc") @@ -170,79 +156,6 @@ function App() { setLoadMorePosts(false); }, [loadMorePosts]); - const signUp = (e) => { - e.preventDefault(); - setSigningUp(true); - auth - .createUserWithEmailAndPassword(email, password) - .then((authUser) => { - const uploadTask = storage.ref(`images/${image.name}`).put(image); - uploadTask.on( - "state_changed", - (snapshot) => { - // // progress function ... - // setProgress(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100)); - }, - (error) => { - // error function ... - - enqueueSnackbar(error.message, { - variant: "error", - }); - }, - () => { - // complete function ... - storage - .ref("images") - .child(image.name) - .getDownloadURL() - .then((url) => { - authUser.user.updateProfile({ - displayName: username, - photoURL: url, - }); - enqueueSnackbar("Signup Successful!", { - variant: "success", - }); - setOpenSignUp(false); - }); - } - ); - }) - // .then(() => { - - // }) - .catch((error) => - enqueueSnackbar(error.message, { - variant: "error", - }) - ) - .finally(() => { - setSigningUp(false); - }); - }; - - const signIn = (e) => { - e.preventDefault(); - setLoggingIn(true); - auth - .signInWithEmailAndPassword(email, password) - .then(() => { - enqueueSnackbar("Login successful!", { - variant: "success", - }); - setOpenSignIn(false); - }) - .catch((error) => - enqueueSnackbar(error.message, { - variant: "error", - }) - ) - .finally(() => { - setLoggingIn(false); - }); - }; - const signOut = () => { auth.signOut().finally(); enqueueSnackbar("Logged out Successfully !", { @@ -250,48 +163,6 @@ function App() { }); }; - const signInWithGoogle = (e) => { - e.preventDefault(); - setLoggingIn(true); - auth - .signInWithPopup(googleProvider) - .then(() => { - enqueueSnackbar("Login successful!", { - variant: "success", - }); - setOpenSignIn(false); - }) - .catch((error) => - enqueueSnackbar(error.message, { - variant: "error", - }) - ) - .finally(() => { - setLoggingIn(false); - }); - }; - - const signInWithFacebook = (e) => { - e.preventDefault(); - setLoggingIn(true); - auth - .signInWithPopup(facebookProvider) - .then(() => { - enqueueSnackbar("Login successful!", { - variant: "success", - }); - setOpenSignIn(false); - }) - .catch((error) => - enqueueSnackbar(error.message, { - variant: "error", - }) - ) - .finally(() => { - setLoggingIn(false); - }); - }; - return (
@@ -301,6 +172,10 @@ function App() { className="app__header__img w-100" onClick={() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); + window.location.href = "/"; + }} + style={{ + cursor: "pointer", }} /> {user ? ( @@ -327,7 +202,9 @@ function App() { ) : (
)}
+ setOpenNewUpload(false)} >
instagram -

New Post

- +

+ New Post +

+ + {!loadingPosts && (user ? (
- - setOpenSignUp(false)}> -
-
- instagram -
- {address ? ( - profile pic - ) : ( -
PROFILE PICTURE
- )} -
- setUsername(e.target.value)} - /> - setEmail(e.target.value)} - /> - setPassword(e.target.value)} - /> -
- - -
- - Sign Up - -
-
- - - setOpenSignIn(false)}> -
-
- dummygram - setEmail(e.target.value)} - /> - setPassword(e.target.value)} - /> - - Sign In - - - Sign In With Google - - - Sign In With Facebook - -
-
- - setLogout(false)}>
@@ -516,7 +284,11 @@ function App() { src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png" alt="dummygram" className="modal__signup__img" - style={{ width: "80%", marginLeft: "10%" }} + style={{ + width: "80%", + marginLeft: "10%", + filter: "invert(var(--val))", + }} />

Are you sure you want to Logout? @@ -542,37 +315,60 @@ function App() {

-
-
+ + {user ? ( +
+
- {loadingPosts ? ( - - ) : ( -
- {posts.map(({ id, post }) => ( - - ))} + > + {loadingPosts ? ( + + ) : ( +
+ {posts.map(({ id, post }) => ( + + ))} +
+ )} +
+ ) : ( + <> )} -
-
+ + + + + + + + + + + +

+ Page not found: 404 +

+ + + Upload diff --git a/src/components/Post.jsx b/src/components/Post.jsx index 931f9ba3a..5c102d46e 100644 --- a/src/components/Post.jsx +++ b/src/components/Post.jsx @@ -198,7 +198,7 @@ function Post(prop) { return (
setAnchorEl(event.currentTarget)} + sx={{ + color: "var(--color)", + }} > @@ -331,12 +334,14 @@ function Post(prop) { startIcon={} sx={{ backgroundColor: "rgba( 135, 206, 235, 0.2)", - margin: "12px 0", + margin: "12px 8px", fontSize: "12px", + fontWeight: "bold", }} > View All comments + + {user && (
@@ -412,12 +418,22 @@ function Post(prop) { placeholder="Add a comment..." value={comment} onChange={(e) => setComment(e.target.value)} + style={{ + backgroundColor: "var(--bg-color)", + color: "var(--color)", + borderRadius: "22px", + marginTop: "4px", + }} /> @@ -457,12 +473,22 @@ function Post(prop) { placeholder="Add a comment..." value={comment} onChange={(e) => setComment(e.target.value)} + style={{ + backgroundColor: "var(--bg-color)", + color: "var(--color)", + borderRadius: "22px", + margin: "4px 0px", + }} /> diff --git a/src/index.css b/src/index.css index 73e48d8ef..014409852 100644 --- a/src/index.css +++ b/src/index.css @@ -4,7 +4,7 @@ /* App styles */ .app { - background-color: rgb(145, 237, 203); + /* background-color: var(--bg-color); */ justify-content: center; align-items: center; overflow-x: auto; @@ -19,10 +19,9 @@ position: sticky; top: 0; z-index: 1; - background-color: rgb(145, 237, 203); padding: 10px; object-fit: contain; - border-bottom: 1px solid rgba(0, 0, 0, 0.373); + border-bottom: 1px solid var(--color); display: flex; justify-content: space-between; align-items: center; diff --git a/src/main.jsx b/src/main.jsx index 302900a7c..2011f6cbe 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,6 +4,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles"; import { SnackbarProvider, useSnackbar } from "notistack"; import React from "react"; import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; import App from "./App"; import "./index.css"; import LandingAnimation from "./components/LandingAnimation"; @@ -36,7 +37,9 @@ ReactDOM.createRoot(document.getElementById("root")).render( ); }} > - + + + diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx new file mode 100644 index 000000000..5cecacb18 --- /dev/null +++ b/src/pages/Login.jsx @@ -0,0 +1,147 @@ +import React, { useState, useEffect } from "react"; +import { getModalStyle, useStyles } from "../App"; +import { Input } from "@mui/material"; +import AnimatedButton from "../components/AnimatedButton"; +import { auth, googleProvider, facebookProvider } from "../lib/firebase"; +import { useSnackbar } from "notistack"; +import { useHistory } from "react-router-dom"; + +const LoginScreen = () => { + const classes = useStyles(); + + const [email, setEmail] = useState(""); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [user, setUser] = useState(null); + + const buttonStyle = { + background: "linear-gradient(40deg, #e107c1, #59afc7)", + borderRadius: "20px", + ":hover": { + background: "linear-gradient(-40deg, #59afc7, #e107c1)", + }, + }; + + const { enqueueSnackbar } = useSnackbar(); + const history = useHistory(); + + const signIn = (e) => { + e.preventDefault(); + auth + .signInWithEmailAndPassword(email, password) + .then(() => { + enqueueSnackbar("Login successful!", { + variant: "success", + }); + // history.push('/dummygram/'); + }) + .catch((error) => + enqueueSnackbar(error.message, { + variant: "error", + }) + ) + .finally(() => {}); + }; + + const signInWithGoogle = (e) => { + e.preventDefault(); + auth + .signInWithPopup(googleProvider) + .then(() => { + enqueueSnackbar("Login successful!", { + variant: "success", + }); + }) + .catch((error) => + enqueueSnackbar(error.message, { + variant: "error", + }) + ) + .finally(() => {}); + }; + + const signInWithFacebook = (e) => { + e.preventDefault(); + auth + .signInWithPopup(facebookProvider) + .then(() => { + enqueueSnackbar("Login successful!", { + variant: "success", + }); + }) + .catch((error) => + enqueueSnackbar(error.message, { + variant: "error", + }) + ) + .finally(() => {}); + }; + + return ( +
+
+ + dummygram + setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + + Sign In + + + Sign In With Google + + + Sign In With Facebook + + +
+
+ ); +}; + +export default LoginScreen; diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx new file mode 100644 index 000000000..b897d4322 --- /dev/null +++ b/src/pages/Signup.jsx @@ -0,0 +1,187 @@ +import React, { useState, useEffect } from "react"; +import { getModalStyle, useStyles } from "../App"; +import { Input } from "@mui/material"; +import AnimatedButton from "../components/AnimatedButton"; +import { + auth, + storage, + googleProvider, + facebookProvider, +} from "../lib/firebase"; +import { useSnackbar } from "notistack"; + +const SignupScreen = () => { + const classes = useStyles(); + + const [modalStyle] = useState(getModalStyle); + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [signingUp, setSigningUp] = useState(false); + + const [image, setImage] = useState(null); + const [address, setAddress] = useState(null); + + const buttonStyle = { + background: "linear-gradient(40deg, #e107c1, #59afc7)", + borderRadius: "20px", + ":hover": { + background: "linear-gradient(-40deg, #59afc7, #e107c1)", + }, + }; + + const { enqueueSnackbar } = useSnackbar(); + + const handleChange = (e) => { + if (e.target.files[0]) { + setImage(e.target.files[0]); + setAddress(e.target.value); + } + }; + + const signUp = (e) => { + e.preventDefault(); + setSigningUp(true); + auth + .createUserWithEmailAndPassword(email, password) + .then((authUser) => { + const uploadTask = storage.ref(`images/${image.name}`).put(image); + uploadTask.on( + "state_changed", + () => { + // // progress function ... + // setProgress(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100)); + }, + (error) => { + // error function ... + + enqueueSnackbar(error.message, { + variant: "error", + }); + }, + () => { + // complete function ... + storage + .ref("images") + .child(image.name) + .getDownloadURL() + .then((url) => { + authUser.user.updateProfile({ + displayName: username, + photoURL: url, + }); + enqueueSnackbar("Signup Successful!", { + variant: "success", + }); + }); + } + ); + window.location.href = "/dummygram/"; + }) + // .then(() => { + + // }) + .catch((error) => + enqueueSnackbar(error.message, { + variant: "error", + }) + ) + .finally(() => { + setSigningUp(false); + }); + }; + + return ( +
+
+
+ instagram +
+ {address ? ( + profile pic + ) : ( +
PROFILE PICTURE
+ )} +
+ setUsername(e.target.value)} + /> + setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> +
+ + +
+ + Sign Up + +
+
+
+ ); +}; + +export default SignupScreen; diff --git a/src/reusableComponents/DialogBox.jsx b/src/reusableComponents/DialogBox.jsx index d5e6a10ca..516949823 100644 --- a/src/reusableComponents/DialogBox.jsx +++ b/src/reusableComponents/DialogBox.jsx @@ -20,13 +20,30 @@ const DialogBox = (props) => { onClose={props.onClose} aria-labelledby="responsive-dialog-title" > - {props.title} + + {props.title} + + - + + {props.children} - - + + + ); diff --git a/src/script.js b/src/script.js index 3a6409616..5d3be2c71 100644 --- a/src/script.js +++ b/src/script.js @@ -3,10 +3,10 @@ const options = { right: "32px", // default: '32px' left: "unset", // default: 'unset' time: "0.3s", // default: '0.3s' - mixColor: "#fff", // default: '#fff' - backgroundColor: "#fff", // default: '#fff' - buttonColorDark: "#100f2c", // default: '#100f2c' - buttonColorLight: "#fff", // default: '#fff' + // mixxColor: "#fff", // default: '#fff' + // backgroundColor: "#fff", // default: '#fff' + // buttonColorDark: "#100f2c", // default: '#100f2c' + // buttonColorLight: "#fff", // default: '#fff' saveInCookies: true, // default: true, label: "🌓", // default: '' autoMatchOsTheme: true, // default: true @@ -22,9 +22,19 @@ document .querySelector("button.darkmode-toggle") .addEventListener("click", function () { if (document.body.classList.contains("darkmode--activated")) { + document.getElementsByClassName("app__header__img").item(0).style.filter = + "invert(100%)"; + document.body.style.setProperty("--color", "white"); + document.body.style.setProperty("--bg-color", "black"); + window.document.body.style.setProperty("--val", 1); document.getElementById("scrollbar_style").innerHTML = "body::-webkit-scrollbar { width: 10px; } /* Track */ body::-webkit-scrollbar-track { background: black; } /* Handle */ body::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #f4f80c, #addb51, #a2b43a, #51c135, #5ce130, #1dfddf ); border-radius: 10px; }"; } else { + document.getElementsByClassName("app__header__img").item(0).style.filter = + "invert(0%)"; + document.body.style.setProperty("--color", "black"); + document.body.style.setProperty("--bg-color", "white"); + window.document.body.style.setProperty("--val", 0); document.getElementById("scrollbar_style").innerHTML = "body::-webkit-scrollbar { width: 10px; } /* Track */ body::-webkit-scrollbar-track { background: white; } /* Handle */ body::-webkit-scrollbar-thumb { background: linear-gradient( 45deg, #405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d ); border-radius: 10px; }"; }