feat: sandbox-only color scheme switch#838
Conversation
|
|
✅ Deploy Preview for histoire-examples-svelte3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-controls ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-vue3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a color scheme selector (Auto, Light, Dark) to the sandbox toolbar, allowing users to toggle between light, dark, and system-preferred themes. The changes include updates to the preview settings store, the sandbox rendering logic, and the UI components. A review comment identifies that the addition of these new buttons will cause existing E2E tests to fail because they expect a specific number of buttons in the toolbar; these tests will need to be updated to reflect the new UI structure.
| <button | ||
| v-for="option in colorSchemeOptions" | ||
| :key="option.value" | ||
| class="htw-flex-1 htw-px-3 htw-py-1.5 htw-rounded htw-flex htw-items-center htw-justify-center htw-gap-1.5 htw-cursor-pointer htw-text-sm" |
There was a problem hiding this comment.
Adding these 3 buttons to the background-popper will cause the existing E2E tests in examples/vue3/cypress/e2e/toolbar-background.cy.js to fail. The tests at lines 30, 41, and 51 explicitly check for a button count of 6 (the number of background presets). Please update the tests to account for the 3 new color scheme buttons.
histoire
@histoire/app
@histoire/controls
@histoire/plugin-nuxt
@histoire/plugin-percy
@histoire/plugin-screenshot
@histoire/plugin-svelte
@histoire/plugin-vue
@histoire/shared
@histoire/vendors
commit: |
1 participant
Why I started this
When I work on a component I usually want to test it in light, dark, and OS-preferred mode. The only way today is to flip the whole Histoire chrome — which is annoying because I lose my chrome preference every time.
So this PR decouples the sandbox color scheme from the chrome. Same UX I filed in #398 back in 2022 (with a PoC video).
What changed
colorScheme: 'auto' | 'light' | 'dark'onPreviewSettings, default'auto'usePreferredDark(); the chrome toggle only flips chromeHeads-up: sandbox used to follow chrome. Now it defaults to OS preference. If your chrome and OS match (most cases), nothing visibly changes.