Change Details

**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 `sessionStorage`, 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

**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

**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 `session`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