Merge pull request #379 from FlutterFlow/michael/fix/dark-mode-pricing

🌜 Add dark mode support for pricing table

Author: michael-mcroskey

static/css/table_style.css

@@ -16,6 +16,16 @@
   font-size: 14px;
 }
 
+/* Light mode hint color */
+[data-theme='light'] .mobile-scroll-hint {
+  color: #666;
+}
+
+/* Dark mode hint color */
+[data-theme='dark'] .mobile-scroll-hint {
+  color: #a0a0a0;
+}
+
 /* Simplified pricing table styles */
 .simplified-pricing-table {
   width: 100%;
@@ -35,11 +45,35 @@
   vertical-align: top;
 }
 
+/* Light mode table borders */
+[data-theme='light'] .simplified-pricing-table th,
+[data-theme='light'] .simplified-pricing-table td {
+  border-bottom: 1px solid #ebeaf0;
+}
+
+/* Dark mode table borders */
+[data-theme='dark'] .simplified-pricing-table th,
+[data-theme='dark'] .simplified-pricing-table td {
+  border-bottom: 1px solid #404040;
+}
+
 .simplified-pricing-table th {
   background-color: #f5f5f5;
   font-weight: 600;
 }
 
+/* Light mode header background */
+[data-theme='light'] .simplified-pricing-table th {
+  background-color: #f5f5f5;
+  color: #000;
+}
+
+/* Dark mode header background */
+[data-theme='dark'] .simplified-pricing-table th {
+  background-color: #2a2a2a;
+  color: #ffffff;
+}
+
 .whats-changing-col {
   width: 50%;
 }
@@ -49,6 +83,18 @@
   font-weight: 600;
 }
 
+/* Light mode section header */
+[data-theme='light'] .section-header {
+  background-color: #e8e8ff !important;
+  color: #000;
+}
+
+/* Dark mode section header */
+[data-theme='dark'] .section-header {
+  background-color: #3a3a5c !important;
+  color: #ffffff;
+}
+
 .section-header td {
   padding: 0.75rem 1rem;
   text-align: left;
@@ -58,6 +104,18 @@
   background-color: #ffffff;
 }
 
+/* Light mode row background */
+[data-theme='light'] .simplified-pricing-table tbody tr:not(.section-header) {
+  background-color: #ffffff;
+  color: #000;
+}
+
+/* Dark mode row background */
+[data-theme='dark'] .simplified-pricing-table tbody tr:not(.section-header) {
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+
 .feature-list {
   padding-left: 1.5rem;
   margin: 0;
@@ -80,6 +138,11 @@
   display: inline-block;
 }
 
+/* Dark mode price up color (slightly lighter red for better contrast) */
+[data-theme='dark'] .price-up {
+  color: #ff6b6b;
+}
+
 .price-down {
   color: #2b8a3e;
   font-weight: bold;
@@ -88,6 +151,11 @@
   display: inline-block;
 }
 
+/* Dark mode price down color (slightly lighter green for better contrast) */
+[data-theme='dark'] .price-down {
+  color: #51cf66;
+}
+
 @media (max-width: 768px) {
   .pricing-table-container {
     margin: 0 -20px;