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 = [