v1.0.4 - Unified theme system and consistent color definitions

v1.0.3: Fix expression textbox error state and UI consistency
- Fixed theme class application from html to body element for proper CSS inheritance - Removed CSS conflicts between base styles and error/success states - Fixed focus state interference with error/success background colors - Changed error message panel to fixed placement (no more UI jumping) - Added theme-consistent styling for alert-success in all theme modes - Expression textbox now properly shows red/green backgrounds in manual themes - Status message now shows Expression is correct vs error message consistently
2026-01-21 11:11:23 +01:00 · 2026-01-21 10:35:34 +01:00 · 2026-01-21 10:09:52 +01:00 · 2026-01-21 09:45:38 +01:00 · 2026-01-18 16:47:59 +01:00 · 2026-01-18 16:13:00 +01:00
8 changed files with 701 additions and 102 deletions
--- a/11
+++ b/11
@@ -7,8 +7,8 @@ WORKDIR /app
 # Copy package files
 COPY package*.json ./

-# Install dependencies
-RUN npm ci --only=production
+# Install dependencies (including serve for production)
+RUN npm ci

 # Copy application source
 COPY . .
@@ -16,8 +16,11 @@ COPY . .
 # Build the application
 RUN npm run build

+# Install serve globally for production serving
+RUN npm install -g serve
+
 # Expose port 3000
 EXPOSE 3000

-# Start the application
-CMD ["npm", "run", "serve"]
+# Start the application using serve directly
+CMD ["serve", "-s", "build", "-l", "3000"]
--- a/compose.yaml
+++ b/compose.yaml
@@ -0,0 +1,9 @@
+services:
+  jmespath-playground:
+    build: .
+    image: skoszewski/jmespath-playground
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,25 +0,0 @@
-version: '3.8'
-
-services:
-  jmespath-playground:
-    build: .
-    ports:
-      - "3000:3000"
-    environment:
-      - NODE_ENV=production
-    restart: unless-stopped
-    
-  # Development service
-  jmespath-playground-dev:
-    build:
-      context: .
-      dockerfile: Dockerfile.dev
-    ports:
-      - "3001:3000"
-    volumes:
-      - .:/app
-      - /app/node_modules
-    environment:
-      - CHOKIDAR_USEPOLLING=true
-    profiles:
-      - dev
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "^5.0.1",
-        "serve": "^14.2.1",
+        "serve": "^14.2.5",
        "web-vitals": "^3.5.0"
      },
      "engines": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jmespath-playground",
-  "version": "1.0.0",
+  "version": "1.0.4",
  "description": "A React-based web application for testing JMESPath expressions against JSON data",
  "main": "index.js",
  "scripts": {
@@ -22,7 +22,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
-    "serve": "^14.2.1",
+    "serve": "^14.2.5",
    "web-vitals": "^3.5.0"
  },
  "eslintConfig": {
@@ -52,4 +52,4 @@
  ],
  "author": "",
  "license": "MIT"
-}
+}
--- a/src/App.css
+++ b/src/App.css
@@ -1,12 +1,64 @@
 /* JMESPath Testing Tool Custom Styles */

+:root {
+  /* Light theme colors */
+  --bg-primary-light: #ffffff;
+  --bg-secondary-light: #f8f9fa;
+  --text-primary-light: #212529;
+  --text-secondary-light: #495057;
+  --text-muted-light: #6c757d;
+  --border-light: #dee2e6;
+  --border-input-light: #ced4da;
+  --accent-color: #007bff;
+  --accent-shadow: rgba(0, 123, 255, 0.25);
+  
+  /* Dark theme colors */
+  --bg-primary-dark: #1a1a1a;
+  --bg-secondary-dark: #2d2d2d;
+  --bg-card-dark: #323232;
+  --text-primary-dark: #ffffff;
+  --text-secondary-dark: #e9ecef;
+  --text-muted-dark: #adb5bd;
+  --border-dark: #495057;
+  --border-input-dark: #6c757d;
+  
+  /* State colors */
+  --success-bg-light: #d4edda;
+  --success-border-light: #c3e6cb;
+  --success-text-light: #155724;
+  --success-bg-dark: #1e4a1e;
+  --success-border-dark: #2c6d2c;
+  --success-text-dark: #d4edda;
+  
+  --error-bg-light: #f8d7da;
+  --error-border-light: #f5c6cb;
+  --error-text-light: #721c24;
+  --error-bg-dark: #4a1e1e;
+  --error-border-dark: #6d2c2c;
+  --error-text-dark: #f8d7da;
+  
+  /* Button variants */
+  --btn-success: #28a745;
+  --btn-info: #17a2b8;
+  --btn-primary: #007bff;
+  --btn-danger: #dc3545;
+  --btn-secondary: #6c757d;
+  
+  /* Common transitions */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  
+  /* Font families */
+  --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
+}
+
 /* Base font family */
 body {
-  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  transition: background-color var(--transition-normal), color var(--transition-normal);
 }

 /* Layout structure */
@@ -17,6 +69,7 @@ body {
 /* Header section styling - more compact */
 .header-section {
  /* Removed gradient background to fix text visibility */
+  transition: background-color 0.3s ease;
 }

 /* Custom card styling */
@@ -24,44 +77,43 @@ body {
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }

 .card-header {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
+  color: #212529;
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }

 /* Input and textarea styling */
+.jmespath-input, .json-input, .result-output {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
+}
+
 .jmespath-input {
-  font-family: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  padding: 10px;
-  font-weight: 400;
+  background-color: var(--bg-primary-light);
+  border: 1px solid var(--border-input-light);
+  color: var(--text-secondary-light);
 }

 .json-input, .result-output {
-  font-family: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
-  background-color: #f8f9fa;
-  border: 1px solid #dee2e6;
-  font-weight: 400;
+  background-color: var(--bg-secondary-light);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary-light);
  line-height: 1.4;
 }

-.json-input.error {
-  border-color: #dc3545;
-  background-color: #fff5f5;
-}
-
-.result-output.success {
-  border-color: #28a745;
-  background-color: #f0fff4;
-}
-
 /* Button styling */
 .btn {
-  transition: all 0.2s ease;
+  transition: all var(--transition-fast);
 }

 .btn:hover {
@@ -74,12 +126,12 @@ footer {
 }

 footer a {
-  color: #6c757d;
-  transition: color 0.2s ease;
+  color: var(--text-muted-light);
+  transition: color var(--transition-fast);
 }

 footer a:hover {
-  color: #495057;
+  color: var(--text-secondary-light);
 }

 /* Responsive adjustments */
@@ -104,4 +156,492 @@ footer a:hover {
  .card-body textarea {
    min-height: 300px !important;
  }
+}
+
+/* Manual theme overrides */
+.theme-light {
+  /* Force light theme regardless of system preference */
+  background-color: #ffffff !important;
+  color: #212529 !important;
+}
+
+.theme-light .header-section {
+  background-color: transparent !important;
+  border-bottom: none !important;
+}
+
+.theme-light .card {
+  background-color: #ffffff !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+  color: #212529 !important;
+}
+
+.theme-light .card-header {
+  background-color: #f8f9fa !important;
+  border-bottom: 2px solid #dee2e6 !important;
+  color: #212529 !important;
+}
+
+.theme-light .jmespath-input {
+  background-color: #ffffff;
+  border: 1px solid #ced4da;
+  color: #495057;
+}
+
+.theme-light .json-input, 
+.theme-light .result-output {
+  background-color: #f8f9fa !important;
+  border: 1px solid #dee2e6 !important;
+  color: #495057 !important;
+}
+
+/* Success and Error state overrides - must come after base input rules */
+.theme-light .jmespath-input.success {
+  background-color: #d4edda !important;
+  border-color: #c3e6cb !important;
+  color: #155724 !important;
+}
+
+.theme-light .jmespath-input.error {
+  background-color: #f8d7da !important;
+  border-color: #f5c6cb !important;
+  color: #721c24 !important;
+}
+
+.theme-light .text-muted {
+  color: #6c757d !important;
+}
+
+.theme-light .jmespath-input:focus {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 0.2rem var(--accent-shadow);
+}
+
+.theme-light .jmespath-input::placeholder {
+  color: var(--text-muted-light) !important;
+}
+
+.theme-light .json-input::placeholder, 
+.theme-light .result-output::placeholder {
+  color: var(--text-muted-light) !important;
+}
+
+.theme-light .json-input:focus, 
+.theme-light .result-output:focus {
+  background-color: var(--bg-primary-light) !important;
+  border-color: var(--accent-color) !important;
+  color: var(--text-secondary-light) !important;
+  box-shadow: 0 0 0 0.2rem var(--accent-shadow) !important;
+}
+
+.theme-light .output-section .form-control {
+  background-color: #f8f9fa !important;
+}
+
+.theme-light .alert-danger {
+  background-color: #f8d7da !important;
+  border-color: #f5c6cb !important;
+  color: #721c24 !important;
+}
+
+.theme-light .alert-success {
+  background-color: #d4edda !important;
+  border-color: #c3e6cb !important;
+  color: #155724 !important;
+}
+
+.theme-light .btn-primary {
+  background-color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light .btn-outline-secondary {
+  color: var(--btn-secondary) !important;
+  border-color: var(--btn-secondary) !important;
+}
+
+.theme-light .btn-outline-secondary:hover {
+  background-color: var(--btn-secondary) !important;
+  border-color: var(--btn-secondary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light .btn-outline-success {
+  color: var(--btn-success) !important;
+  border-color: var(--btn-success) !important;
+}
+
+.theme-light .btn-outline-success:hover {
+  background-color: var(--btn-success) !important;
+  border-color: var(--btn-success) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light .btn-outline-info {
+  color: var(--btn-info) !important;
+  border-color: var(--btn-info) !important;
+}
+
+.theme-light .btn-outline-info:hover {
+  background-color: var(--btn-info) !important;
+  border-color: var(--btn-info) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light .btn-outline-primary {
+  color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+}
+
+.theme-light .btn-outline-primary:hover {
+  background-color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light .btn-outline-danger {
+  color: var(--btn-danger) !important;
+  border-color: var(--btn-danger) !important;
+}
+
+.theme-light .btn-outline-danger:hover {
+  background-color: var(--btn-danger) !important;
+  border-color: var(--btn-danger) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-light footer {
+  background-color: #f8f9fa !important;
+  border-top: 1px solid #dee2e6 !important;
+  color: #212529 !important;
+}
+
+.theme-light footer a {
+  color: #6c757d !important;
+}
+
+.theme-light footer a:hover {
+  color: #495057 !important;
+}
+
+/* Force dark theme regardless of system preference */
+.theme-dark {
+  background-color: var(--bg-primary-dark) !important;
+  color: var(--text-secondary-dark) !important;
+}
+
+.theme-dark .header-section {
+  background-color: var(--bg-secondary-dark) !important;
+  border-bottom: 1px solid #404040 !important;
+}
+
+.theme-dark .card {
+  background-color: var(--bg-secondary-dark) !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+  color: var(--text-secondary-dark) !important;
+}
+
+.theme-dark .card-header {
+  background-color: var(--bg-card-dark) !important;
+  border-bottom: 2px solid #505050 !important;
+  color: var(--text-primary-dark) !important;
+}
+
+.theme-dark .jmespath-input {
+  background-color: var(--bg-card-dark);
+  border: 1px solid #505050;
+  color: var(--text-primary-dark);
+}
+
+/* Success and Error state overrides - must come after base input rules */
+.theme-dark .jmespath-input.success {
+  background-color: #1e4a1e !important;
+  border-color: #2c6d2c !important;
+  color: #d4edda !important;
+}
+
+.theme-dark .jmespath-input.error {
+  background-color: #4a1e1e !important;
+  border-color: #6d2c2c !important;
+  color: #f8d7da !important;
+}
+
+.theme-dark .jmespath-input::placeholder {
+  color: var(--text-muted-dark) !important;
+}
+
+.theme-dark .jmespath-input:focus {
+  border-color: var(--accent-color);
+}
+
+.theme-dark .json-input, 
+.theme-dark .result-output {
+  background-color: #2a2a2a !important;
+  border: 1px solid #505050 !important;
+  color: var(--text-secondary-dark) !important;
+}
+
+.theme-dark .json-input::placeholder, 
+.theme-dark .result-output::placeholder {
+  color: var(--text-muted-dark) !important;
+}
+
+.theme-dark .json-input:focus, 
+.theme-dark .result-output:focus {
+  background-color: var(--bg-card-dark) !important;
+  border-color: var(--accent-color) !important;
+  color: var(--text-primary-dark) !important;
+}
+
+.theme-dark .output-section .form-control {
+  background-color: var(--bg-secondary-dark) !important;
+}
+
+.theme-dark .alert-danger {
+  background-color: #3d1a1a !important;
+  border-color: #dc3545 !important;
+  color: #f8d7da !important;
+}
+
+.theme-dark .alert-success {
+  background-color: #1e4a1e !important;
+  border-color: #2c6d2c !important;
+  color: #d4edda !important;
+}
+
+.theme-dark .text-muted {
+  color: var(--text-muted-dark) !important;
+}
+
+.theme-dark footer {
+  background-color: var(--bg-secondary-dark) !important;
+  border-top: 1px solid #404040 !important;
+  color: var(--text-secondary-dark) !important;
+}
+
+.theme-dark footer a {
+  color: var(--text-muted-dark) !important;
+}
+
+.theme-dark footer a:hover {
+  color: var(--text-secondary-dark) !important;
+}
+
+.theme-dark .btn-primary {
+  background-color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-dark .btn-outline-secondary {
+  color: var(--btn-secondary) !important;
+  border-color: var(--btn-secondary) !important;
+}
+.theme-dark .btn-outline-secondary:hover {
+  background-color: var(--btn-secondary) !important;
+  border-color: var(--btn-secondary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-dark .btn-outline-success {
+  color: var(--btn-success) !important;
+  border-color: var(--btn-success) !important;
+}
+.theme-dark .btn-outline-success:hover {
+  background-color: var(--btn-success) !important;
+  border-color: var(--btn-success) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-dark .btn-outline-info {
+  color: var(--btn-info) !important;
+  border-color: var(--btn-info) !important;
+}
+.theme-dark .btn-outline-info:hover {
+  background-color: var(--btn-info) !important;
+  border-color: var(--btn-info) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-dark .btn-outline-primary {
+  color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+}
+.theme-dark .btn-outline-primary:hover {
+  background-color: var(--btn-primary) !important;
+  border-color: var(--btn-primary) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+.theme-dark .btn-outline-danger {
+  color: var(--btn-danger) !important;
+  border-color: var(--btn-danger) !important;
+}
+.theme-dark .btn-outline-danger:hover {
+  background-color: var(--btn-danger) !important;
+  border-color: var(--btn-danger) !important;
+  color: var(--bg-primary-light) !important;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  body:not(.theme-light):not(.theme-dark) {
+    background-color: var(--bg-primary-dark);
+    color: var(--text-secondary-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .header-section {
+    background-color: var(--bg-secondary-dark);
+    border-bottom: 1px solid var(--border-dark);
+  }
+
+  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);
+  }
+
+  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);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .json-input::placeholder, 
+  body:not(.theme-light):not(.theme-dark) .result-output::placeholder {
+    color: var(--text-muted-dark);
+  }
+
+  body:not(.theme-light):not(.theme-dark) .json-input:focus, 
+  body:not(.theme-light):not(.theme-dark) .result-output:focus {
+    background-color: #323232;
+    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 {
+    color: #17a2b8;
+    border-color: #17a2b8;
+  }
+
+  .btn-outline-info:hover {
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+    color: #fff;
+  }
+
+  .btn-outline-primary {
+    color: #007bff;
+    border-color: #007bff;
+  }
+
+  .btn-outline-primary:hover {
+    background-color: #007bff;
+    border-color: #007bff;
+    color: #fff;
+  }
+
+  .btn-outline-secondary {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+
+  .btn-outline-secondary:hover {
+    background-color: #6c757d;
+    border-color: var(--btn-secondary);
+    color: #fff;
+  }
+
+  .btn-outline-danger {
+    color: var(--btn-danger);
+    border-color: var(--btn-danger);
+  }
+
+  .btn-outline-danger:hover {
+    background-color: var(--btn-danger);
+    border-color: var(--btn-danger);
+    color: #fff;
+  }
 }
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import jmespath from 'jmespath';
+import packageJson from '../package.json';
 import './App.css';

 // JMESPath Testing Tool - Main Application Component
 function App() {
  const [jmespathExpression, setJmespathExpression] = useState('people[0].name');
+  const [theme, setTheme] = useState(() => {
+    // Load theme from localStorage or default to 'auto'
+    return localStorage.getItem('theme') || 'auto';
+  });
  const [jsonData, setJsonData] = useState(`{
  "people": [
    {
@@ -24,6 +29,33 @@ function App() {
  const [error, setError] = useState('');
  const [jsonError, setJsonError] = useState('');

+  // Theme management
+  useEffect(() => {
+    // Apply theme to document
+    const applyTheme = (selectedTheme) => {
+      const root = document.documentElement;
+      const body = document.body;
+      
+      // Clear existing theme classes from both html and body
+      root.className = '';
+      body.classList.remove('theme-light', 'theme-dark');
+      
+      if (selectedTheme === 'light') {
+        body.classList.add('theme-light');
+      } else if (selectedTheme === 'dark') {
+        body.classList.add('theme-dark');
+      }
+      // 'auto' uses CSS media queries (no class needed)
+    };
+
+    applyTheme(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const handleThemeChange = (newTheme) => {
+    setTheme(newTheme);
+  };
+
  const evaluateExpression = () => {
    try {
      // Clear previous errors
@@ -185,8 +217,37 @@ function App() {
      <div className="header-section py-2">
        <div className="container">
          <div className="row">
-            <div className="col-12 text-center">
+            <div className="col-12 text-center position-relative">
              <h2 className="mb-1">JMESPath Testing Tool</h2>
+              {/* Theme switcher */}
+              <div className="position-absolute top-0 end-0">
+                <div className="btn-group btn-group-sm" role="group" aria-label="Theme switcher">
+                  <button 
+                    type="button" 
+                    className={`btn ${theme === 'auto' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                    onClick={() => handleThemeChange('auto')}
+                    title="Auto (follow system)"
+                  >
+                    🌓 Auto
+                  </button>
+                  <button 
+                    type="button" 
+                    className={`btn ${theme === 'light' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                    onClick={() => handleThemeChange('light')}
+                    title="Light theme"
+                  >
+                    ☀️ Light
+                  </button>
+                  <button 
+                    type="button" 
+                    className={`btn ${theme === 'dark' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                    onClick={() => handleThemeChange('dark')}
+                    title="Dark theme"
+                  >
+                    🌙 Dark
+                  </button>
+                </div>
+              </div>
            </div>
          </div>
        </div>
@@ -254,16 +315,14 @@ function App() {
              <div className="card-body">
                <input
                  type="text"
-                  className={`form-control jmespath-input ${error ? 'error' : ''}`}
+                  className={`form-control jmespath-input ${error ? 'error' : 'success'}`}
                  value={jmespathExpression}
                  onChange={handleJmespathChange}
                  placeholder="Enter JMESPath expression (e.g., people[*].name)"
                />
-                {error && (
-                  <div className="alert alert-danger mt-2 mb-0">
-                    <small>{error}</small>
-                  </div>
-                )}
+                <div className={`alert mt-2 mb-0 ${error ? 'alert-danger' : 'alert-success'}`}>
+                  <small>{error || 'Expression is correct'}</small>
+                </div>
              </div>
            </div>
          </div>
@@ -283,7 +342,7 @@ function App() {
              <div className="card-body d-flex flex-column" style={{ minHeight: 0 }}>
                <div className="flex-grow-1" style={{ minHeight: 0 }}>
                  <textarea
-                    className={`form-control h-100 json-input ${jsonError ? 'error' : ''}`}
+                    className="form-control h-100 json-input"
                    value={jsonData}
                    onChange={handleJsonChange}
                    placeholder="Enter JSON data here..."
@@ -311,7 +370,7 @@ function App() {
              <div className="card-body d-flex flex-column" style={{ minHeight: 0 }}>
                <div className="flex-grow-1" style={{ minHeight: 0 }}>
                  <textarea
-                    className={`form-control h-100 result-output ${result && !error && !jsonError ? 'success' : ''}`}
+                    className="form-control h-100 result-output"
                    value={result}
                    readOnly
                    placeholder="Results will appear here..."
@@ -330,12 +389,12 @@ 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">
              <p className="mb-0 text-muted small">
-                Licensed under <a href="#" className="text-decoration-none">MIT License</a> | 
+                Licensed under <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer" className="text-decoration-none">MIT License</a> | 
                <a href="https://jmespath.org/" target="_blank" rel="noopener noreferrer" className="text-decoration-none ms-2">
                  Learn JMESPath
                </a>
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,5 @@
 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f9fa;
 }

@@ -32,8 +27,6 @@ code {

 .form-control {
  resize: vertical;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  font-size: 14px;
 }

 .input-section .form-control {
@@ -48,27 +41,15 @@ code {
 }

 .error {
-  background-color: #f8d7da !important;
-  border-color: #f5c6cb !important;
-  color: #721c24;
+  background-color: var(--error-bg-light) !important;
+  border-color: var(--error-border-light) !important;
+  color: var(--error-text-light);
 }

 .success {
-  background-color: #d4edda !important;
-  border-color: #c3e6cb !important;
-  color: #155724;
-}
-
-.btn-outline-success:hover {
-  background-color: #28a745;
-  border-color: #28a745;
-  color: white;
-}
-
-.btn-outline-info:hover {
-  background-color: #17a2b8;
-  border-color: #17a2b8;
-  color: white;
+  background-color: var(--success-bg-light) !important;
+  border-color: var(--success-border-light) !important;
+  color: var(--success-text-light);
 }

 .header-section {
@@ -78,18 +59,50 @@ code {
  margin-bottom: 2rem;
 }

-.jmespath-input {
-  background-color: #fff3cd;
-  border-color: #ffeaa7;
-  font-weight: 500;
+/* Dark mode support for error states */
+@media (prefers-color-scheme: dark) {
+  .error {
+    background-color: var(--error-bg-dark) !important;
+    border-color: var(--error-border-dark) !important;
+    color: var(--error-text-dark) !important;
+  }
 }

-.json-input {
-  background-color: #e8f5e8;
-  border-color: #c3e6cb;
+/* Manual theme overrides for error states */
+.theme-dark .error {
+  background-color: var(--error-bg-dark) !important;
+  border-color: var(--error-border-dark) !important;
+  color: var(--error-text-dark) !important;
 }

-.result-output {
-  background-color: #e7f3ff;
-  border-color: #b3d7ff;
+.theme-light .error {
+  background-color: var(--error-bg-light) !important;
+  border-color: var(--error-border-light) !important;
+  color: var(--error-text-light) !important;
+}
+
+/* Manual theme overrides for success states */
+.theme-dark .success {
+  background-color: var(--success-bg-dark) !important;
+  border-color: var(--success-border-dark) !important;
+  color: var(--success-text-dark) !important;
+}
+
+.theme-light .success {
+  background-color: var(--success-bg-light) !important;
+  border-color: var(--success-border-light) !important;
+  color: var(--success-text-light) !important;
+}
+
+/* Additional specificity for jmespath-input with error class */
+.theme-dark .jmespath-input.error {
+  background-color: #4a1e1e !important;
+  border-color: #6d2c2c !important;
+  color: #f8d7da !important;
+}
+
+.theme-light .jmespath-input.error {
+  background-color: #f8d7da !important;
+  border-color: #f5c6cb !important;
+  color: #721c24 !important;
 }
Author	SHA1	Message	Date
Slawomir Koszewski	14d87bff2e	v1.0.4 - Unified theme system and consistent color definitions	2026-01-21 11:11:23 +01:00
Slawomir Koszewski	0182174153	v1.0.3: Fix expression textbox error state and UI consistency - Fixed theme class application from html to body element for proper CSS inheritance - Removed CSS conflicts between base styles and error/success states - Fixed focus state interference with error/success background colors - Changed error message panel to fixed placement (no more UI jumping) - Added theme-consistent styling for alert-success in all theme modes - Expression textbox now properly shows red/green backgrounds in manual themes - Status message now shows Expression is correct vs error message consistently	2026-01-21 10:35:34 +01:00
Slawomir Koszewski	6f8c4518ce	v1.0.2: Complete CSS refactoring with custom properties - Introduced comprehensive CSS custom properties for colors, fonts, and transitions - Eliminated 40+ hardcoded color values with centralized variables - Consolidated duplicate font family definitions - Removed redundant button styles and input styling - Optimized theme system with consistent property usage - Fixed accessibility issue with MIT license link - Reduced code redundancy while maintaining full functionality - All themes (auto/light/dark) now use unified variable system	2026-01-21 10:09:52 +01:00
Slawomir Koszewski	97d83923d9	v1.0.1: Add comprehensive theme switcher and fix dark mode issues - Add theme switcher widget with Auto/Light/Dark options in header - Implement manual theme override system with localStorage persistence - Add complete button theme overrides for all variants (primary, outline-*) - Fix missing focus states and placeholder colors for light theme - Add proper alert styling for both themes - Fix expression input error state colors in dark theme - Complete comprehensive theme coverage for all UI elements - Theme switcher overrides CSS media queries when manually selected - All buttons, inputs, and surfaces now properly adapt to theme changes	2026-01-21 09:45:38 +01:00
Slawomir Koszewski	fef9c9732e	Add comprehensive dark mode support and fix color consistency - Add automatic dark/light theme detection via prefers-color-scheme - Add smooth transitions between theme changes - Fix color contrast issues with explicit text colors - Make JSON Data and Query Result boxes static (no color changes) - Keep only Expression input with error indication (red styling) - Remove dynamic success/error styling from data input/output areas - Add proper placeholder and focus state colors for both themes - Ensure all text remains visible in both light and dark modes - Clean up unused CSS classes	2026-01-18 16:47:59 +01:00
Slawomir Koszewski	61408d6362	Fix serve command options in Dockerfile - Remove unsupported --host flag from serve command - The serve package with -l option binds to 0.0.0.0 by default in containers - Container will now start properly without ArgError	2026-01-18 16:13:00 +01:00
Slawomir Koszewski	ce508d32b5	Fix Dockerfile to properly expose container service - Install all dependencies with 'npm ci' instead of production-only - Install 'serve' package globally in container - Use direct serve command with proper host binding (0.0.0.0) - Fix container service accessibility for production deployment	2026-01-18 16:06:01 +01:00
Slawomir Koszewski	db3b6beaa3	Modernize Docker Compose configuration - Replace docker-compose.yml with compose.yaml (modern standard) - Remove obsolete 'version' field (deprecated in Docker Compose) - Remove development service configuration - Add proper image tagging with skoszewski/jmespath-playground - Keep build context for local development flexibility - Simplify to production-only service configuration	2026-01-18 16:01:18 +01:00