diff --git a/.storybook/.parcelrc b/.storybook/.parcelrc index 81677b70840..dff0cb116b8 100644 --- a/.storybook/.parcelrc +++ b/.storybook/.parcelrc @@ -6,6 +6,7 @@ "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [ "@parcel/transformer-js", "@parcel/transformer-react-refresh-wrap" - ] + ], + "raw:*": ["@parcel/transformer-raw"] } } diff --git a/.storybook/logo-dark.svg b/.storybook/logo-dark.svg new file mode 100644 index 00000000000..69d1e2c28da --- /dev/null +++ b/.storybook/logo-dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/.storybook/logo.svg b/.storybook/logo.svg new file mode 100644 index 00000000000..53f81fc1587 --- /dev/null +++ b/.storybook/logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/.storybook/preview.js b/.storybook/preview.js index 9350311aa7a..ee79eb47c03 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -34,7 +34,17 @@ export const parameters = { source: { type: 'code' } - } + }, + darkMode: { + light: { + brandTitle: 'React Spectrum', + brandImage: new URL('raw:logo.svg', import.meta.url).toString() + }, + dark: { + brandTitle: 'React Spectrum', + brandImage: new URL('raw:logo-dark.svg', import.meta.url).toString() + } + }, }; export const decorators = [