We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 ?
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I'm using styled-components with Next.js like this:
Theme.js
_app.jsx
components/Providers.tsx
.storybook/config.js
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 ?
The text was updated successfully, but these errors were encountered: