mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 09:37:22 +00:00
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:
parent
6e11d7de05
commit
49c85f1447
2 changed files with 28 additions and 0 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ const preview: Preview = {
|
|||
themes: {
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
'hc-light': 'hc-light',
|
||||
'hc-dark': 'hc-dark',
|
||||
},
|
||||
defaultTheme: 'light',
|
||||
parentSelector: 'body',
|
||||
|
|
|
|||
Loading…
Reference in a new issue