updated dark theme

Author: danil-nizamov

diagram.js

@@ -1,17 +1,21 @@
 // diagram.js
 const DIAGRAM = { NODE_WIDTH: 240, ROW_H: 22, PADDING_X: 10, HEADER_H: 28, GAP: 8 };
 
-/* --- header colors --- */
-const TABLE_COLORS = {
-  white: '#ffffff',
-  blue:  '#eaf2ff',
-  green: '#e9f8f1',
-  red:   '#ffecec',
-};
-function getHeaderFill(table) {
-  const key = (table && table.color) || 'white';
-  return TABLE_COLORS[key] || TABLE_COLORS.white;
-}
+/* --- header colors (theme-aware via CSS variables) --- */
+const TABLE_COLOR_VARS = {
+    white: '--tbl-white',
+    blue:  '--tbl-blue',
+    green: '--tbl-green',
+    red:   '--tbl-red',
+  };
+
+  function getHeaderFill(table) {
+    const key = (table && table.color) || 'white';
+    const varName = TABLE_COLOR_VARS[key] || '--tbl-white';
+    const val = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    return val || '#ffffff';
+  }
+
 
 /* Build a path for a rectangle that has ONLY the top corners rounded */
 function roundedTopRectPath(x, y, w, h, rx, ry) {

style.css

@@ -1,3 +1,22 @@
+/* Put these with your other :root vars */
+:root {
+    /* header fills (light) */
+    --tbl-white: #ffffff;
+    --tbl-blue:  #8eb3f0;
+    --tbl-green: #bbe5d1;
+    --tbl-red:   #f8caca;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      /* darker tints that read well with white text */
+      --tbl-white: #4a5a7b; /* slate-ish */
+      --tbl-blue:  #0c2658; /* deep blue */
+      --tbl-green: #07402d; /* deep green */
+      --tbl-red:   #5d1d1d; /* deep red */
+    }
+  }
+
 /* Variables mapped to the other app’s palette (light) */
 :root {
     --bg: #ffffff;                      /* base background */
@@ -9,6 +28,10 @@
     --fk: #0ea5e9;                      /* accent-primary */
     --danger: #dc2626;                  /* error */
     --accent: #0ea5e9;                  /* accent-primary */
+    --canvas: #f8fafc;                  /* was hard-coded on #diagram */
+    --control-bg: #ffffff;              /* inputs & buttons bg (light) */
+    --control-border: #e2e8f0;          /* inputs & buttons border (light) */
+    --fk: #0ea5e9; /* light blue for light theme */
   }
 
   /* Dark mode: override only color variables */
@@ -27,6 +50,10 @@
       --fk: #38bdf8;
       --danger: #ef4444;
       --accent: #38bdf8;
+      --canvas: #1e2640;
+      --control-bg: #1f2937;
+      --control-border: #94a3b8;
+      --fk: #ffffff; /* arrows & markers turn white in dark theme */
     }
   }
 
@@ -50,11 +77,11 @@
   main.layout{display:grid;grid-template-columns:300px 1fr;height:calc(100% - 50px)}
   #diagram-wrap{width:100%;height:100%}
 
-  #diagram{background:#f8fafc}
+  #diagram{ background: var(--canvas); }
 
   aside#sidebar{
     padding:10px;overflow:auto;border-right:1px solid var(--stroke);
-    background:#f8fafc
+    background: var(--bg);
   }
   .card{
     background:var(--box);
@@ -66,10 +93,41 @@
   label{display:flex;flex-direction:column;gap:.25rem;margin:.4rem 0}
   label.row{flex-direction:row;align-items:center;gap:.5rem}
 
-  input,select,button{padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font:inherit}
+  /* Make controls use the tokens in both modes */
+  input, select, button {
+    padding: .5rem;
+    border: 0.5px solid var(--control-border);
+    border-radius: 6px;
+    background: var(--control-bg);
+    color: var(--fg);
+    font: inherit;
+  }
   input[type="checkbox"]{padding:0}
   button{cursor:pointer;border-radius:.5rem}
 
+  /* Dark-mode specifics */
+@media (prefers-color-scheme: dark) {
+    /* 1) Sidebar “menus” (cards) should have no border in dark */
+    .card { border: none; }
+
+    /* 2) Buttons should be dark with light-grey border */
+    button { background: var(--control-bg); border-color: var(--control-border); }
+
+    /* Optional: make the danger button less blinding in dark */
+    button.danger {
+    background: rgba(239, 68, 68, 0.12);
+    border-color: rgba(239, 68, 68, 0.45);
+    color: var(--danger);
+    }
+
+    /* 3) Inputs dark with grey default (placeholder) text */
+    input::placeholder,
+    textarea::placeholder {
+    color: var(--muted);
+    opacity: 1; /* ensure consistent grey */
+    }
+}
+
   /* Danger button colors mapped to semantic tokens (no layout change) */
   button.danger{
     background:#fef2f2;        /* error-bg */
@@ -81,6 +139,10 @@
 
   text{font-size:12px;fill:var(--fg);dominant-baseline:middle}
   .table-title{font-weight:600}
+  .table-box {
+    fill: var(--box) !important;
+    stroke: var(--stroke) !important;
+  }
 
   .table.selected rect{stroke:var(--accent);stroke-width:2}