With Theme.js

[arnaudjnn]

I'm using styled-components with Next.js like this:

Theme.js

import { createGlobalStyle } from 'styled-components'

export const lightTheme = {
  bg: {
    primary: '#FFF',
    matt: '#FAFAFA',
  },
  text: {
    primary: '#0E2A3E',
    secondary: '#2f3037',
  },
  ...
}

export const darkTheme = {
  bg: {
    primary: '#050505',
    matt: '#121212'
  },
  text: {
    primary: '#FBFBFC',
    secondary: '#e3e4e8',
  },
  ...
}

export const GlobalStyle = createGlobalStyle`
  
  body {
    font-family: Geomanist, -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, sans-serif;
		-webkit-font-smoothing: antialiased;
		background-color: ${props => props.theme.bg.primary};
  } 
  ...

_app.jsx

class MyApp extends App {

  render() {
    const { Component, pageProps } = this.props
    return (
        <Providers>
          <Component {...pageProps} />
        </Providers>
    )
  }
}

export default MyApp

components/Providers.tsx

import React from 'react';
import useDarkMode from 'use-dark-mode';
import { ThemeProvider } from 'styled-components'
import { GlobalStyle, lightTheme, darkTheme } from './Theme';

export default ({ children }) => {
  const { value } = useDarkMode(false)
  const theme = value ? darkTheme : lightTheme

  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])
    
  const body = 
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {children}
    </ThemeProvider>

  // prevents ssr flash for mismatched dark mode
  if (!mounted) {
      return <div style={{ visibility: 'hidden' }}>{body}</div>
  }

  return body
}

.storybook/config.js

import { configure, addDecorator } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import { lightTheme, darkTheme } from '../components/Theme';

const themes = [darkTheme, lightTheme];
addDecorator(withThemesProvider(themes));
// automatically import all files ending in *.stories.tsx
configure(require.context('../stories', true, /\.stories\.tsx?$/), module);

I can pass darkTheme and lightTheme and works perfectly well but how to pass GlobalStyle to apply on all my stories, outside of the plugin ?