oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

added dark mode toggle button with switch class

Browse Source
This commit is contained in:
EnzoVezzaro 2022-07-07 10:23:38 -04:00
parent f2407016de
commit a51814a1f5
2 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.storybook/preview-body.html Normal file
View File

@ -0,0 +1 @@
<body id="story-body"></body>

28
.storybook/preview.js
View File

@ -1,7 +1,17 @@
import '@oceanprotocol/typographies/css/ocean-typo.css' import '@oceanprotocol/typographies/css/ocean-typo.css'
import '../src/stylesGlobal/styles.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: { backgrounds: {
default: 'light', default: 'light',
values: [ 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 (
<ThemeProvider theme={globalTypes}>
<Story {...context} />
</ThemeProvider>
)
}
export const decorators = [withThemeProvider]