styled-components#ThemeProvider TypeScript Examples

StoryWrapper = ({ children, proposals, slates, ballot }: any) => {
  return (
    <EthereumProvider>
      <MainContext.Provider
        value={{
          proposals: proposals || [],
          slates: slates || [],
          slatesByID: !!slates ? keyBy(slates, 'id') : {},
          proposalsByID: !!proposals ? keyBy(proposals, 'id') : {},
          currentBallot: ballot || currentBallot,
          onRefreshProposals: () => null,
          onRefreshSlates: () => null,
          onRefreshCurrentBallot: () => null,
        }}
      >
        <ThemeProvider theme={theme}>{children}</ThemeProvider>
      </MainContext.Provider>
    </EthereumProvider>
  );
}

function MyApp({ Component, pageProps }: AppProps) {
  /* niceeeee */
  console.log(`
       __            __        __  __             ______    ______  
      /  |          /  |      /  |/  |           /      \  /      \ 
  ____$$ |  ______  $$ |____  $$ |$$/   ______  /$$$$$$  |/$$$$$$  |
 /    $$ | /      \ $$      \ $$ |/  | /      \ $$ |  $$ |$$ \__$$/ 
/$$$$$$$ | $$$$$$  |$$$$$$$  |$$ |$$ | $$$$$$  |$$ |  $$ |$$      \ 
$$ |  $$ | /    $$ |$$ |  $$ |$$ |$$ | /    $$ |$$ |  $$ | $$$$$$  |
$$ \__$$ |/$$$$$$$ |$$ |  $$ |$$ |$$ |/$$$$$$$ |$$ \__$$ |/  \__$$ |
$$    $$ |$$    $$ |$$ |  $$ |$$ |$$ |$$    $$ |$$    $$/ $$    $$/ 
 $$$$$$$/  $$$$$$$/ $$/   $$/ $$/ $$/  $$$$$$$/  $$$$$$/   $$$$$$/  
  `);

  const preferredTheme = usePreferredTheme();

  return (
    <StyledEngineProvider injectFirst>
      <SWRConfig
        value={{
          fetcher,
          refreshInterval: 12000000,
          revalidateOnFocus: false,
        }}
      >
        <ThemeProvider theme={preferredTheme === "dark" ? Theme : LightTheme}>
          <GlobalStyles />
          <Component {...pageProps} />
        </ThemeProvider>
      </SWRConfig>
    </StyledEngineProvider>
  );
}

AllTheProviders: FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <SafeProvider
        loader={
          <>
            <Title size="md">Waiting for Safe...</Title>
          </>
        }
      >
        {children}
      </SafeProvider>
    </ThemeProvider>
  )
}

App = ({ Component, pageProps }) => {
  const router = useRouter()

  let defaultTheme
  if (process.browser) {
    defaultTheme = window.localStorage.getItem('35d_theme') || 'LIGHT'
  }
  const [theme, setTheme] = useState(defaultTheme)

  const toggleDarkMode = () => {
    if (process.browser) {
      window.localStorage.setItem('35d_theme', theme === 'LIGHT' ? 'DARK' : 'LIGHT')
    }
    theme === 'LIGHT' ? setTheme('DARK') : setTheme('LIGHT')
  }

  return (
    <ThemeProvider theme={theme === 'LIGHT' ? lightTheme : darkTheme}>
      <>
        <DarkModeContext.Provider value={{ theme, toggleDarkMode }}>
          <div className="w-full max-w-3xl mx-auto flex flex-wrap items-start overflow-hidden">
            <Navigation />
            <main className="w-full sm:w-3/4 ml-0 sm:ml-1/4 min-h-screen">
              <Breadcrumbs route={router.route} />
              <Component {...pageProps} className="w-full sm:w-3/4 sm:-mt-1 ml-0 sm:ml-1/4" />
            </main>
            <Footer />
          </div>
        </DarkModeContext.Provider>
      </>
    </ThemeProvider>
  )
}

DocViewer: FC<DocViewerProps> = (props) => {
  const { documents, theme } = props;

  if (!documents || documents === undefined) {
    throw new Error(
      "Please provide an array of documents to DocViewer.\ne.g. <DocViewer documents={[ { uri: 'https://mypdf.pdf' } ]} />"
    );
  }

  return (
    <AppProvider {...props}>
      <ThemeProvider
        theme={theme ? { ...defaultTheme, ...theme } : defaultTheme}
      >
        <Container
          id="react-doc-viewer"
          data-testid="react-doc-viewer"
          {...props}
        >
          <HeaderBar />
          <ProxyRenderer />
        </Container>
      </ThemeProvider>
    </AppProvider>
  );
}

App: React.FC = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <NavigationContainer>
        <StatusBar barStyle="light-content" translucent />
        <AppProvider>
          <View style={{ backgroundColor: '#312e38', flex: 1 }}>
            <Routes />
          </View>
        </AppProvider>
      </NavigationContainer>
    </ThemeProvider>
  );
}

App = () => {
  const [user, setUser] = useState<string | null>(null);

  return (
    <>
      <UserContext.Provider value={{ user, setUser }}>
        <ThemeProvider theme={theme}>
          <NormalizeStyles />
          <BaseStyles />
          <BrowserRouter>
            <PopupProvider>
              <Routes />
            </PopupProvider>
          </BrowserRouter>
          <ToastedContainer
            position="bottom-right"
            autoClose={5000}
            hideProgressBar
            newestOnTop
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            limit={5}
          />
        </ThemeProvider>
      </UserContext.Provider>
    </>
  );
}

/**
 *
 */
function Main() {
    return (
        <HashRouter>
            <ThemeProvider theme={DarkTheme}>
                <MuiThemeProvider theme={theme}>
                    <div>
                        <Route exact path="/" component={ImagePickerPage} />
                        <Route path="/settings" component={Settings} />
                    </div>
                </MuiThemeProvider>
            </ThemeProvider>
        </HashRouter>
    )
}

App: React.FC<{}> = (): ReactElement => {
  const [globalTheme, setGlobalTheme] = useState<Theme>(themes.light);
  const [isTutorialVisible, setIsTutorialVisible] = useState<boolean>(
    (localStorage.getItem('isFirstTime') ?? 'true') === 'true'
  );

  const onTutorialExit = () => {
    setIsTutorialVisible(false);
    localStorage.setItem('isFirstTime', 'false');
  };

  const onTutorialOpen = () => {
    setIsTutorialVisible(true);
  };

  return (
    <ThemeProvider theme={globalTheme}>
      <Home onHelpClick={onTutorialOpen} changeTheme={setGlobalTheme}></Home>
      <Tutorial onExit={onTutorialExit} isVisible={isTutorialVisible} />
    </ThemeProvider>
  );
}

export default function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <Routes />
        </QueryClientProvider>
      </ThemeProvider>
      <GlobalStyles />
    </>
  );
}

App: React.FC = () => {
  const themeType = useTypedSelector(({ Theme }) => Theme.type)
  const themeColors = THEME_COLORS[themeType || ThemeTypes.dark]

  return (
    <ThemeProvider theme={themeColors}>
      <GlobalStyles />
      <HashRouter basename={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path="/" component={DificultyChooser} />
          <Route exact path="/game" component={Game} />
        </Switch>
      </HashRouter>
    </ThemeProvider>
  )
}

describe('Announcements test', () => {
  it('Announcements basic', () => {
    cy.viewport(1000, 600);
    // mock notifications fetching
    cy.intercept({ method: 'get', url: '**/notifications**' }, (req) => {
      req.reply({
        statusCode: 200,
        body: NotificationsResponse,
      });
    }).as('NotificationsMockData');

    mount(
      <ThemeProvider theme={theme}>
        <Router>
        <QueryParamProvider ReactRouterRoute={Route}>
          <Announcements />
        </QueryParamProvider>
        </Router>
      </ThemeProvider>
    );

    // test that the notifications are rendered correctly
    cy.get('[data-testid="announcements-container"]').children().should('have.length', 3);

    // test that notifications can be removed
    cy.get('[data-testid="announcements-container"]').children().eq(2)
      .then($elem => 
        cy.wrap($elem).find('.icon.icon-times').click()
      );
    cy.get('[data-testid="announcements-container"]').children().should('have.length', 2);
  });
});

describe('A', () => {
  test('loads and displays greeting', async () => {
    const utils = render(
      <ThemeProvider theme={theme}>
        <A>TEST ANCHOR</A>
      </ThemeProvider>
    );
    const testA = utils.getByText('TEST ANCHOR');
    expect(testA).toBeTruthy();
  });
});

ReactDOM.render(
  <React.StrictMode>
    <NotificationsWithPortal />
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <SafeProvider
        loader={
          <>
            <Title size="md">Waiting for Safe...</Title>
            <Loader size="md" />
          </>
        }
      >
        <MessageContextProvider>
          <App />
        </MessageContextProvider>
      </SafeProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root"),
);

AppProvider: React.FC = ({ children }) => {
  const [themeMode, setThemeMode] = useState<string>('dark')
  const currentTheme = (theme as any)[themeMode]

  useEffect(() => {
    setThemeMode(localStorage.getItem('theme') || 'dark')
  }, [])

  useEffect(() => {
    localStorage.setItem('theme', themeMode)
  }, [themeMode])

  const toggleTheme = () => {
    setThemeMode((oldTheme) => {
      if (oldTheme === 'light') return 'dark'
      else return 'light'
    })
  }

  //  combine into one object for global ThemeContext state
  const value = useMemo(() => ({ themeMode, toggleTheme }), [themeMode])
  return (
    <ThemeContext.Provider value={value}>
      <ThemeProvider theme={currentTheme}>
        <GlobalStyles />
        {children}
      </ThemeProvider>
    </ThemeContext.Provider>
  )
}

App = () => {
  return (
    <ThemeProvider theme={Theme}>
      {/* Dynamically load metadata for HTML header */}
      <Helmet>
        <meta charSet="utf-8" />
        <title>{Configuration[METADATA]['title']}</title>
        <meta name="description" content={Configuration[METADATA]['description']} />
        <link rel="icon" href={`/${Configuration[METADATA]['favicon']}`} />
      </Helmet>
      <Router>
        <AppContainer>
          <Navbar />
          <Switch>
            <Route exact path={HOME_ROUTE}>
              <HomePage />
            </Route>
            <Route path={`${RELATED_ROUTE}/:articleId`}>
              <RelatedPage />
            </Route>
            <Route>
              <NotFoundPage />
            </Route>
          </Switch>
          <Footer />
        </AppContainer>
      </Router>
    </ThemeProvider>
  );
}

App: React.FC = () => {
    return (
        <ThemeProvider theme={theme}>
            <AppStyles className="App">
                <Banner />
                <BodyStyles className="body">
                    <Row>
                        <TrafficChartContainer title="Ping kube-system Pod" />
                    </Row>
                </BodyStyles>
            </AppStyles>
        </ThemeProvider>
    )
}

renderAccounts = () => {
  const memoryStore = new MemoryStore();

  return render(
    <MemoryRouter>
      <ThemeProvider theme={lightTheme}>
        <Api store={memoryStore}
          url={`ws://127.0.0.1:${SUBSTRATE_PORT}`}>
          <WaitForApi>
            <div>
              <AccountsApp basePath='/accounts'
                onStatusChange={() => { /* */
                }}/>
            </div>
          </WaitForApi>
        </Api>
      </ThemeProvider>
    </MemoryRouter>
  );
}

Providers: React.FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <UseWalletProvider
        chainId={config.chainId}
        connectors={{
          walletconnect: { rpcUrl: config.ankrEthereumRpc },
        }}
      >
        <PolkaBridgeProvider>
          <TransactionProvider>
            <FarmsProvider>
              <Router>
                <ModalsProvider>{children}</ModalsProvider>
              </Router>
            </FarmsProvider>
          </TransactionProvider>
        </PolkaBridgeProvider>
      </UseWalletProvider>
    </ThemeProvider>
  )
}

App = () => {
  return (
    <RecoilRoot>
      <ThemeProvider theme={defaultTheme}>
        <AppProvider>
          <Screen />
        </AppProvider>
        <GlobalStyle />
      </ThemeProvider>
    </RecoilRoot>
  )
}

describe('Age graph', () => {
  const wrapper = mount(
    <ThemeProvider theme={theme}>
      <Ages ages={data.ageRows} />
    </ThemeProvider>
  );
  it('displays an age graph', () => {
    setTimeout(() => {
      expect(wrapper.find('.recharts-bar-rectangle').length).toBeGreaterThan(0);
    }, 10);
  });
});

DxcAccordionGroup = ({
  defaultIndexActive,
  indexActive,
  disabled = false,
  onActiveChange,
  margin,
  children,
}: AccordionGroupPropsType): JSX.Element => {
  const colorsTheme = useTheme();
  const [innerIndexActive, setInnerIndexActive] = useState(defaultIndexActive ?? -1);
  const handlerActiveChange = useCallback(
    (index) => {
      indexActive ?? setInnerIndexActive((prev) => (index === prev ? -1 : index));
      !disabled && onActiveChange?.(index);
    },
    [disabled, indexActive, onActiveChange]
  );
  const contextValue = useMemo(
    () => ({ activeIndex: indexActive ?? innerIndexActive, handlerActiveChange, disabled }),
    [indexActive, innerIndexActive, handlerActiveChange, disabled]
  );

  return (
    <ThemeProvider theme={colorsTheme.accordion}>
      <AccordionGroupContainer margin={margin} disabled={disabled}>
        {(Array.isArray(children) ? children : [children])
          .filter((child) => child.type === AccordionGroupAccordion)
          .map((accordion, index) => (
            <AccordionGroupAccordionContext.Provider value={{ index, ...contextValue }}>
              {accordion}
            </AccordionGroupAccordionContext.Provider>
          ))}
      </AccordionGroupContainer>
    </ThemeProvider>
  );
}

App: React.FC = () => {
  const darkMode = useSelector((state: AppStore) => state.app.darkMode);
  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <GlobalStyles />
      <Home />
    </ThemeProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <SafeProvider loading={(
          <>
            <Title size="md">Waiting for Safe...</Title>
            <Loader size="md" />
          </>
        )}>
        <App />
      </SafeProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Root = (): React.ReactElement => (
  <ThemeProvider theme={styledTheme}>
    <Provider store={store}>
      <MuiThemeProvider theme={theme}>
        <ConnectedRouter history={history}>
          <Sentry.ErrorBoundary fallback={GlobalErrorBoundary}>
            <App>{wrapInSuspense(<AppRoutes />, <Loader />)}</App>
          </Sentry.ErrorBoundary>
        </ConnectedRouter>
      </MuiThemeProvider>
    </Provider>
  </ThemeProvider>
)

App: React.FC = () => {
  const [theme, setTheme] = usePeristedState<DefaultTheme>('theme', light);

  const toggleTheme = () => {
    setTheme(theme.title === 'light' ? dark : light);
  };

  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Routes toggleTheme={toggleTheme} />
        <GlobalStyle />
      </BrowserRouter>
    </ThemeProvider>
  );
}

Layout: FC<Props> = ({ children }) => {
  useEffect(() => {
    // generateAscii()
  }, [])

  return (
    <>
      <ThemeProvider theme={lightTheme}>
        <Header />
        <main>{children}</main>
        <footer>
          <Footer />
        </footer>
      </ThemeProvider>
    </>
  )
}

App: React.FC = function () {
  return (
    <Auth0Provider>
      <ProfileProvider>
        <PostProvider>
          <MobileViewProvider>
            <ThemeProvider theme={theme}>
              <GlobalStyle />
              <BrowserRouter>
                <Layout>
                  <Switch>
                    <Route exact path="/" component={JobsScreen} />
                    <Route path="/auth0/authorize" component={AuthorizeScreen} />
                    <Route path="/jobs" component={JobsScreen} />
                    <Route path="/talents" component={TalentsScreen} />
                    <Route path="/faq" component={FAQScreen} />
                    <Route path="/about" component={AboutUsScreen} />
                    <ProtectedRoute path="/posts/new" component={PostScreen} />
                    <ProtectedRoute path="/posts/edit" component={PostScreen} />
                    <ProtectedRoute path="/profile" component={ProfileScreen} />
                  </Switch>
                </Layout>
              </BrowserRouter>
            </ThemeProvider>
          </MobileViewProvider>
        </PostProvider>
      </ProfileProvider>
    </Auth0Provider>
  );
}