The library supports dark mode. The docs site does not. colorMode, useColorMode, dark theme overrides and tests all ship in src/, but reactdatatable.com is light only, so there is no way to see any of it.
Three layers:
1. Code blocks. Astro/Shiki has a config setting for this. Currently single-theme:
shikiConfig: { theme: "catppuccin-macchiato" }Switching to themes: { light, dark } emits both palettes as CSS variables (--shiki-dark). Astro does not switch between them, we add the CSS. Two things conflict today: global.css hardcodes bg-gray-950 over code blocks, and Demo.astro / CodeBlock.astro both pass theme="catppuccin-macchiato" defaultColor={false} straight to <Code>, bypassing the config.
2. Site chrome. Body, sidebar, prose, tables, prop tables. Hand-written dark: variants. Tailwind is already installed, nothing in global.css uses it yet, and body is hardcoded bg-white text-gray-900.
3. Demos. Already handled by the library, just not wired up. LiveDemo.tsx hardcodes colorMode="light". ThemedDataTable is a pure passthrough today even though it exists to be the seam for this.
Toggle contract is already fixed by the library. useColorMode reads localStorage.theme, then html.dark, then prefers-color-scheme, and watches all three. So a header toggle writing localStorage.theme and toggling html.dark makes every demo follow along with no library change, and ThemedDataTable can default colorMode to system.
Needs an inline script in Layout.astro head to set the class before first paint, otherwise dark loads with a white flash.
Note ThemesDemo.tsx already has dark: classes and a label reading "follows the page toggle above", pointing at a toggle that was never built.
The library supports dark mode. The docs site does not.
colorMode,useColorMode, dark theme overrides and tests all ship insrc/, but reactdatatable.com is light only, so there is no way to see any of it.Three layers:
1. Code blocks. Astro/Shiki has a config setting for this. Currently single-theme:
Switching to
themes: { light, dark }emits both palettes as CSS variables (--shiki-dark). Astro does not switch between them, we add the CSS. Two things conflict today:global.csshardcodesbg-gray-950over code blocks, andDemo.astro/CodeBlock.astroboth passtheme="catppuccin-macchiato" defaultColor={false}straight to<Code>, bypassing the config.2. Site chrome. Body, sidebar, prose, tables, prop tables. Hand-written
dark:variants. Tailwind is already installed, nothing inglobal.cssuses it yet, andbodyis hardcodedbg-white text-gray-900.3. Demos. Already handled by the library, just not wired up.
LiveDemo.tsxhardcodescolorMode="light".ThemedDataTableis a pure passthrough today even though it exists to be the seam for this.Toggle contract is already fixed by the library.
useColorModereadslocalStorage.theme, thenhtml.dark, thenprefers-color-scheme, and watches all three. So a header toggle writinglocalStorage.themeand togglinghtml.darkmakes every demo follow along with no library change, andThemedDataTablecan defaultcolorModetosystem.Needs an inline script in
Layout.astrohead to set the class before first paint, otherwise dark loads with a white flash.Note
ThemesDemo.tsxalready hasdark:classes and a label reading "follows the page toggle above", pointing at a toggle that was never built.