Fix DataTable's light-mode clash with the fixed-dark pagination-filters demo shell

[Abidoyesimze]

Summary

The demo page hardcodes bg-gray-900 with no dark:/light branch of its own, while DataTable renders bg-white dark:bg-slate-900/40. In light theme this produces a stark white table card floating inside an always-dark page shell, undermining the recent migration's goal of consistent dark-mode pairing.

Affected files

• src/app/demo/pagination-filters/page.tsx
• src/components/ui/DataTable.tsx

Tasks

• Give the demo page shell proper light/dark variants instead of a hardcoded dark background, so DataTable's own theming reads correctly in both themes.

Acceptance criteria

• Scope is limited to the files listed (or agreed alternatives in the PR).
• Change is verifiable: tests, screenshots, or written QA steps in the PR.
• No behavior regressions in related user flows.
• No new duplicate abstractions without a one-line rationale in the PR.

Suggested labels

bug, css, responsive

Notes

Sourced from the 2026-08 round-4 follow-up audit of the frontend codebase at commit 201f5b0, run after the round-3 batch (#684-#743) was substantially resolved. Verified against current file content at time of writing.

[Venrable18]

@Venrable18 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Good day maintainer..

I’m a full-stack and test integration developer…. 

Please assign this task to me…



ℹ️ Repo Maintainers: To accept this application, review their application or assign @Venrable18 to this issue.

[peternnadi1999]

@peternnadi1999 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi, I’d like to work on this issue. I can update the pagination-filters demo shell to use proper light/dark Tailwind variants instead of a hardcoded dark background, allowing the existing DataTable theme to render consistently in both modes.

I’ll keep the changes scoped to the affected files, preserve the current table behavior and responsive layout, and verify the result in both light and dark themes. I’ll also provide clear QA steps or screenshots in the PR to demonstrate that the styling issue is resolved without introducing regressions.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @peternnadi1999 to this issue.

[HEMOGEE]

@HEMOGEE has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @HEMOGEE to this issue.

[nightmacfred-hue]

@nightmacfred-hue has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer! I'm a senior developer with experience building high-quality, production-ready software. I'd love to take on this issue and deliver a clean, well-tested solution that aligns with the project's standards. Please assign it to me—I'm ready to get started and contribute effectively.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @nightmacfred-hue to this issue.

[drips-wave]

Congratulations, @Ugooweb! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Ugooweb: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊