From ddd711f93f5e206b391e6e90b62db68ea2692c7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= Date: Thu, 9 Apr 2026 22:51:06 +0200 Subject: [PATCH] =?UTF-8?q?fix(ui):=20fix=20.app-data-table=20dark=20mode?= =?UTF-8?q?=20=E2=80=94=20@apply=20dark:=20unreliable=20in=20@layer=20comp?= =?UTF-8?q?onents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace `@apply dark:bg-gray-900/95` with an explicit `:is(.dark) .app-data-table` rule using CSS variables, matching the established pattern of `.app-surface` and `.app-toolbar`. Fixes Allocations, ResourceTableWidget, and ProjectTableWidget all appearing white in dark mode. Co-Authored-By: Claude Sonnet 4.6 --- apps/web/src/app/globals.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 19e95bf..26900de 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -513,7 +513,14 @@ } .app-data-table { - @apply overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/95; + @apply overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm; + } + + /* Explicit dark rule — @apply dark: inside @layer components is unreliable */ + :is(.dark) .app-data-table { + background-color: rgb(var(--surface-card)); + border-color: rgb(var(--border-subtle)); + box-shadow: none; } .app-data-table table { @@ -521,7 +528,7 @@ } .app-data-table thead tr { - @apply bg-gray-50/90 dark:bg-gray-800/80; + @apply bg-gray-50/90; } :is(.dark) .app-data-table thead tr {