fix(handsontable): restore dark mode for v17

2026-06-05 14:12:11 +02:00
parent eb015d712b
commit 9d97bf7ea1
2 changed files with 44 additions and 0 deletions
@@ -134,6 +134,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
      readOnly: this.hotTable.readOnly,
      copyPaste: this.hotTable.copyPaste,
      contextMenu: true,
+      className: 'htDark',
      theme: 'ht-theme-classic'
    }
  }
@@ -635,6 +635,41 @@ body[cds-theme="dark"] {
    border-color: $darkBorderColor;
  }

+  .handsontable .htDimmed {
+    color: #eee !important;
+    background-color: #3c5662 !important;
+  }
+
+  // Handsontable v17 themes (scrollbars, autocomplete listbox,
+  // dropdown/context menus, date-picker calendar, cell editor) solely through
+  // its --ht-* CSS variables, which the ht-theme-classic class resolves to
+  // light values via light-dark(). The hand-rolled .htDark/.darkTH marker
+  // classes can't reach those, so override the variables directly (the
+  // official theme-customization path). Scoped to [class*='ht-theme-classic']
+  // so it also covers the menu/listbox/calendar portals HT appends to <body>.
+  [class*='ht-theme-classic'] {
+    color-scheme: dark;
+
+    // Root vars — most derives from these
+    --ht-foreground-color: #eee;
+    --ht-background-color: #3c5662;            // cells, menus, listbox, calendar bg
+    --ht-background-secondary-color: #2d4048;  // scrollbar track, icon buttons
+    --ht-border-color: #{$darkBorderColor};
+    --ht-read-only-color: #eee;                // read-only/dimmed text
+
+    --ht-header-background-color: #487d96;
+    --ht-header-row-background-color: #487d96;
+    --ht-header-highlighted-background-color: #3b6b81;
+    --ht-header-row-highlighted-background-color: #3b6b81;
+
+    // Scrollbar thumb + cell editor input
+    --ht-scrollbar-thumb-color: #{$darkBorderColor};
+    --ht-input-background-color: #708b98;
+    --ht-input-foreground-color: #fff;
+    --ht-cell-editor-background-color: #708b98;
+    --ht-cell-editor-foreground-color: #fff;
+  }
+
  .handsontable tr:first-child th, .handsontable tr:first-child td {
    border-color: $darkBorderColor;
  }
@@ -4793,6 +4828,14 @@ body[cds-theme="dark"] {
 .handsontable.listbox {
  box-shadow: 0px 4px 20px 0px #00000070;

+  // HT v17 sizes the inner table to the dropdown width but the 1px L+R menu
+  // border eats 2px of that, leaving content 2px too wide -> a spurious
+  // horizontal scrollbar. Render the border as an outline (no layout/overflow
+  // impact) so the content fits exactly. outline-offset pulls it inside.
+  border: 0 !important;
+  outline: var(--ht-menu-border-width, 1px) solid var(--ht-menu-border-color, #e5e5e9);
+  outline-offset: calc(-1 * var(--ht-menu-border-width, 1px));
+
  .wtHolder {
    overflow-x: hidden;
  }