feat(storybook): add high contrast light and dark theme options (#16923)

Signed-off-by: Vaclav Vancura <commit@vancura.dev>
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Václav Vančura 2026-04-02 09:47:58 +02:00 committed by GitHub
parent 6e11d7de05
commit 49c85f1447
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 0 deletions

View file

@ -15,6 +15,16 @@ body.dark {
color: #fff;
}
body.hc-light {
background-color: #fff;
color: #000;
}
body.hc-dark {
background-color: #000;
color: #fff;
}
/* Docs page story preview containers */
body.light .docs-story {
background-color: #f6f6f6;
@ -24,6 +34,14 @@ body.dark .docs-story {
background-color: #222222;
}
body.hc-light .docs-story {
background-color: #fff;
}
body.hc-dark .docs-story {
background-color: #000;
}
/* Storybook's canvas background */
body.light .sb-show-main {
background-color: #f6f6f6;
@ -32,3 +50,11 @@ body.light .sb-show-main {
body.dark .sb-show-main {
background-color: #222222;
}
body.hc-light .sb-show-main {
background-color: #fff;
}
body.hc-dark .sb-show-main {
background-color: #000;
}

View file

@ -35,6 +35,8 @@ const preview: Preview = {
themes: {
light: 'light',
dark: 'dark',
'hc-light': 'hc-light',
'hc-dark': 'hc-dark',
},
defaultTheme: 'light',
parentSelector: 'body',