feat(docs): synchronize site and demo color modes

[dajiaohuang]

Summary

Fixes #1381. Adds a Light / Dark / System selector to the documentation header, initializes the page theme before first paint, and synchronizes the site, code blocks, and demos through the existing localStorage.theme contract. System mode follows OS changes; explicit preferences persist across navigation and synchronize between tabs.

The browser check also exposed a hydration bug in useColorMode: a dark client could retain the server's light inline styles because its initial state was already dark. Initialize consistently with the server, then apply the detected preference in the effect. A regression test fails before this change and passes afterward. Demo wrappers default to system mode while preserving explicit demo overrides.

Type of change

• Bug fix
• New feature
• Breaking change
• Documentation / example update
• Refactor / internal cleanup

Checklist

• I read CONTRIBUTING.md
• I agree to the Code of Conduct
• Tests pass (npm test)
• No TypeScript errors (npm run typecheck)
• I have updated docs or examples if needed

How to test

1. Run npm run docs:build, then preview the built site.
2. Open /docs/themes/ with a dark OS preference and no saved theme. The page and hydrated tables should both be dark.
3. Select Light, reload, then return to System and change the OS preference. Check the table and code-block palettes along with the page.
4. Change the selection in another tab, visit the homepage and a recipe demo, and use the selector at a 390px viewport.

Validation: 719 tests passed; lint and typecheck passed; library build passed using Git Bash for the existing POSIX build command on Windows; documentation build produced 55 pages. Browser acceptance covered 14 checks including first hydration, persistence, OS changes, cross-tab synchronization, homepage/recipe/headless demos, and mobile controls, with no JavaScript runtime errors.

The mobile check covers the new control and theme behavior. Wide table/reference content is not claimed to be overflow-free.

[netlify]

✅ Deploy Preview for react-data-table-component ready!

Name	Link
🔨 Latest commit	a010b82
🔍 Latest deploy log	https://app.netlify.com/projects/react-data-table-component/deploys/6aa79b3dd5920c00082637b0
😎 Deploy Preview	https://deploy-preview-1393--react-data-table-component.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jbetancur]

Thanks @dajiaohuang It's been a busy week but I will have a look this weekend

[jbetancur]

This is great @dajiaohuang! However, I think it still needs some polishing.

http://localhost:4399/docs/conditional-styles
the table cels are washed out

http://localhost:4399/docs/selection
info section is a bit washed out

Also there is a strange flashing of tables when a page is loaded in dark mode

There are also several other demo controls that might not be inheriting the theme.

[dajiaohuang]

Follow-up pushed in a010b82.

• Conditional-styles rows/cells now use dark-aware CSS variables, including readable muted values and status backgrounds.
• Selection feedback and controls have dark-mode contrast states.
• Demo surfaces remap remaining light Tailwind utilities in dark mode.
• System color-mode resolution now uses an isomorphic layout effect, so hydrated tables apply the pre-paint html.dark marker before the first browser paint.

Validation: npm test (719 tests), npm run typecheck, npm run build, npm run docs:build, and targeted Prettier checks pass. The docs build reports the existing Pagefind note that /docs/ has no outer html element. Remote CI/deploy checks will run against a010b82.