search

UX-and-I / storybook-design-token

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975
MIT License
646 stars 123 forks source link

Feature Request: Color Scheme support #14

Open gossi opened 4 years ago

gossi commented 4 years ago

I do have themes, that I want to swap in storybook and these themes do have different color schemes. Here is what I might look like:

:root {
    --background: gray;
}

@media (prefers-color-scheme: light) {
    :root {
        --background: white;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #333;
    }
}

.themeName-dark {
    --background: #333;
}

Color schemes can come in with media query support or custom classes.

Is there a way to make them been listed?

gossi commented 4 years ago

More info on this: https://gos.si/blog/say-hello-to-theemo-the-yordle-powered-theme-automator/