Description
When using WidgetLayout with PF v6 dark theme (pf-v6-theme-dark on <html>), the card body background remains white. The card header renders correctly with a dark background, but the <CardBody> area stays light.
Individual PF components render correctly in dark mode outside of the widgetized-dashboard wrapper. The issue is specific to how cards render inside react-grid-layout grid items.
Environment
@patternfly/widgetized-dashboard: 1.0.0-prerelease.6@patternfly/react-core: 6.4.0@patternfly/patternfly: 6.4.0- Storybook 8 with
@storybook/addon-themes (withThemeByClassName, parentSelector: 'html')
Steps to reproduce
- Set up a Storybook with PF dark theme toggle using
withThemeByClassName
- Render a
WidgetLayout with any widgets
- Toggle to dark mode
Expected
Card body background should use --pf-t--global--background--color--primary--default (resolves to gray-80 in dark mode).
Actual
Card body remains white. The PF Card's background-color: var(--pf-v6-c-card--BackgroundColor) doesn't pick up the dark mode token override.
Possible cause
react-grid-layout renders grid items with inline positioning styles that may create a context where PF's :root:where(.pf-v6-theme-dark) token overrides don't cascade into the Card's computed styles. The card header works because styles.css explicitly sets background: var(--pf-t--global--background--color--secondary--default) on .pf-v6-widget-grid-tile__header.
Workaround
None found yet. The previous issue #15 was closed with PR #19, but the card body dark mode regression persists in prerelease.6.
Screenshots
Card header is dark, body is white in dark mode:
(screenshots can be added)
Description
When using
WidgetLayoutwith PF v6 dark theme (pf-v6-theme-darkon<html>), the card body background remains white. The card header renders correctly with a dark background, but the<CardBody>area stays light.Individual PF components render correctly in dark mode outside of the widgetized-dashboard wrapper. The issue is specific to how cards render inside
react-grid-layoutgrid items.Environment
@patternfly/widgetized-dashboard: 1.0.0-prerelease.6@patternfly/react-core: 6.4.0@patternfly/patternfly: 6.4.0@storybook/addon-themes(withThemeByClassName,parentSelector: 'html')Steps to reproduce
withThemeByClassNameWidgetLayoutwith any widgetsExpected
Card body background should use
--pf-t--global--background--color--primary--default(resolves to gray-80 in dark mode).Actual
Card body remains white. The PF Card's
background-color: var(--pf-v6-c-card--BackgroundColor)doesn't pick up the dark mode token override.Possible cause
react-grid-layoutrenders grid items with inline positioning styles that may create a context where PF's:root:where(.pf-v6-theme-dark)token overrides don't cascade into the Card's computed styles. The card header works becausestyles.cssexplicitly setsbackground: var(--pf-t--global--background--color--secondary--default)on.pf-v6-widget-grid-tile__header.Workaround
None found yet. The previous issue #15 was closed with PR #19, but the card body dark mode regression persists in prerelease.6.
Screenshots
Card header is dark, body is white in dark mode:
(screenshots can be added)