Datagrid Background Styles Broken in Dark Mode

[batudmr]

Datagrid Background Styles Broken in Dark Mode

The background styles of the datagrid and code snippets are not updating correctly when switching to dark mode on the documentation website. While the backgrounds are compatible with Clarity light and PHS themes, they remain unchanged in dark mode.

To Reproduce

Checkout current documentation website.

Steps to reproduce the behavior:

1. Go to Datagrid documentation page
2. Switch the theme to dark mode.
3. Observe that the datagrid and code snippet backgrounds do not update as expected for dark mode.

Expected behavior

The background styles of the datagrid and code snippets should update to match the dark mode theme, consistent with how Angular Clarity handles dark mode. The PHS theme appears to apply styles correctly only in light mode, potentially due to missing integration with the cds-theme for dark mode.

Versions

App

• Angular: 17.4.0
• Clarity: 17.2.1
• Clarity-Addons: 17.4.0

Device:

• Type: Macbook Pro
• OS: MacOS
• Browser : Chrome
• Version 127

[martinbrom]

Hi @batudmr, thanks for reporting this. I linked a PR that fixes the code snippet styling for dark mode, and then a follow-up version of Clarity Addons in the next few days which will resolve the styling issues in the datagrid.

[martinbrom]

So, the snippet styling is fixed on the website now, and the explicit white color of datagrid rows has been fixed in #2262 (available in version 17.4.1).

In regards to general dark theme support, we've created #2261 and are welcoming contributions :)