styled-components#ThemeProvider JavaScript Examples

App = () => (
  <Router>
    <HelmetProvider>
      <ThemeProvider theme={theme}>
        <Normalize />
        <GlobalStyles />
        <StateProvider>
          <LayoutDefault>
            <Routes />
          </LayoutDefault>
        </StateProvider>
      </ThemeProvider>
    </HelmetProvider>
  </Router>
)

StyledThemeProvider = props => {
  const [isDarkMode] = useDarkMode()

  return (
    <ThemeProvider theme={theme(isDarkMode)}>
      <GlobalStyle isDark={isDarkMode} />
      {props.children}
    </ThemeProvider>
  )
}

renderWithReduxAndRouter = ui => {
  return {
    ...render(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>{ui}</BrowserRouter>
        </ThemeProvider>
      </Provider>
    ),
    store,
  }
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <GlobalFonts />
      <ThemeProvider theme={theme}>
        <Suspense fallback={<div>Carregando...</div>}>
          <App />
        </Suspense>
      </ThemeProvider>
    </Router>
  </Provider>,
  document.getElementById("root")
);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root'),
);

function PollingLocator({
  data: {
    contentfulPage,
    allContentfulPagePollingPlaceLocator: { nodes },
  },
}) {
  return (
    <div>
      <Helmet title={contentfulPage.metaTitle} />
      <GlobalSiteStyles />
      <ThemeProvider theme={theme}>
        <Nav pageNodes={nodes} locale={contentfulPage.node_locale} />
        <PagePollingLocator settings={contentfulPage.contentType} />
      </ThemeProvider>
    </div>
  )
}

render() {
    const { Component, pageProps } = this.props;
    return (
      <Provider store={store}>
        <RemoteConfigProvider>
          <ThemeProvider theme={{ orbit: tokens }}>
            <>
              <GlobalStyle />
              <Component {...pageProps} />
            </>
          </ThemeProvider>
        </RemoteConfigProvider>
      </Provider>
    );
  }

render() {
    return (
      <TrackerProvider tracker={tracker}>
        <UserPreferenceContext.Provider value={this.props.userPreferences}>
          <ThemeProvider theme={this.props.userPreferences.theme}>
            <BrowserGlobalStyles />
            <AntdGlobalStyles />
            <AntdTableStyles />
            <AntdFormStyles />
            <AntdModalStyles />
            <AppClassStyles />
            <WalletConnectStyles />
            <Suspense fallback={null}>
              <ConnectedRouter history={history}>{routes}</ConnectedRouter>
            </Suspense>
          </ThemeProvider>
        </UserPreferenceContext.Provider>
      </TrackerProvider>
    );
  }

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <BrowserRouter>
        <Switch>
          <Route path='/' exact component={Login} />
          <Route path='/index' exact component={Login} />
          <Route path='/login' exact component={Login} />
          <Route path='/client' exact component={Client} />
          <Route path='/fi' exact component={Fi} />
          <Route path='/fi/newClient' exact component={NewClient} />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
      <GlobalStyles />
      <ThemeProvider theme={theme}>
          <Web3ReactProvider getLibrary={getLibrary}>
            <App />
          </Web3ReactProvider>
      </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

BlogGridPage = () => (
  <ThemeProvider theme={theme}>
    <Layout>
      <GlobalStyle />
      <SEO title="Blog | Layer5 - The Service Mesh Company" />
      <Navigation />
      <BlogPage />
      <Footer/>
    </Layout>
  </ThemeProvider>
)

function App() {
  console.log("starting");
  const [theme, toggleTheme, componentMounted] = useDarkMode();

  const themeMode = theme === 'light' ? blueTheme : darkTheme;
  console.log(themeMode);


  if (!componentMounted) {
    return <div />
  };


  return (
    <ThemeProvider theme={themeMode}>
      <>
        <GlobalStyles />
        <div>
          <Main theme={themeMode} />
        </div>
        <Toggle theme={theme} toggleTheme={toggleTheme} />
        <Footer theme={themeMode} />
      </>
    </ThemeProvider>
  );
}

storiesOf('Icon', module).add('Default', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(Icon, null);
}).add('Color', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(ThemeProvider, {
    theme: customTheme
  }, React.createElement(Icon, {
    size: text('Size', 'xlarge'),
    color: text('Color', 'attention')
  }));
}).add('Plain', function () {
  return React.createElement(Icons.Facebook, {
    color: "plain"
  });
}).add('Custom Theme', function () {
  var Icon = Icons[text('Icon', 'Accessibility')];

  if (!Icon) {
    return null;
  }

  return React.createElement(ThemeProvider, {
    theme: customTheme
  }, React.createElement(Icon, {
    size: text('Size', 'xlarge')
  }));
});

Layout = ({ children }) => {
  const { theme, toggleTheme } = useDarkMode();
  const currentTheme = theme === 'light' ? lightTheme : darkTheme;

  return (
    <ThemeProvider theme={currentTheme}>
      <>
        <GlobalStyles />
        <ThemeToggleContext.Provider value={{ theme, toggleTheme }}>
          <Navbar />
        </ThemeToggleContext.Provider>
        <LayoutWrapper>{children}</LayoutWrapper>
        <Footer />
      </>
    </ThemeProvider>
  );
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaProvider>
        <Navigation />
      </SafeAreaProvider>
    </ThemeProvider>
  )
}

function App() {
    const [theme, setTheme, componentMounted] = useDarkMode();

    if (!componentMounted) {
        return <div />;
    }

    return (
        <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
            <TodoContainer>
                <TodoTitleText>TO DO LIST</TodoTitleText>
                <SocialMedia />
                <UserInfo />
                <TodoInput />
                <Header />
                <TodoList />
                <ThemeChangeButton theme={theme} setTheme={setTheme} />
                <GlobalStyles />
            </TodoContainer>
            <LoadingOverlay />
            <SnackBar />
            <LoginDialog />
            <SignUpDialog />
        </ThemeProvider>
    );
}

export default function App({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

function App() {
  return (
    <ThemeProvider theme={chosenTheme}>
      <>
        <GlobalStyles />
        <div>
          <Main theme={chosenTheme} />
        </div>
      </>
    </ThemeProvider>
  );
}

export default function Layout({ children }) {
  const data = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
            }
          }
        }
      `
  );

  const localTheme = typeof window !== 'undefined' && window.localStorage.getItem('theme');
  const themeMode = (!localTheme || localTheme === 'light') ? lightTheme : darkTheme;

  return (
    <ThemeProvider theme={ themeMode }>
      <>
        <GlobalStyles/>
        <Container>
          <Header title={data.site.siteMetadata.title}/>
          {children}
        </Container>
      </>
    </ThemeProvider>
  )
}

wrapRootElement = ({ element }) => {
    return (
        <StateProvider>
            <ThemeProvider theme={theme}>
                <MediaContextProvider>
                    <SnackbarProvider>{element}</SnackbarProvider>
                </MediaContextProvider>
            </ThemeProvider>
        </StateProvider>
    )
}

render() {
    return (
      <ThemeProvider theme={theme}>
        <Router>
          <Layout>
            <Switch>
              <Route path="/markets" component={Markets} exact />
              <Route path="/reserve-overview/:id" component={ReserveOverview} exact />
              <Route path="/dashboard" component={Dashboard} exact />
              <Route path="/deposit" component={Deposit} exact />
              <Route path="/borrow" component={Borrow} exact />
              <Redirect from="/" to="/markets" />
            </Switch>
            <NotificationContainer />
          </Layout>
        </Router>
      </ThemeProvider>
    );
  }

function App() {
  return (
    <div>
      <ThemeProvider theme={globalStyles}>
        <BaseRouter />
      </ThemeProvider>
    </div>
  );
}

render() {
    const style = {borderTop: `4px solid ${this.state.titleBarColor}`};

    return (
      <ThemeProvider theme={{...commonTheme, scope: defaultTheme }}>
        <>
          <GlobalStyle />
          <div className="terminal-app" style={style}>
            {this.props.controlPipe && (
              <Terminal
                pipe={this.props.controlPipe}
                titleBarColor={this.state.titleBarColor}
                statusBarColor={this.state.statusBarColor}
                title={this.state.title}
                embedded={false} />
            )}
          </div>
        </>
      </ThemeProvider>
    );
  }

export default function Theme( props ) {
	const isDarkMode = false; // elementorAppConfig...

	let theme = props.default;

	if ( isDarkMode && props.dark ) {
		theme = {
			...props.default,
			...props.dark,
		};
	}

	return (
		<ThemeProvider theme={ theme }>
			{ props.children }
		</ThemeProvider>
	);
}

Layout = ({ children }) => {
  return (
    <main>
      <ThemeProvider theme={Theme}>
        <GlobalStyle />
        <Navbar />
        {children}
        <Footer />
      </ThemeProvider>
      <Script
        innerHTMLCode={`
            document.querySelector('.logo-btn').addEventListener('click', function (){
              document.querySelector('.nav-links').classList.toggle("show-nav");
            })
          `}
      />
    </main>
  )
}

export default function ({ children, theme }) {
  const customTheme = createMuiTheme(theme);
  return (
    <>
      <MuiThemeProvider theme={customTheme}>
        <ThemeProvider theme={customTheme}>{children}</ThemeProvider>
      </MuiThemeProvider>
    </>
  );
}

App = () => {

  const [theme, themeToggler, mountedComponent] = useDarkMode();
  const themeMode = theme === 'light' ? lightTheme : darkTheme;

  if(!mountedComponent) return <div/>
  return (
   < ThemeProvider theme={themeMode} >
     <>
     <GlobalStyles />
      <Router>
        <Route 
          path='/' 
          exact
          render={(props) => <HomePage {...props} theme={theme.toString()} themeToggler={themeToggler} />} 
        />
      </Router>
      </>
    </ThemeProvider>
  );
}

export default function Application(props) {
  const initialState = { ...props };
  if (!initialState.PageComponent) {
    initialState.PageComponent = router(location.pathname).pop();
  }

  const [state, dispatch] = React.useReducer(reducer, initialState);

  const contextValue = {
    ...state,
    dispatch,
  };

  const { PageComponent } = state;

  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
        <ApplicationContext.Provider value={contextValue}>
          <GlobalStyle />
          <Chrome>
            <PageContainer>
              <Nav />
              <PageComponent />
              <CommitteeDisclaimer />
            </PageContainer>
          </Chrome>
        </ApplicationContext.Provider>
      </ThemeProvider>
    </React.Fragment>
  );
}

App = () => {
    // Custom hook for persistent darkmode
    const [theme, setTheme] = useDarkMode();

    return (
        <ThemeProvider
            theme={{
                ...theme,
                setTheme: () => {
                    setTheme((state) =>
                        state.id === "light" ? DarkTheme : LightTheme
                    );
                },
            }}>
            <GlobalStyle />
            <Router>
                <Switch>
                    <Route path='/' exact component={Home} />
                    <Route path='/user/:id' component={UserProfile} />
                </Switch>
            </Router>
        </ThemeProvider>
    );
}