How it works
Tokens are CSS variables defined twice: on :root for light and on html.dark for dark. Tailwind classes read the variables, so the same markup works in both themes. Use the switch in the header to see every page flip.
The site starts in dark. The admin panel starts in the system setting.
Always-dark panels
A panel that stays dark in both themes, like a code block or the product window, gets the light-scale class reset so its gray text keeps its contrast.
bg-surface
Do
Use theme tokens for page chrome.
bg-white
Don’t
Don’t hard-code white or black.