From a51814a1f53832ae3e2a41e5d8ba88294a8b3355 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Thu, 7 Jul 2022 10:23:38 -0400 Subject: [PATCH] added dark mode toggle button with switch class --- .storybook/preview-body.html | 1 + .storybook/preview.js | 28 +++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 .storybook/preview-body.html 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]