Steps to replicate the issue (include links if applicable):
- Go to https://doc.wikimedia.org/codex/v2.0.0-rc.1/design-tokens/color.html
- Use the reading settings icon at the top right of the page to toggle between light and dark mode
What happens?:
- Toggling to dark mode should show dark mode variant of token values and previews
What should have happened instead?:
- All token values and previews stay in their light mode variants
Thank you @LucasWerkmeister for raising this in T383606#10788738.
This is happening because we're relying on a property returned by VitePress's useData composable, isDark, which worked when we were using VitePress's color mode switcher. Now that we've using our own system where the color mode is stored in localStorage, we should update the colors page to use that data.
Acceptance criteria
- Switching color mode also switches the color swatches and values on the Colors tokens page