theme-ui#ThemeProvider JavaScript Examples

The following examples show how to use theme-ui#ThemeProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: invert-wrapper.jsx    From MDXP with MIT License 6 votes vote down vote up 
InvertWrapper = ({children}) => {
  const {theme} = useThemeUI();

  return (
    <ThemeProvider theme={{colors: {background: theme.colors.text, text: theme.colors.background}}}>
      {children}
    </ThemeProvider>
  );
}
Example #2
Source File: Root.js    From NoteMaster with GNU General Public License v3.0 6 votes vote down vote up 
Root = ({ store, history }: Props) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <ThemeProvider theme={theme}>
        <Routes />
      </ThemeProvider>
    </ConnectedRouter>
  </Provider>
)
Example #3
Source File: _app.js    From cards with MIT License 6 votes vote down vote up 
render () {
    const { Component, pageProps } = this.props
    return (
      <ThemeProvider theme={theme}>
        <GlobalStylesheet />
        <AppContextProvider>
          <Component {...pageProps} />
        </AppContextProvider>
      </ThemeProvider>
    )
  }
Example #4
Source File: index.js    From docz-theme-extended with MIT License 6 votes vote down vote up 
Theme = ({children}) => {
  const config = useConfig();
  return (
    <ThemeProvider theme={config.themeConfig}>
      <ComponentsProvider components={componentsMap}>
        <Styled.root>{children}</Styled.root>
      </ComponentsProvider>
    </ThemeProvider>
  );
}
Example #5
Source File: theme-wrapper.jsx    From MDXP with MIT License 5 votes vote down vote up 
ThemeWrapper = ({newTheme, children}) => (
  <ThemeProvider theme={newTheme}>
    {children}
  </ThemeProvider>
)
Example #6
Source File: deck.jsx    From MDXP with MIT License 5 votes vote down vote up 
Deck = ({
  children,
  theme = defaultTheme,
  Layout = DefaultLayout,
  layoutOptions = {},
  components = {},
  keyboardTarget,
  touchTarget,
  slideNavigation = true,
  modeNavigation = true,
  ...props
}) => {
  // Setup theme
  if (Array.isArray(theme)) {
    theme = merge(baseTheme, ...theme);
  } else {
    theme = merge(baseTheme, theme);
  }

  // Setup default layout
  const DefaultLayoutWrapper = props => {
    props = {...layoutOptions, ...props}; // Shallow merging!
    return (<Layout {...props} />);
  };

  return (
    <React.Fragment>
      {ReactDOM.createPortal((<GoogleFont theme={theme} />), document.head)}

      <ThemeProvider
        theme={theme}
        components={{
          ...defaultComponents,
          DefaultLayout: DefaultLayoutWrapper,
          ...components,
          wrapper: wrapper(
            DefaultLayoutWrapper,
            {...props, keyboardTarget, touchTarget, slideNavigation, modeNavigation}
          )
        }}
      >
        {children}
      </ThemeProvider>
    </React.Fragment>
  );
}
Example #7
Source File: index.js    From MDXP with MIT License 5 votes vote down vote up 
MDXPDemo = ({code, onOuterClick, show=false}) => {
  const ref = useRef(null);
  useLayoutEffect(() => {
    if (show && ref.current) {
      ref.current.focus();
    }
  });

  if (show) {
    return (
      <div
        style={{
          position: 'fixed',
          width: '100vw',
          height: '100vh',
          backgroundColor: 'rgba(50,50,50,.5)',
          bottom: '0',
          right: '0',
          zIndex: 1
        }}
        onClick={onOuterClick}
        onKeyDown={e => {
          if (e.keyCode === 27) {
            onOuterClick(e);
          }
        }}
      >
        <div
          tabIndex={-1}
          ref={ref}
          style={{
            position: 'relative',
            top: '50%',
            transform: 'translateY(-50%)',
            width: '70vw',
            height: '40vw',
            margin: 'auto'
          }}
          onClick={e => e.stopPropagation()}
        >
          <ThemeProvider theme={defaultTheme}>
            <MDX
              components={{
                ...mdxpComponents,
                Step,
                wrapper: wrapper(
                  mdxpComponents.BlankLayout,
                  {keyboardTarget: ref, modeNavigation: false},
                  mdxpComponents
                )
              }}
            >
              {code}
            </MDX>
          </ThemeProvider>
        </div>
      </div>
    );
  }
  return null;
}
Example #8
Source File: _app.js    From nextjs-prismic-blog-starter with MIT License 5 votes vote down vote up 
function MyApp({Component, pageProps}) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}
Example #9
Source File: _app.js    From developer-portal with Apache License 2.0 5 votes vote down vote up 
render() {
    const { Component, pageProps } = this.props;
    return (
      <ThemeProvider theme={theme}>
        <Global
          styles={css`
            @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;700&display=swap');

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Bold.woff2') format('woff2'),
                url('/fonts/FTBase-Bold.woff') format('woff');
              font-weight: bold;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Regular.woff2') format('woff2'),
                url('/fonts/FTBase-Regular.woff') format('woff');
              font-weight: normal;
              font-style: normal;
            }

            @font-face {
              font-family: 'FT Base';
              src: url('/fonts/FTBase-Medium.woff2') format('woff2'),
                url('/fonts/FTBase-Medium.woff') format('woff');
              font-weight: 500;
              font-style: normal;
            }

            html,
            body {
              background: 'red';
            }
          `}
        />
        <TinaProvider cms={this.cms}>
          <TinacmsGithubProvider
            onLogin={enterEditMode}
            onLogout={exitEditMode}
            error={pageProps.error}
          >
            <TinaStyles />
            <Component {...pageProps} />
          </TinacmsGithubProvider>
        </TinaProvider>
      </ThemeProvider>
    );
  }
Example #10
Source File: Index.js    From Easy-Annotator with GNU General Public License v3.0 4 votes vote down vote up 
render() {
    const { listrois, selected } = this.state;
    return (
      <ThemeProvider theme={this.state.currentTheme}>
        <Layout>
          <Header>
            <Select
              id="theme"
              name="theme"
              defaultValue={this.state.currentTheme}
              sx={{
                px: 2,
                mx: 2,
              }}
              onChange={(e) => {
                console.log(e.target.value);
                this.setState({
                  currentTheme: presets[e.target.value],
                });
                cookie.save("theme", presets[e.target.value], { path: "/" });
              }}
            >
              {Object.keys(presets).map((key) => (
                <option
                  sx={{ bg: "background" }}
                  key={key}
                  children={key}
                ></option>
              ))}
            </Select>
            <VideoUploadForm refresh={this.refreshCanvas} />
          </Header>
          <Body>
            <Content>
              <Canvas
                ref={this.canvasRef}
                listrois={listrois}
                addNewRoi={this.addNewRoi}
                onFPSCallback={this.onFPSCallback}
                onDurationCallback={this.onDurationCallback}
                onTrackingCallback={this.onTrackingCallback}
                selected={selected}
                disableRois={this.disableRois}
              />
            </Content>

            <Panel>
              <Flex>
                <Box width={1 / 2} mx={2}>
                  <Menu id="dropdown-roi">
                    <MenuButton
                      sx={{
                        bg: "primary",
                        my: 2,
                        color: "background",
                        border: "0",
                        "&:hover": {
                          bg: "highlight",
                          border: "0",
                        },
                        "&:visited": {
                          bg: "primary",
                        },
                        "&:active": {
                          bg: "primary",
                        },
                        "&:visited": {
                          bg: "primary",
                        },
                      }}
                    >
                      <FontAwesomeIcon icon={faPen} />
                      <span aria-hidden>▾</span>
                    </MenuButton>
                    <MenuList
                      className="slide-down"
                      sx={{
                        "&[data-reach-menu-items]": {
                          color: "background",
                          bg: "primary",
                          border: "0",
                          borderRadius: 4,
                          animation: "slide-down 0.2s ease",
                        },
                      }}
                    >
                      <MenuItem
                        onSelect={() =>
                          this.canvasRef.current.addROI("Benign", false)
                        }
                        sx={styledDropdown}
                      >
                        Benign
                      </MenuItem>
                      <MenuItem
                        onSelect={() =>
                          this.canvasRef.current.addROI("Suspicious", false)
                        }
                        sx={styledDropdown}
                      >
                        Suspicious
                      </MenuItem>
                      <MenuItem
                        onSelect={() =>
                          this.canvasRef.current.addROI("Cancerous", false)
                        }
                        sx={styledDropdown}
                      >
                        Cancerous
                      </MenuItem>
                      <MenuItem
                        onSelect={() =>
                          this.canvasRef.current.addROI("Unknown", false)
                        }
                        sx={styledDropdown}
                      >
                        Unknown
                      </MenuItem>
                      <MenuItem
                        onSelect={() =>
                          this.canvasRef.current.addROI("Custom", true)
                        }
                        sx={styledDropdown}
                      >
                        Custom
                      </MenuItem>
                    </MenuList>
                  </Menu>
                </Box>
                <Button
                  onClick={this.downloadRois}
                  width={1 / 2}
                  mx={2}
                  my={2}
                  ml={5}
                  sx={{
                    color: "background",
                    "&:hover": {
                      bg: "highlight",
                      border: 0,
                    },
                  }}
                >
                  <FontAwesomeIcon icon={faDownload} />
                </Button>
              </Flex>
              <LayerPanel
                listrois={listrois}
                selected={selected}
                onEyeClick={this.onEyeClick}
                setSelected={this.setSelected}
                onDeleteClick={this.deleteRoi}
              />
            </Panel>
          </Body>
          <Footer>© IBM {new Date().getFullYear()}</Footer>
        </Layout>
      </ThemeProvider>
    );
  }