From 483e281acdf0faec7c21cc356f5029e8165a0f75 Mon Sep 17 00:00:00 2001
From: ORDONNEAU Antoine <antoine.ordonneau@etu.univ-lyon1.fr>
Date: Wed, 1 Apr 2026 18:17:59 +0200
Subject: [PATCH] fixcss de la page Vonlontaire

---
 src/components/Background/Background.tsx |  4 +-
 src/index.css                            | 58 ++++++++++++++----------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/components/Background/Background.tsx b/src/components/Background/Background.tsx
index a578004..36c2879 100644
--- a/src/components/Background/Background.tsx
+++ b/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();
diff --git a/src/index.css b/src/index.css
index 35d63d6..24e3ba1 100644
--- a/src/index.css
+++ b/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);
-    box-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);
+    background: var(--glass-border-back);
+    box-shadow: var(--glass-border-shadow);
 }
 
 h1 {