dark theme

Author: kerv14

src/components/CallToAction/styles.module.css

@@ -18,7 +18,7 @@
 }
 
 .card {
-  background-color: rgba(154, 192, 241, 0.4); /* Made more transparent */
+  background-color: rgba(154, 192, 241, 0.4);
   border-radius: 16px;
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
   height: 100%;
@@ -89,3 +89,26 @@
   color: #4285f4;
   font-weight: bold;
 }
+
+/* Dark theme styles */
+[data-theme='dark'] .section {
+  background-color: #1a1a2e;
+}
+
+[data-theme='dark'] .card {
+  background-color: rgba(66, 133, 244, 0.15);
+  color: #ffffff;
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .card:hover {
+  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='dark'] .header {
+  color: #ffffff;
+}
+
+[data-theme='dark'] .tickList li::before {
+  color: #5c9eff;
+}

src/components/Demos/styles.module.css

@@ -286,4 +286,45 @@ button:active {
     display: block;
   }
 }
-  
+
+/* Dark theme styles */
+[data-theme='dark'] .requestContainer {
+  background-color: #2d2d3a;
+  border-color: #444;
+}
+
+[data-theme='dark'] .httpMethod {
+  background-color: #1e3a46;
+}
+
+[data-theme='dark'] .postcodeInput {
+  color: #e0e0e0;
+}
+
+[data-theme='dark'] .payloadContainer {
+  border-color: #444;
+}
+
+[data-theme='dark'] .payloadHeader {
+  background-color: #2d2d3a;
+  border-color: #444;
+}
+
+[data-theme='dark'] .jsonEditor {
+  background-color: #1e1e2e;
+  color: #e0e0e0;
+}
+
+[data-theme='dark'] .mobileDivider {
+  background-color: #444;
+}
+
+[data-theme='dark'] .viewResultsButton {
+  background-color: #2d2d3a;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+
+[data-theme='dark'] .viewResultsButton:hover {
+  background-color: #3a3a4a;
+}