dc/dc
6
1
Fork 0
Code Issues 21 Pull Requests 2 Actions Packages Projects Releases 87 Wiki Activity

fix(handsontable): restore dark mode for v17
Lighthouse Checks / lighthouse (pull_request) Failing after 17m59s
Details
Build / Build-and-ng-test (pull_request) Failing after 17m59s
Details
Build / Build-and-test-development (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
s
2026-06-05 14:12:11 +02:00
parent eb015d712b
commit 9d97bf7ea1
2 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/editor/editor.component.ts
+1
View File
@@ -134,6 +134,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
readOnly: this.hotTable.readOnly, readOnly: this.hotTable.readOnly,
copyPaste: this.hotTable.copyPaste, copyPaste: this.hotTable.copyPaste,
contextMenu: true, contextMenu: true,
className: 'htDark',
theme: 'ht-theme-classic' theme: 'ht-theme-classic'
} }
} }
client/src/styles.scss
+43
View File
@@ -635,6 +635,41 @@ body[cds-theme="dark"] {
border-color: $darkBorderColor; 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 { .handsontable tr:first-child th, .handsontable tr:first-child td {
border-color: $darkBorderColor; border-color: $darkBorderColor;
} }
@@ -4793,6 +4828,14 @@ body[cds-theme="dark"] {
.handsontable.listbox { .handsontable.listbox {
box-shadow: 0px 4px 20px 0px #00000070; 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 { .wtHolder {
overflow-x: hidden; overflow-x: hidden;
} }