From e6ecba3a016e605ba4b25d507ee8cb05ee691ef1 Mon Sep 17 00:00:00 2001
From: Nigel Brookes-Thomas <nigel@brookes-thomas.co.uk>
Date: Wed, 7 Jan 2026 21:35:34 +0000
Subject: [PATCH] more lexxy darkmode fixes

---
 .../stylesheets/application.bootstrap.scss    | 50 +++++++++++++++++--
 app/assets/stylesheets/lexxy-content.css      |  7 ++-
 app/assets/stylesheets/lexxy-variables.css    | 48 ++++++++++++++++++
 3 files changed, 99 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
index 45bb816..91c61a6 100644
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ b/app/assets/stylesheets/application.bootstrap.scss
@@ -1169,6 +1169,31 @@
     /* Content area */
     .lexxy-editor__content {
       color: var(--lexxy-color-ink);
+      background-color: var(--lexxy-color-canvas);
+    }
+
+    /* Tables inside the editor - dark mode fix */
+    table {
+      background-color: var(--lexxy-color-canvas);
+
+      th,
+      td {
+        background-color: var(--lexxy-color-canvas);
+        border-color: var(--border-color);
+        color: var(--lexxy-color-ink);
+      }
+
+      /* Header cells */
+      th,
+      .lexxy-content__table-cell--header {
+        background-color: var(--lexxy-color-table-header-bg);
+      }
+
+      /* Selected cells */
+      .table-cell--selected,
+      .lexxy-content__table-cell--selected {
+        background-color: var(--lexxy-color-selected) !important;
+      }
     }
 
     /* Inputs inside dropdowns */
@@ -1487,21 +1512,36 @@ lexxy-editor,
     width: unset;
     inline-size: calc(100% - 0.5ch);
     margin: 0.25ch;
+    
+    /* Use canvas color for table background - adapts to dark mode */
+    background-color: var(--lexxy-color-canvas, white);
 
-    th,
+    /* Header cells - th elements get header background */
+    th {
+      border: 1px solid var(--lexxy-color-ink-lighter, #dee2e6);
+      padding: 1ch;
+      text-align: start;
+      background-color: var(--lexxy-color-table-header-bg, #f8f9fa);
+      color: var(--lexxy-color-ink, inherit);
+      font-weight: bold;
+      vertical-align: top;
+      box-shadow: none;
+    }
+
+    /* Regular cells */
     td {
       border: 1px solid var(--lexxy-color-ink-lighter, #dee2e6);
       padding: 1ch;
       text-align: start;
-      background-color: transparent;
+      background-color: var(--lexxy-color-canvas, white);
+      color: var(--lexxy-color-ink, inherit);
       vertical-align: top;
-      /* Reset Bootstrap's td/th padding */
       box-shadow: none;
     }
     
-    /* Header cell styling */
+    /* Header cell class styling (for cells marked as headers via class) */
     .lexxy-content__table-cell--header {
-      background-color: var(--lexxy-color-ink-lightest, #f8f9fa);
+      background-color: var(--lexxy-color-table-header-bg, #f8f9fa) !important;
       font-weight: bold;
     }
   }
diff --git a/app/assets/stylesheets/lexxy-content.css b/app/assets/stylesheets/lexxy-content.css
index d834d4c..aa7103f 100644
--- a/app/assets/stylesheets/lexxy-content.css
+++ b/app/assets/stylesheets/lexxy-content.css
@@ -208,6 +208,11 @@
     inline-size: calc(100% - 0.5ch);
     margin: 0.25ch;
 
+    th {
+      background-color: var(--lexxy-color-table-header-bg);
+      font-weight: bold;
+    }
+
     th,
     td {
       border: 1px solid var(--lexxy-color-ink-lighter);
@@ -220,7 +225,7 @@
       }
 
       &.lexxy-content__table-cell--header {
-        background-color: var(--lexxy-color-ink-lightest);
+        background-color: var(--lexxy-color-table-header-bg);
         font-weight: bold;
       }
 
diff --git a/app/assets/stylesheets/lexxy-variables.css b/app/assets/stylesheets/lexxy-variables.css
index 9afdbca..67cda35 100644
--- a/app/assets/stylesheets/lexxy-variables.css
+++ b/app/assets/stylesheets/lexxy-variables.css
@@ -78,4 +78,52 @@
   --lexxy-radius: 0.5ch;
   --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --lexxy-z-popup: 1000;
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Invert the ink colors for dark backgrounds */
+    --lexxy-color-ink: #e9ecef;
+    --lexxy-color-ink-medium: #adb5bd;
+    --lexxy-color-ink-light: #6c757d;
+    --lexxy-color-ink-lighter: #6c757d;
+    --lexxy-color-ink-lightest: #2d2d2d;
+    --lexxy-color-ink-inverted: #1a1a1a;
+
+    /* Canvas and text colors */
+    --lexxy-color-canvas: #2d2d2d;
+    --lexxy-color-text: #e9ecef;
+    --lexxy-color-text-subtle: #adb5bd;
+
+    /* Link and accent colors - brighter for dark mode */
+    --lexxy-color-link: #6ea8fe;
+    --lexxy-color-accent-dark: #6ea8fe;
+    --lexxy-color-accent-medium: #9ec5fe;
+    --lexxy-color-accent-light: #3d5a80;
+    --lexxy-color-accent-lightest: #2d3d50;
+
+    /* Selection colors */
+    --lexxy-color-selected: rgba(110, 168, 254, 0.2);
+    --lexxy-color-selected-hover: rgba(110, 168, 254, 0.3);
+    --lexxy-color-selected-dark: #6ea8fe;
+
+    /* Code colors for dark mode */
+    --lexxy-color-code-bg: rgba(255, 255, 255, 0.1);
+    --lexxy-color-code-token-att: #ff7b72;
+    --lexxy-color-code-token-comment: #8b949e;
+    --lexxy-color-code-token-function: #d2a8ff;
+    --lexxy-color-code-token-operator: #ff7b72;
+    --lexxy-color-code-token-property: #79c0ff;
+    --lexxy-color-code-token-punctuation: #c9d1d9;
+    --lexxy-color-code-token-selector: #7ee787;
+    --lexxy-color-code-token-variable: #ffa657;
+
+    /* Table colors */
+    --lexxy-color-table-header-bg: #4a4a4a;
+    --lexxy-color-table-cell-border: #6c757d;
+
+    /* Shadow for dark mode */
+    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
 }
\ No newline at end of file