changes of dark mode in success stories section

Avdhesh-Varshney · Nov 6, 2024 · cfc5f92 · cfc5f92
1 parent d01c959
commit cfc5f92
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/css/SuccessStories.css b/src/css/SuccessStories.css
@@ -1,19 +1,30 @@
+/* Dark mode colors */
+body.dark {
+    --background-color: #2c2a2a;
+    --text-color: #000000;
+    --card-background: #3a3a3a;
+    --heading-color: #363636;
+    --button-background: #3d8b3d;
+    --button-hover: #317532;
+    transition: background-color 0.25s, color 0.25s;
+  }
 .story-container {
     max-width: 800px;
     margin: auto;
     padding: 20px;
-    background: #f5f5f5;
+    background-color: var(--background-color);
+    color: var(--text-color);
     border-radius: 8px;
 }
 
 h1, h2 {
     text-align: center;
-    color: #333;
+    color: var(--heading-color);
     margin-bottom: 80px; /* Add space below each heading */
     margin-top: 80px; /* Add space above each heading */
 }
-.story-form h2{
-    color: rgb(57, 57, 57);
+.story-form h3{
+    text-align: center;
 }
 .story-form {
     margin-bottom: 30px;
@@ -49,15 +60,16 @@ button:hover {
 }
 
 .story {
+    background-color: var(--card-background);
     flex: 1 1 calc(50% - 20px);
-    background: #f0f0f0;
+    color: var(--text-color);
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .story h3 {
-    color: #333;
+    color: var(--heading-color);
     margin: 0 0 10px;
 }
 

diff --git a/src/pages/SuccessStories.jsx b/src/pages/SuccessStories.jsx
@@ -44,7 +44,7 @@ const SuccessStories = () => {
         <div className="container">
             <h1>Success Stories and Inspiration Board</h1>
             <div className="story-form">
-                <h2>Share Your Story!</h2>
+                <h3>Share Your Story!</h3>
                 <input 
                     type="text" 
                     placeholder="Your Name"