Readable dark theme and light theme

api-tester.html

@@ -4,6 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LibraxisAI Responses API Tester</title>
+    <script>
+        try {
+            const savedTheme = localStorage.getItem('api-tester-theme');
+            if (savedTheme === 'light' || savedTheme === 'dark') document.documentElement.dataset.theme = savedTheme;
+        } catch (e) {
+            // Storage unavailable: follow the system theme.
+        }
+    </script>
     <style>
         :root {
             --bg: #0a0a0f;
@@ -13,13 +21,71 @@
             --accent: #6366f1;
             --accent-hover: #818cf8;
             --text: #e4e4e7;
-            --text-dim: #71717a;
+            --text-dim: #a1a1aa;
             --success: #22c55e;
             --error: #ef4444;
             --warning: #f59e0b;
             --gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+            --overlay: rgba(255, 255, 255, 0.03);
+            --overlay-strong: rgba(255, 255, 255, 0.06);
+            color-scheme: dark;
+        }
+
+        /* Light theme: explicit choice, or the system preference unless dark is forced. */
+        :root[data-theme="light"] {
+            --bg: #f5f6fa;
+            --surface: #ffffff;
+            --surface-hover: #eef0f6;
+            --border: #d4d7e2;
+            --accent: #4f46e5;
+            --accent-hover: #4338ca;
+            --text: #111827;
+            --text-dim: #4b5563;
+            --success: #15803d;
+            --error: #b91c1c;
+            --warning: #b45309;
+            --gradient: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%);
+            --overlay: rgba(15, 23, 42, 0.03);
+            --overlay-strong: rgba(15, 23, 42, 0.07);
+            color-scheme: light;
+        }
+
+        @media (prefers-color-scheme: light) {
+            :root:not([data-theme="dark"]) {
+                --bg: #f5f6fa;
+                --surface: #ffffff;
+                --surface-hover: #eef0f6;
+                --border: #d4d7e2;
+                --accent: #4f46e5;
+                --accent-hover: #4338ca;
+                --text: #111827;
+                --text-dim: #4b5563;
+                --success: #15803d;
+                --error: #b91c1c;
+                --warning: #b45309;
+                --gradient: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%);
+                --overlay: rgba(15, 23, 42, 0.03);
+                --overlay-strong: rgba(15, 23, 42, 0.07);
+                color-scheme: light;
+            }
+        }
+
+        .theme-toggle {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            width: 2.25rem;
+            height: 2.25rem;
+            border-radius: 50%;
+            border: 1px solid var(--border);
+            background: var(--surface);
+            color: var(--text);
+            font-size: 1rem;
+            cursor: pointer;
         }
 
+        .theme-toggle:hover { border-color: var(--accent); }
+
         * { box-sizing: border-box; margin: 0; padding: 0; }
 
         body {
@@ -32,6 +98,7 @@
 
         /* Header */
         .header {
+            position: relative;
             text-align: center;
             padding: 1.5rem 0;
             border-bottom: 1px solid var(--border);
@@ -337,14 +404,14 @@
             justify-content: space-between;
             align-items: center;
             padding: 0.5rem 0.75rem;
-            background: rgba(255,255,255,0.02);
+            background: var(--overlay);
             border-bottom: 1px solid var(--border);
             font-size: 0.75rem;
             cursor: pointer;
         }
 
         .output-item-header:hover {
-            background: rgba(255,255,255,0.04);
+            background: var(--overlay-strong);
         }
 
         .output-step {
@@ -458,7 +525,7 @@
             color: var(--text-dim);
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            font-size: 0.625rem;
+            font-size: 0.6875rem;
         }
 
         /* Footer */
@@ -508,6 +575,7 @@
 </head>
 <body>
     <div class="header">
+        <button class="theme-toggle" id="themeToggle" onclick="cycleTheme()" title="Theme: auto → light → dark">◐</button>
         <h1>LibraxisAI Responses API Tester</h1>
         <p>Multi-lane comparison tool for Responses API endpoints with conversation chaining</p>
     </div>
@@ -635,6 +703,28 @@
         // Parsed step summaries per lane: laneId -> { steps: [...] }
         const laneRuns = new Map();
 
+        const THEME_ICONS = { auto: '◐', light: '☀', dark: '☾' };
+
+        function applyTheme(theme) {
+            if (theme === 'light' || theme === 'dark') document.documentElement.dataset.theme = theme;
+            else delete document.documentElement.dataset.theme;
+            const toggle = document.getElementById('themeToggle');
+            if (toggle) toggle.textContent = THEME_ICONS[theme] || THEME_ICONS.auto;
+        }
+
+        function cycleTheme() {
+            const current = document.documentElement.dataset.theme || 'auto';
+            const next = { auto: 'light', light: 'dark', dark: 'auto' }[current];
+            applyTheme(next);
+            try {
+                localStorage.setItem('api-tester-theme', next);
+            } catch (e) {
+                // Storage unavailable: the choice lasts for this page view only.
+            }
+        }
+
+        applyTheme(document.documentElement.dataset.theme || 'auto');
+
         function collectResults() {
             const results = {
                 timestamp: new Date().toISOString(),