diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 000000000..6483843f4
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1 @@
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 307487afd..5504e6fbc 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,17 @@
import '@oceanprotocol/typographies/css/ocean-typo.css'
import '../src/stylesGlobal/styles.css'
+import { ThemeProvider } from 'styled-components'
-export const parameters = {
+export const globalTypes = {
+ theme: {
+ name: 'Ocean Market',
+ description: 'Global theme for Ocean Market',
+ defaultValue: 'light',
+ toolbar: {
+ icon: 'circlehollow',
+ items: ['light', 'dark']
+ }
+ },
backgrounds: {
default: 'light',
values: [
@@ -17,3 +27,19 @@ export const parameters = {
}
}
}
+
+const withThemeProvider = (Story, context) => {
+ const theme = context.globals.theme
+
+ var storyBody = document.getElementById('story-body')
+ theme === 'dark'
+ ? storyBody.classList.add('dark')
+ : storyBody.classList.remove('dark')
+
+ return (
+
+
+
+ )
+}
+export const decorators = [withThemeProvider]