@chakra-ui/react#theme JavaScript Examples

The following examples show how to use @chakra-ui/react#theme. 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: ces.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
colors = {
  ...theme.colors,
  brand: {
    50: "#E1EEFA",
    100: "#BAD3F3",
    200: "#8BB9F2",
    300: "#68A2E4",
    400: "#418EDE",
    500: "#247BCE",
    600: "#0066B3",
    700: "#004081",
    800: "#082348",
    900: "#050C1B",
  },
}
Example #2
Source File: ces.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
shadows = {
  ...theme.shadows,
  paper: `
    rgba(32, 47, 71, 0.06) 0px 0.8125rem 0.4375rem -0.4375rem,
    rgba(32, 47, 71, 0.08) 0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.08) -0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.06) 0px 0.1875rem 0.375rem 0px,
    rgba(32, 47, 71, 0.04) 0px -0.25rem 0.5rem -0.125rem,
    rgba(32, 47, 71, 0.03) 0px 0px 0px 0.0625rem;
  `,
  brand: `0 0.25rem 1.25rem rgba(0, 102, 179, 0.2)`,
}
Example #3
Source File: ces.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
ces = {
  ...theme,
  themeName: "ces",
  data,
  colors,
  fonts,
  shadows,
  gradients,
  logos,
}
Example #4
Source File: devoxx4kids.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
colors = {
  ...theme.colors,
  brand: {
    50: "#fff1dd",
    100: "#f9dcb5",
    200: "#f3c98a",
    300: "#ecb85d",
    400: "#e7aa32",
    500: "#cd8418",
    600: "#a05d10",
    700: "#733b09",
    800: "#451e01",
    900: "#1b0600",
  },
}
Example #5
Source File: devoxx4kids.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
shadows = {
  ...theme.shadows,
  paper: `
    rgba(32, 47, 71, 0.06) 0px 0.8125rem 0.4375rem -0.4375rem,
    rgba(32, 47, 71, 0.08) 0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.08) -0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.06) 0px 0.1875rem 0.375rem 0px,
    rgba(32, 47, 71, 0.04) 0px -0.25rem 0.5rem -0.125rem,
    rgba(32, 47, 71, 0.03) 0px 0px 0px 0.0625rem;
  `,
  brand: `0 0.25rem 1.25rem rgba(0, 102, 179, 0.2)`,
}
Example #6
Source File: devoxx4kids.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
devoxx4kids = {
  ...theme,
  themeName: "devoxx4kids",
  data,
  colors,
  fonts,
  shadows,
  gradients,
  logos,
}
Example #7
Source File: meetups.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
colors = {
  ...theme.colors,
  brand: {
    50: "#DFF9F8",
    100: "#BDEFEA",
    200: "#97E5DD",
    300: "#71DBD1",
    400: "#51D4C6",
    500: "#2EB8A9",
    600: "#09AA99",
    700: "#008073",
    800: "#044A42",
    900: "#011B17",
  },
}
Example #8
Source File: meetups.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
shadows = {
  ...theme.shadows,
  paper: `
    rgba(32, 47, 71, 0.06) 0px 0.8125rem 0.4375rem -0.4375rem,
    rgba(32, 47, 71, 0.08) 0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.08) -0.625rem 0.25rem 0.4375rem -0.5rem,
    rgba(32, 47, 71, 0.06) 0px 0.1875rem 0.375rem 0px,
    rgba(32, 47, 71, 0.04) 0px -0.25rem 0.5rem -0.125rem,
    rgba(32, 47, 71, 0.03) 0px 0px 0px 0.0625rem;
  `,
  brand: `0 0.25rem 1.25rem rgba(0, 167, 150, 0.2)`,
}
Example #9
Source File: meetups.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
meetups = {
  ...theme,
  themeName: "",
  data,
  colors,
  fonts,
  shadows,
  gradients,
  logos,
}
Example #10
Source File: prism.js    From benjamincarlson.io with MIT License 6 votes vote down vote up 
prismLightTheme = css`
  ${prismBaseTheme};
  code[class*='language-'],
  pre[class*='language-'] {
    color: ${theme.colors.gray[800]};
  }
  :not(pre) > code[class*='language-'],
  pre[class*='language-'] {
    background: ${theme.colors.gray[50]};
    border: 1px solid ${theme.colors.gray[200]};
  }
  .mdx-marker {
    background-color: hsla(204, 45%, 96%, 1);
  }
`
Example #11
Source File: App.js    From react-sample-projects with MIT License 6 votes vote down vote up 
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router hashType="slash">
          <ChakraProvider theme={theme}>
            <NavBar />
            <Box
              textAlign="center"
              fontSize="xl"
              height="calc(100vh - 64px)"
              width="90%"
              pt={16}
              ml={'auto'}
              mr={'auto'}
            >
              <Routes>
                <Route exact path="/" element={<Home />}></Route>
                <Route
                  exact
                  path="/product/add"
                  element={<ProductAddEdit />}
                ></Route>
                <Route
                  exact
                  path="/product/:id"
                  element={<ProductDetails />}
                ></Route>
                <Route exact path="/cart" element={<Cart />}></Route>
              </Routes>
            </Box>
          </ChakraProvider>
        </Router>
      </PersistGate>
    </Provider>
  );
}
Example #12
Source File: test-utils.js    From react-sample-projects with MIT License 6 votes vote down vote up 
AllProviders = ({ children }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
)
Example #13
Source File: App.jsx    From realtime-chat-supabase-react with Apache License 2.0 6 votes vote down vote up 
function App() {
  const { username, setUsername, routeHash } = useAppContext();

  if (routeHash) {
    if (routeHash.endsWith("&type=recovery")) {
      window.location.replace(`/login/${routeHash}`);
    }
    if (routeHash.startsWith("#error_code=404"))
      return (
        <div>
          <p>This link has expired</p>
          <a href="/" style={{ cursor: "pointer" }} variant="link">
            Back to app
          </a>
        </div>
      );
  }
  return (
    <ChakraProvider theme={theme}>
      <AppContextProvider>
        <Box bg="gray.100">
          {/* <ColorModeSwitcher justifySelf="flex-end" /> */}
          <Router>
            <Switch>
              <Route exact path="/">
                <Header username={username} setUsername={setUsername} />
                <Chat username={username} />
                <Footer username={username} />
              </Route>
              <Route>Not found</Route>
            </Switch>
          </Router>
        </Box>
      </AppContextProvider>
    </ChakraProvider>
  );
}
Example #14
Source File: prism.js    From benjamincarlson.io with MIT License 5 votes vote down vote up 
prismDarkTheme = css`
  ${prismBaseTheme};
  :not(pre) > code[class*='language-'] {
    background: #011627;
  }
  .token.attr-name {
    color: rgb(173, 219, 103);
    font-style: italic;
  }
  .token.comment {
    color: rgb(128, 147, 147);
  }
  .token.string,
  .token.url {
    color: rgb(173, 219, 103);
  }
  .token.variable {
    color: rgb(214, 222, 235);
  }
  .token.number {
    color: rgb(247, 140, 108);
  }
  .token.builtin,
  .token.char,
  .token.constant,
  .token.function {
    color: rgb(130, 170, 255);
  }
  .token.punctuation {
    color: rgb(199, 146, 234);
  }
  .token.selector,
  .token.doctype {
    color: rgb(199, 146, 234);
    font-style: 'italic';
  }
  .token.class-name {
    color: rgb(255, 203, 139);
  }
  .token.tag,
  .token.operator,
  .token.keyword {
    color: #ffa7c4;
  }
  .token.boolean {
    color: rgb(255, 88, 116);
  }
  .token.property {
    color: rgb(128, 203, 196);
  }
  .token.namespace {
    color: rgb(178, 204, 214);
  }
  code[class*='language-'],
  pre[class*='language-'] {
    color: ${theme.colors.gray[50]};
  }
  :not(pre) > code[class*='language-'],
  pre[class*='language-'] {
    background: ${theme.colors.gray[800]};
    border: 1px solid ${theme.colors.gray[700]};
  }
  .mdx-marker {
    background-color: ${theme.colors.gray[700]};
  }
  .remark-code-title {
    background: ${theme.colors.gray[700]};
    color: ${theme.colors.gray[100]};
    border: 1px solid ${theme.colors.gray[700]};
  }
`
Example #15
Source File: prism.js    From benjamincarlson.io with MIT License 4 votes vote down vote up 
prismBaseTheme = css`
  code {
    white-space: pre;
  }
  code[class*='language-'],
  pre[class*='language-'] {
    color: ${theme.colors.gray[800]};
    background: none;
    font-family: ${theme.fonts.mono};
    font-size: ${theme.fontSizes[2]};
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: ${theme.lineHeights[2]};
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    width: 100%;
  }
  /* Code blocks */
  pre[class*='language-'] {
    padding-top: ${theme.space[4]};
    padding-bottom: ${theme.space[4]};
    padding-left: ${theme.space[4]};
    padding-right: ${theme.space[4]};
    margin: ${theme.space[6]} 0;
    overflow: auto;
    min-width: 100%;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  :not(pre) > code[class*='language-'],
  pre[class*='language-'] {
    background: ${theme.colors.gray[50]};
    border: 1px solid ${theme.colors.gray[200]};
    border-radius: ${theme.radii.lg};
  }
  /* Inline code */
  :not(pre) > code[class*='language-'] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: slategray;
  }
  .token.punctuation {
    color: #999;
  }
  .token.namespace {
    opacity: 0.7;
  }
  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #905;
  }
  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: #690;
  }
  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: #9a6e3a;
  }
  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: #07a;
  }
  .token.function,
  .token.class-name {
    color: #dd4a68;
  }
  .token.regex,
  .token.important,
  .token.variable {
    color: #e90;
  }
  .token.important,
  .token.bold {
    font-weight: bold;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
  .mdx-marker {
    display: block;
    margin-left: -${theme.space[4]};
    margin-right: -${theme.space[4]};
    padding-left: ${theme.space[4]};
    padding-right: ${theme.space[4]};
    background-color: ${theme.colors.gray[200]};
    box-shadow: inset 3px 0px 0 0px ${theme.colors.blue[600]};
    min-width: fit-content;
  }
  .remark-code-title {
    padding: ${theme.space[2]} ${theme.space[4]};
    font-family: ${theme.fonts.mono};
    background: ${theme.colors.gray[200]};
    color: ${theme.colors.gray[800]};
    border: 1px solid ${theme.colors.gray[200]};
    border-top-left-radius: ${theme.radii.lg};
    border-top-right-radius: ${theme.radii.lg};
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0;
    width: 100%;
    + pre {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      margin-top: 0 !important;
    }
  }
`