diff --git a/.storybook/main.js b/.storybook/main.js
index ab7f9c40..8ef6cf34 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,12 +3,10 @@ module.exports = {
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
- '@storybook/preset-create-react-app',
- {
- name: "@storybook/addon-docs",
- options: {
- configureJSX: true,
- },
- },
+ '@storybook/addon-docs',
+ 'storybook-addon-styled-component-theme/dist/register',
],
-};
+ presets: [
+ '@storybook/preset-create-react-app',
+ ]
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 00000000..ae1b4941
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,47 @@
+
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 00000000..dd25eb0c
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,7 @@
+import { addDecorator } from '@storybook/react'
+import { withThemesProvider } from 'storybook-addon-styled-component-theme'
+
+import { lightTheme, darkTheme } from '../src/features/Theme/config'
+
+const themes = [darkTheme, lightTheme]
+addDecorator(withThemesProvider(themes))
diff --git a/package.json b/package.json
index 4fdba62a..54a5925e 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
"gzipper": "^3.7.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.7",
+ "storybook-addon-styled-component-theme": "^1.3.0",
"ts-loader": "^7.0.5",
"typescript": "^3.9.3"
},