fixed a color bug

app.js

@@ -74,11 +74,11 @@
       try {
         await saveSchemaToServer(schema, 'solution.json');
         lastSent = now; dirty = false;
-        setStatus('Auto-saved to solution.json');
+        setStatus('Changes saved');
       } catch (e) {
         // Ignore transient failures; we'll retry next tick
         console.error(e);
-        setStatus('Auto-save failed (will retry)');
+        setStatus('Save failed (will retry)');
       }
     }, 250); // check 4x per second; flush at >=1s since last send
 
@@ -460,6 +460,26 @@
       }
     })();
 
+    // --- Theme change detection ---
+    function setupThemeChangeListener() {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      function handleThemeChange() {
+        // Re-render the diagram when theme changes to update table colors
+        if (schema) {
+          Diagram.renderSchema(svg, schema, selectedTableId, selectTable, selectColumn, selectedColId);
+        }
+      }
+
+      // Listen for theme changes
+      mediaQuery.addEventListener('change', handleThemeChange);
+
+      // Also listen for the older 'addListener' method for broader browser support
+      if (mediaQuery.addListener) {
+        mediaQuery.addListener(handleThemeChange);
+      }
+    }
+
     // --- boot
     (async function init() {
       try {
@@ -474,7 +494,7 @@
             } catch (err) {
                 console.warn('initial_state.json not found or failed to load. Starting empty.', err);
                 schema = makeEmptySchema('Untitled schema');
-                setStatus('No initial_state.json found. Starting with an empty schema.');
+                setStatus('Starting with a new schema');
             }
             } else {
             setStatus(`Loaded: ${schema.name}`);
@@ -490,6 +510,9 @@
         Diagram.enableDragging(svg, schema, save, () => selectedTableId, () => selectedColId, selectTable, selectColumn);
         Diagram.enablePanZoom(svg, () => { /* persist view? not necessary */ });
 
+        // Setup theme change detection
+        setupThemeChangeListener();
+
         // Pre-populate FK target selects
         UI.fillTables(fkToTable, schema);
         const first = schema.tables[0];

solution.json

@@ -1,73 +1,106 @@
 {
-  "name": "Untitled schema",
+  "version": "1.0",
+  "name": "ShopDB",
   "tables": [
     {
-      "id": "tbl_users_5jfh90d",
+      "id": "tbl_users",
       "name": "users",
       "columns": [
         {
-          "id": "col_id_tp7z9eh",
+          "id": "u_id",
           "name": "id",
           "type": "int",
           "nullable": false,
           "default": null
+        },
+        {
+          "id": "u_email",
+          "name": "email",
+          "type": "varchar(255)",
+          "nullable": false,
+          "default": null
+        },
+        {
+          "id": "u_name",
+          "name": "name",
+          "type": "varchar(255)",
+          "nullable": false,
+          "default": null
         }
       ],
       "primaryKey": [
-        "col_id_tp7z9eh"
+        "u_id"
       ],
       "uniqueConstraints": [
         {
-          "id": "uq_obntuki",
+          "id": "uq_users_email",
           "columns": [
-            "col_id_tp7z9eh"
+            "u_email"
           ]
         }
       ],
       "indexes": [],
       "position": {
-        "x": 656,
-        "y": 133
+        "x": 500,
+        "y": 6
       },
-      "color": "white"
+      "color": "green"
     },
     {
-      "id": "tbl_wow_ntv1bum",
-      "name": "peep",
+      "id": "tbl_orders",
+      "name": "orders****",
       "columns": [
         {
-          "id": "col_id_w4l8ea5",
+          "id": "o_id",
           "name": "id",
           "type": "int",
           "nullable": false,
           "default": null
         },
         {
-          "id": "col_user_id_v0cqfey",
+          "id": "o_user_id",
           "name": "user_id",
           "type": "int",
           "nullable": false,
           "default": null
+        },
+        {
+          "id": "o_total",
+          "name": "total",
+          "type": "decimal(10,2)",
+          "nullable": false,
+          "default": "0.00"
         }
       ],
       "primaryKey": [
-        "col_id_w4l8ea5"
-      ],
-      "uniqueConstraints": [
-        {
-          "id": "uq_54xxf1u",
-          "columns": [
-            "col_id_w4l8ea5"
-          ]
-        }
+        "o_id"
       ],
+      "uniqueConstraints": [],
       "indexes": [],
       "position": {
-        "x": 304,
-        "y": 223
+        "x": 198,
+        "y": -33
       },
       "color": "red"
     }
   ],
-  "foreignKeys": []
+  "foreignKeys": [
+    {
+      "id": "fk_a1cw4cy",
+      "from": {
+        "table": "tbl_orders",
+        "columns": [
+          "o_user_id"
+        ]
+      },
+      "to": {
+        "table": "tbl_users",
+        "columns": [
+          "u_id"
+        ]
+      },
+      "onDelete": "NO ACTION",
+      "onUpdate": "NO ACTION"
+    }
+  ]
 }