fixcss de la page Vonlontaire

src/components/Background/Background.tsx

@@ -29,7 +29,9 @@ const Background = ({ children, className }: BackgroundProps) => {
 
     useEffect(() => {
         const updateTheme = () => {
-            setTheme(localStorage.getItem("theme") || "light");
+            const t = localStorage.getItem("theme") || "light";
+            setTheme(t);
+            document.body.classList.toggle("dark", t === "dark");
         };
 
         updateTheme();

src/index.css

@@ -25,6 +25,38 @@ html {
     inset 0 1px 0 rgba(255, 255, 255, 0.3),
     inset 0 -1px 0 rgba(255, 255, 255, 0.05),
     inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
+
+    --glass-border-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+    --glass-border-back: rgba(255, 255, 255, 0.25);
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    width:100%;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+body.dark {
+    --glass-back: rgba(160, 160, 160, 0.54);
+    --glass-border: rgba(160, 160, 160, 0.2);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(160, 160, 160, 0.3),
+    inset 0 -1px 0 rgba(160, 160, 160, 0.05),
+    inset 0 0 8px 4px rgba(160, 160, 160, 0.2);
+
+    --glass-border-shadow:
+            inset 1.25px 1.25px 1px rgba(180, 180, 180, 0.6),
+            inset -1.25px -1.25px 1px rgba(180, 180, 180, 0.6),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.4),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.4);
+    --glass-border-back: rgba(160, 160, 160, 0.25);
 }
 
 .content {
@@ -43,24 +75,6 @@ a {
   text-decoration: inherit;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  width:100%;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-body.dark {
-    --glass-back: rgba(191, 191, 191, 0.54);
-    --glass-border: rgba(191, 191, 191, 0.2);
-    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(191, 191, 191, 0.3),
-    inset 0 -1px 0 rgba(191, 191, 191, 0.05),
-    inset 0 0 8px 4px rgba(191, 191, 191, 0.2);
-}
-
 .glassCard {
     padding: 10px 20px 10px 20px;
     background: var(--glass-back);
@@ -75,12 +89,8 @@ body.dark {
     padding: 10px 20px 10px 20px;
     border-radius: 20px;
     border: none;
-    background: rgb(255, 255, 255, 0.25);
+    background: var(--glass-border-back);
-    box-shadow:
+    box-shadow: var(--glass-border-shadow);
-            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
-            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
-            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
 }
 
 h1 {