fix css issues

Author: yashovardhan

src/components/Button/button.module.scss

@@ -1,23 +1,23 @@
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   --button-primary-background-color: #1098fc;
   --button-secondary-background-color: transparent;
   --button-background-color: #1098fc;
   --button-color: #141618;
   --button-hover-background-color: #036ab5;
   --button-hover-shadow: 0px 2px 8px 0px rgba(16, 152, 252, 0.4);
   --button-active-background-color: #3baafd;
-  --button-danger: #e88f97
+  --button-danger: #e88f97;
 }
 
-:root[data-theme="light"] {
+:root[data-theme='light'] {
   --button-primary-background-color: #0376c9;
   --button-secondary-background-color: transparent;
   --button-background-color: #0376c9;
   --button-color: #ffffff;
   --button-hover-background-color: #036ab5;
   --button-hover-shadow: 0px 2px 8px 0px rgba(3, 118, 201, 0.2);
   --button-active-background-color: #025ea1;
-  --button-danger: #D73847
+  --button-danger: #d73847;
 }
 
 :root {
@@ -50,7 +50,7 @@ a.button {
   justify-content: center;
   align-items: center;
   min-width: 145px;
-  transition-property: "box-shadow", "background-color";
+  transition-property: 'box-shadow', 'background-color';
   transition-duration: 0.2s;
   transition-timing-function: ease;
 
@@ -61,12 +61,18 @@ a.button {
     --button-hover-background-color: #26a2fc;
   }
 
+  /* Dark mode: Ensure primary buttons use proper dark theme colors */
+  [data-theme='dark'] &.primary {
+    background-color: var(--button-primary-background-color);
+    color: var(--button-color);
+  }
+
   &.secondary {
     border: 1px solid rgba(3, 118, 201, 1);
     --button-color: rgba(3, 118, 201, 1);
     background-color: var(--button-secondary-background-color);
     &:hover {
-      --button-color: #141618
+      --button-color: #141618;
     }
   }
 

src/pages/playground/styles.module.css

@@ -253,6 +253,11 @@
   background-color: var(--ifm-color-primary-light);
 }
 
+/* Dark mode: Better visibility for checked switches */
+[data-theme='dark'] .switch input:checked+.slider {
+  background-color: var(--ifm-color-primary);
+}
+
 .switch input:checked+.slider:before {
   background-color: var(--ifm-color-white);
 }
@@ -454,6 +459,14 @@ input:checked+.slider:before {
   color: var(--ifm-background-surface-color);
 }
 
+/* Dark mode: Better contrast for preview buttons */
+[data-theme='dark'] .previewButton,
+[data-theme='dark'] .previewButton2 {
+  background: var(--ifm-color-primary-dark);
+  border: 1px solid var(--ifm-color-primary-dark);
+  color: white;
+}
+
 .previewButton:hover,
 .previewButton2:hover {
   background: var(--ifm-color-primary-light);
@@ -462,6 +475,14 @@ input:checked+.slider:before {
   transform: translateY(-1px);
 }
 
+/* Dark mode: Better contrast for preview button hover */
+[data-theme='dark'] .previewButton:hover,
+[data-theme='dark'] .previewButton2:hover {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+  color: white;
+}
+
 .hideButton {
   display: flex;
   flex-direction: row;
@@ -625,8 +646,20 @@ input:checked+.slider:before {
   color: white;
 }
 
+/* Dark mode: Ensure good contrast for active step numbers */
+[data-theme='dark'] .stepMenuItemActive .stepMenuNumber {
+  background: var(--ifm-color-primary-dark);
+  color: white;
+}
+
 .stepMenuItemCompleted .stepMenuNumber {
   background: var(--ifm-color-success);
+  color: black;
+}
+
+/* Dark mode: Use darker success color for better visibility with black text */
+[data-theme='dark'] .stepMenuItemCompleted .stepMenuNumber {
+  background: var(--consumer-green-dark);
   color: white;
 }
 
@@ -720,6 +753,12 @@ input:checked+.slider:before {
 
 .previousStep .stepProgressIndicator {
   background: var(--ifm-color-success);
+  color: black;
+}
+
+/* Dark mode: Use darker success color for better contrast with white text */
+[data-theme='dark'] .previousStep .stepProgressIndicator {
+  background: var(--consumer-green-dark);
   color: white;
 }
 
@@ -816,6 +855,12 @@ input:checked+.slider:before {
   letter-spacing: 0.5px;
 }
 
+/* Dark mode: Use darker background for better contrast with white text */
+[data-theme='dark'] .stepProgressIndicator {
+  background: var(--ifm-color-primary-dark);
+  color: white;
+}
+
 
 
 /* Step Separator */
@@ -851,6 +896,12 @@ input:checked+.slider:before {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
+/* Dark mode: Better contrast for completion indicator */
+[data-theme='dark'] .completionIndicator {
+  background: linear-gradient(135deg, var(--consumer-green-dark) 0%, var(--institution-green-dark) 100%);
+  color: white;
+}
+
 /* Smooth transition animations */
 @keyframes fadeIn {
   from {