@chakra-ui/react#theme TypeScript 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: theme.ts    From wiregui with MIT License 6 votes vote down vote up 
customTheme: Theme = {
  ...theme,
  fonts: {
    body: "Roboto, system-ui, sans-serif",
    heading: "Roboto, system-ui, sans-serif",
    mono: "Menlo, monospace",
  },
  fontWeights: {
    ...theme.fontWeights,
    normal: 400,
    medium: 600,
    bold: 700,
  },
  radii: {
    ...theme.radii,
    sm: "4px",
    md: "8px",
  },
  colors: {
    ...theme.colors,
    gray: {
      ...theme.colors.gray,
      "100": "#3B3B3B",
      "200": "#2A2A2A",
      "300": "#1B1B1B",
    },
    orange: {
      ...theme.colors.orange,
      "200": "#FF6C0E",
    },
    red: {
      ...theme.colors.orange,
      "200": "#CD382D",
    },
  },
}
Example #2
Source File: test-utils.tsx    From jsonschema-editor-react with Apache License 2.0 6 votes vote down vote up 
AllProviders = ({ children }: { children?: React.ReactNode }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
)
Example #3
Source File: PoolPortal.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
CurrentAPY = () => {
  const { t } = useTranslation();

  const poolType = usePoolType();

  const poolAPY = usePoolAPY(poolType);

  return (
    <Row expand mainAxisAlignment="center" crossAxisAlignment="center">
      <Heading
        mt="5px"
        fontFamily={`'Baloo 2', ${theme.fonts.heading}`}
        fontSize="54px"
        fontWeight="extrabold"
      >
        {poolAPY ? (
          (poolAPY.startsWith("0.") ? poolAPY : poolAPY.slice(0, -1)) + "%"
        ) : (
          <Spinner size="lg" mr={4} />
        )}
      </Heading>
      <Text ml={3} width="65px" fontSize="sm" textTransform="uppercase">
        {t("Current APY")}
      </Text>
    </Row>
  );
}
Example #4
Source File: index.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <>
    <PWAPrompt
      timesToShow={2}
      permanentlyHideOnDismiss={false}
      copyTitle="Add Rari to your homescreen!"
      copyBody="The Rari Portal works best when added to your homescreen. Without doing this, you may have a degraded experience."
      copyClosePrompt="Close"
    />
    <ChakraProvider theme={customTheme}>
      <ErrorBoundary FallbackComponent={ErrorPage}>
        <QueryClientProvider client={queryClient}>
          <ReactQueryDevtools initialIsOpen={false} />
          <BrowserRouter>
            <RariProvider>
              <ScrollToTop />
              <App />
            </RariProvider>
          </BrowserRouter>
        </QueryClientProvider>
      </ErrorBoundary>
    </ChakraProvider>
  </>,
  document.getElementById("root")
);
Example #5
Source File: index.tsx    From nextjs-hasura-boilerplate with MIT License 6 votes vote down vote up 
Layout: FC = ({ children }) => {
  return (
    <ChakraProvider theme={theme}>
      <Navbar />
      <Box maxW="xl" mx="auto" w="full" py={8}>
        {children}
      </Box>
    </ChakraProvider>
  );
}
Example #6
Source File: theme.ts    From wiregui with MIT License 6 votes vote down vote up 
customTheme: Theme = {
  ...theme,
  fonts: {
    body: "Roboto, system-ui, sans-serif",
    heading: "Roboto, system-ui, sans-serif",
    mono: "Menlo, monospace",
  },
  fontWeights: {
    ...theme.fontWeights,
    normal: 400,
    medium: 600,
    bold: 700,
  },
  radii: {
    ...theme.radii,
    sm: "4px",
    md: "8px",
  },
  colors: {
    ...theme.colors,
    gray: {
      ...theme.colors.gray,
      "100": "#3B3B3B",
      "200": "#2A2A2A",
      "300": "#1B1B1B",
    },
    orange: {
      ...theme.colors.orange,
      "200": "#FF6C0E",
    },
    red: {
      ...theme.colors.orange,
      "200": "#CD382D",
    },
  },
}
Example #7
Source File: ThemeProvider.tsx    From ke with MIT License 6 votes vote down vote up 
defaultTheme = extendTheme({
  colors: {
    brand: chakraTheme.colors.teal,
  },
  components: {
    Label: {
      part: ['label', 'asterisk'],
      baseStyle: {
        label: {
          fontWeight: '500',
        },
        asterisk: {
          color: '#E53E3E',
        },
      },
    },
    SelectWidget,
    ReadOnlyWidget,
    LinkWidget,
    ChipInput,
  },
}) as Theme
Example #8
Source File: App.tsx    From notebook with MIT License 5 votes vote down vote up 
App: React.FC<AppComponentProps> = ({ history }) => {
  const [notes, setNotes] = React.useState<note[]>([]);

  React.useEffect(() => {
    const dummyNotes = [
      {
        id: "Odork5n5jPVd0wvm0w_dY",
        title: "Hey ?",
        body:
          "I'm dummy note here. Try to update me. Click me to see my remaining part. You can also delete me ?. But I'll be here again by reopening the app link ?. "
      }
    ];
    setNotes(dummyNotes);
  }, []);

  const handleNoteCreate = (note: note) => {
    const newNotesState: note[] = [...notes];
    newNotesState.push(note);
    setNotes(newNotesState);
    if (history.location.pathname !== "/") history.push("/");
  };

  return (
    <ChakraProvider theme={theme}>
      <Box textAlign="center" fontSize="xl" p={5}>
        <TopNav handleNoteCreate={handleNoteCreate} />
        <Switch>
          <Route exact path="/projects" component={RepositoriesList} />
          <Route
            exact
            path="/"
            component={() => <HomePage notes={notes} setNotes={setNotes} />}
          />
          <Redirect to="/" />
        </Switch>
        <PageFooter />
      </Box>
    </ChakraProvider>
  );
}
Example #9
Source File: JsonSchemaEditor.tsx    From jsonschema-editor-react with Apache License 2.0 5 votes vote down vote up 
JsonSchemaEditor = (props: SchemaEditorProps) => {
	const { onSchemaChange, readOnly, data } = props;

	const schemaState = useSchemaState({
		jsonSchema: data ?? defaultSchema(),
		isReadOnly: readOnly ?? false,
		fieldId: 0,
	});

	const jsonSchemaState = useState(schemaState.jsonSchema);

	return (
		<ChakraProvider theme={theme}>
			{schemaState.isValidSchema ? (
				<Flex m={2} direction="column">
					<SchemaRoot
						onSchemaChange={onSchemaChange}
						schemaState={schemaState.jsonSchema}
						isReadOnly={schemaState.isReadOnly}
					/>

					{jsonSchemaState.type.value === "object" && (
						<SchemaObject
							schemaState={jsonSchemaState}
							isReadOnly={schemaState.isReadOnly ?? false}
						/>
					)}

					{jsonSchemaState.type.value === "array" && (
						<SchemaArray
							schemaState={jsonSchemaState}
							isReadOnly={schemaState.isReadOnly ?? false}
						/>
					)}
				</Flex>
			) : (
				<Flex alignContent="center" justifyContent="center">
					<Whoops />
				</Flex>
			)}
			{/* <Modal
        isOpen={localState.isAdvancedOpen.get()}
        finalFocusRef={focusRef}
        size="lg"
        onClose={onCloseAdvanced}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader textAlign="center">Advanced Schema Settings</ModalHeader>

          <ModalBody>
            <AdvancedSettings itemStateProp={localState.currentItem} />
          </ModalBody>

          <ModalFooter>
            <Button
              colorScheme="blue"
              variant="ghost"
              mr={3}
              onClick={onCloseImport}
            >
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal> */}
		</ChakraProvider>
	);
}
Example #10
Source File: index.tsx    From rari-dApp with GNU Affero General Public License v3.0 5 votes vote down vote up 
customTheme = {
  ...theme,
  fonts: {
    ...theme.fonts,
    body: `'Avenir Next', ${theme.fonts.body}`,
    heading: `'Avenir Next', ${theme.fonts.heading}`,
  },
}