update: backgroundAnimation opacity

MichaelTeida · Jan 27, 2024 · d6d55a5 · d6d55a5
1 parent 3d061d4
commit d6d55a5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/BackgroundAnimation.jsx b/src/components/BackgroundAnimation.jsx
@@ -1,9 +1,17 @@
-import {Box} from "@mui/joy";
+import {Box, useColorScheme} from "@mui/joy";
 import '../styles/backgroundAnimation.scss'
+import {useEffect, useState} from "react";
 
 function BackgroundAnimation() {
+    const {mode} = useColorScheme();
+    const [opacity, setOpacity] = useState("10%")
+
+    useEffect(() => {
+        mode === 'light' ? setOpacity("20%") : setOpacity("40%")
+    },[mode])
+
     return (
-            <Box className="background">
+            <Box sx={{opacity: opacity}} className="background">
                 <Box component="span"></Box>
                 <Box component="span"></Box>
                 <Box component="span"></Box>

diff --git a/src/styles/backgroundAnimation.scss b/src/styles/backgroundAnimation.scss
@@ -24,7 +24,6 @@
   animation-duration: 30;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
-  opacity: 40%;
 }