v1.0.4 - Unified theme system and consistent color definitions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmespath-playground",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React-based web application for testing JMESPath expressions against JSON data",
   "main": "index.js",
   "scripts": {

src/App.css

@@ -486,100 +486,119 @@ footer a:hover {
 
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
-  body {
+  body:not(.theme-light):not(.theme-dark) {
-    background-color: #1a1a1a;
+    background-color: var(--bg-primary-dark);
-    color: #e9ecef;
-  }
-
-  .header-section {
-    background-color: #2d2d2d;
-    border-bottom: 1px solid #404040;
-  }
-
-  .card {
-    background-color: #2d2d2d;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-    color: #e9ecef;
-  }
-
-  .card-header {
-    background-color: #3a3a3a;
-    border-bottom: 2px solid #505050;
-    color: #f8f9fa;
-  }
-
-  .jmespath-input {
-    background-color: #3a3a3a;
-    border: 1px solid #505050;
-    color: #f8f9fa;
-  }
-
-  .jmespath-input::placeholder {
-    color: #adb5bd;
-  }
-
-  .jmespath-input:focus {
-    background-color: #404040;
-    border-color: #007bff;
-    color: #ffffff;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-
-  .json-input, .result-output {
-    background-color: #2a2a2a;
-    border: 1px solid #505050;
-    color: #e9ecef;
-  }
-
-  .json-input::placeholder, .result-output::placeholder {
-    color: #6c757d;
-  }
-
-  .json-input:focus, .result-output:focus {
-    background-color: #323232;
-    border-color: #007bff;
-    color: #ffffff;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-
-  .alert-danger {
-    background-color: #3d1a1a;
-    border-color: #dc3545;
-    color: #f8d7da;
-  }
-
-  .text-muted {
-    color: #adb5bd !important;
-  }
-
-  footer {
-    background-color: var(--bg-secondary-dark) !important;
-    border-top: 1px solid #404040 !important;
     color: var(--text-secondary-dark);
   }
 
-  footer .text-muted {
+  body:not(.theme-light):not(.theme-dark) .header-section {
-    color: var(--text-muted-dark) !important;
+    background-color: var(--bg-secondary-dark);
+    border-bottom: 1px solid var(--border-dark);
   }
 
-  footer a {
+  body:not(.theme-light):not(.theme-dark) .card {
+    background-color: var(--bg-secondary-dark);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    color: var(--text-secondary-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .card-header {
+    background-color: var(--bg-card-dark);
+    border-bottom: 2px solid var(--border-dark);
+    color: var(--text-primary-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .jmespath-input {
+    background-color: var(--bg-card-dark) !important;
+    border: 1px solid var(--border-input-dark) !important;
+    color: var(--text-primary-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) .jmespath-input.success {
+    background-color: var(--success-bg-dark) !important;
+    border-color: var(--success-border-dark) !important;
+    color: var(--success-text-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) .jmespath-input.error {
+    background-color: var(--error-bg-dark) !important;
+    border-color: var(--error-border-dark) !important;
+    color: var(--error-text-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) .jmespath-input::placeholder {
     color: var(--text-muted-dark);
   }
 
-  footer a:hover {
+  body:not(.theme-light):not(.theme-dark) .jmespath-input:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 0.2rem var(--accent-shadow);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .json-input, 
+  body:not(.theme-light):not(.theme-dark) .result-output {
+    background-color: #2a2a2a;
+    border: 1px solid var(--border-input-dark);
     color: var(--text-secondary-dark);
   }
 
-  /* Bootstrap dark mode overrides */
+  body:not(.theme-light):not(.theme-dark) .json-input::placeholder, 
-  .btn-outline-success {
+  body:not(.theme-light):not(.theme-dark) .result-output::placeholder {
-    color: #28a745;
+    color: var(--text-muted-dark);
-    border-color: #28a745;
   }
 
-  .btn-outline-success:hover {
+  body:not(.theme-light):not(.theme-dark) .json-input:focus, 
-    background-color: #28a745;
+  body:not(.theme-light):not(.theme-dark) .result-output:focus {
-    border-color: #28a745;
+    background-color: #323232;
-    color: #fff;
+    border-color: var(--accent-color);
+    color: var(--text-primary-dark);
+    box-shadow: 0 0 0 0.2rem var(--accent-shadow);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .alert-danger {
+    background-color: var(--error-bg-dark);
+    border-color: var(--error-border-dark);
+    color: var(--error-text-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .alert-success {
+    background-color: var(--success-bg-dark);
+    border-color: var(--success-border-dark);
+    color: var(--success-text-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .text-muted {
+    color: var(--text-muted-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) footer.bg-light {
+    background-color: var(--bg-secondary-dark) !important;
+    border-top: 1px solid var(--border-dark) !important;
+    color: var(--text-secondary-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) footer .text-muted {
+    color: var(--text-muted-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) footer a {
+    color: var(--text-muted-dark) !important;
+  }
+
+  body:not(.theme-light):not(.theme-dark) footer a:hover {
+    color: var(--text-secondary-dark) !important;
+  }
+
+  /* Bootstrap dark mode overrides */
+  body:not(.theme-light):not(.theme-dark) .btn-outline-success {
+    color: var(--btn-success);
+    border-color: var(--btn-success);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .btn-outline-success:hover {
+    background-color: var(--btn-success);
+    border-color: var(--btn-success);
+    color: var(--bg-primary-light);
   }
 
   .btn-outline-info {

src/App.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import jmespath from 'jmespath';
+import packageJson from '../package.json';
 import './App.css';
 
 // JMESPath Testing Tool - Main Application Component
@@ -388,7 +389,7 @@ function App() {
           <div className="row">
             <div className="col-md-6">
               <p className="mb-0 text-muted small">
-                <strong>JMESPath Testing Tool</strong> - Created for testing and validating JMESPath expressions
+                <strong>JMESPath Testing Tool</strong> v{packageJson.version} - Created for testing and validating JMESPath expressions
               </p>
             </div>
             <div className="col-md-6 text-md-end">