@chakra-ui/react#extendTheme TypeScript Examples
The following examples show how to use
@chakra-ui/react#extendTheme.
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 fresh-coupons with GNU General Public License v3.0 | 6 votes |
|
theme = extendTheme({
config, styles: {
global: {
".chakra-portal h2.course-list-title": {
fontSize: '2em !important',
},
".chakra-portal h2": {
fontSize: '1.1em !important',
},
"#fresh-coupons-root *, .chakra-portal *": {
fontSize: '1em !important',
}
},
}
})
Example #2
| Source File: _app.tsx From graphql-mesh with MIT License | 6 votes |
|
theme = extendTheme({
colors: {
gray: {
50: '#fafafa',
100: '#f5f5f5',
200: '#e5e5e5',
300: '#d4d4d4',
400: '#a3a3a3',
500: '#737373',
600: '#525252',
700: '#404040',
800: '#262626',
850: '#1b1b1b',
900: '#171717',
},
accentColor,
},
fonts: {
heading: 'TGCFont, sans-serif',
body: 'TGCFont, sans-serif',
},
config: {
initialColorMode: 'light',
useSystemColorMode: false,
},
styles,
})
Example #3
| Source File: ThemeProvider.tsx From ke with MIT License | 6 votes |
|
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 #4
| Source File: theme.ts From ksana.in with Apache License 2.0 | 6 votes |
|
theme = extendTheme({
config: {
initialColorMode: 'light',
useSystemColorMode: false
},
fonts: {
heading:
"'Work Sans', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
body: "'Work Sans', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
}
})
Example #5
| Source File: index.ts From calories-in with MIT License | 6 votes |
|
theme = extendTheme({
styles,
colors,
components: {
Input,
Button,
Divider,
Textarea,
Alert,
},
})
Example #6
| Source File: index.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
|
theme = extendTheme(baseTheme)
Example #7
| Source File: theme.ts From fresh-coupons with GNU General Public License v3.0 | 5 votes |
|
theme = extendTheme({ config })
Example #8
| Source File: index.ts From dendron with GNU Affero General Public License v3.0 | 5 votes |
|
theme = extendTheme({
colors,
fonts,
})
Example #9
| Source File: theme.ts From dendron with GNU Affero General Public License v3.0 | 5 votes |
|
theme = extendTheme({
config: {
useSystemColorMode: true,
},
colors: {
positive: defaultTheme.colors.green,
brand: {
// Generated with https://copypalette.app/ via #69B160
50: "#D2E8CF",
100: "#B9DBB4",
200: "#A2CF9C",
300: "#8DC486",
400: "#7ABA72",
500: "#69B160",
600: "#5AA551",
700: "#519549",
800: "#498642",
900: "#42793B",
},
},
styles: {
global: {
"html, body, #__next": {
height: "100%",
minHeight: "100%",
},
},
},
components: {
Link: {
baseStyle: {
textDecoration: "underline",
color: "blue.500",
},
},
},
})
Example #10
| Source File: theme.ts From website with MIT License | 5 votes |
|
theme = extendTheme({
colors: customColors,
fonts
})
Example #11
| Source File: theme.ts From coindrop with GNU General Public License v3.0 | 5 votes |
|
theme = extendTheme({
useSystemColorMode: true,
initialColorMode: "light",
colors: {
black: '#16161D',
logoPrimary: '#FFB655',
mainGray: "#6C6B6F",
orange: {
50: "#FFFAF0",
100: "#FEEBC8",
200: "#FBD38D",
300: "#F6AD55",
400: "#ED8936",
500: "#FF9E1F", // Chakra button default
600: "#ED8936", // Chakra button hovered
700: "#9C4221",
800: "#7B341E",
900: "#652B19",
},
gray: {
20: "#FCFCFC",
30: "#FAFAFA",
40: "#F9F9F9",
50: "#F7F7F7",
100: "#EBEBEB",
200: "#E0E0E1",
300: "#CCCBCD",
400: "#AEACAF",
500: "#6C6B6F",
600: "#656468",
700: "#5B5A5E",
800: "#515053",
900: "#3D3C3E",
},
darkGray: {
50: "#6C6B6F",
100: "#CCCBCD",
200: "#5B5A5E",
300: "#515053",
400: "#3D3C3E",
500: "#333234",
600: "#29282A",
700: "#1F1E1F",
800: "#151415",
900: "#0A0A0A",
},
yellow: {
10: "#fffff0",
200: "#fefcbf",
300: "#faf089",
400: "#f6e05e",
500: "#ecc94b",
600: "#d69e2e",
700: "#b7791f",
800: "#975a16",
900: "#744210",
},
},
fonts: {
mono: `'Menlo', monospace`,
},
})
Example #12
| Source File: theme.ts From takeout-app with MIT License | 5 votes |
|
theme = extendTheme({
useSystemColorMode: false,
fonts: {
heading: "Titillium Web",
body: "Roboto",
},
styles: {
global: {
body: {
color: Colors.textDefault,
backgroundColor: Colors.backgroundColor,
},
"::placeholder": {
color: Colors.textMuted,
},
},
},
colors: {
rk: {
50: "#ebf8ff",
100: "#bee3f8",
200: "#90cdf4",
300: "#63b3ed",
400: "#4299e1",
500: Colors.main, // 500: "#3182ce",
600: Colors.mainLight, // 600: "#2b6cb0",
700: Colors.mainLight, // 700: "#2c5282",
800: "#2a4365",
900: "#1A365D",
},
},
components: {
Tabs: {
variants: {
"rk-tracks": (_props) => {
return {
tablist: {
borderBottom: "1px solid",
borderColor: Colors.border,
backgroundColor: "#FFFFFF",
},
tab: {
backgroundColor: "#FFFFFF",
color: Colors.textMuted,
fontWeight: 400,
"& .rk-tracks-tabs-name": {
borderBottom: "1px solid",
borderColor: "transparent",
},
_selected: {
color: main,
"& .rk-tracks-tabs-name": {
borderColor: main,
fontWeight: 700,
},
},
"& .rk-tracks-tabs-topic-divider": {
marginLeft: "0.2rem",
marginRight: "0.2rem",
},
"& .rk-tracks-tabs-topic-author": {
marginLeft: "0.3rem",
fontSize: "12px",
},
//_active: {
// bg: main,
//},
//_disabled: {
// opacity: 0.4,
// cursor: "not-allowed",
//},
},
};
},
},
},
},
})
Example #13
| Source File: theme.tsx From portfolio with MIT License | 4 votes |
|
theme = extendTheme({
fonts: {
heading: "'Red Hat Display', sans-serif",
body: "'Red Hat Text', sans-serif",
},
styles: {
global: (props) => ({
body: {
color: mode("gray.700", "whiteAlpha.900")(props),
bg: mode("gray.50", "gray.900")(props),
fontSize: "1.2em",
".deleted": {
color: "#ff8383 !important",
fontStyle: "normal !important",
},
".inserted": {
color: "#b5f4a5 !important",
fontStyle: "normal !important",
},
},
a: {
color: mode("blue.500", "blue.200")(props),
transition: "color 0.15s",
transitionTimingFunction: "ease-out",
fontWeight: "500",
_hover: {
color: mode("blue.600", "blue.300")(props),
},
},
}),
},
components: {
// Heading: {
// baseStyle: (props) => ({
// borderBottom: "1px",
// borderColor: mode("gray.200", "gray.700")(props),
// pb: 2,
// fontWeight: "500",
// }),
// },
// Popover: {
// variants: {
// responsive: {
// popper: {
// maxWidth: 'unset',
// width: 'unset'
// }
// }
// }
// },
Popover: {
parts: ['popper'],
baseStyle: props => ({
popper: {
zIndex: 10,
maxW: 'xs',
// maxW: props.width ? props.width : 'xs',
w: props.width,
},
}),
},
Button: {
baseStyle: {
fontWeight: "500",
rounded: "xl",
},
},
Tag: {
baseStyle: {
rounded: "lg",
},
},
textarea: {
baseStyle: {
background: "green.300",
},
},
Link: {
baseStyle: {
fontWeight: "inherit",
_hover: {
textDecoration: "none",
},
},
variants: {
text: {
color: "blue.400",
transition: "color 0.15s",
transitionTimingFunction: "ease-out",
fontWeight: "500",
_hover: {
color: "blue.300",
},
},
gradient: {
bgGradient: "linear(to-br, blue.400,blue.300)",
bgClip: "text",
fontWeight: "500",
_hover: {
bgGradient: "linear(to-br, blue.500,blue.300)",
bgClip: "text",
},
},
},
},
},
mdx: {
h1: {
mt: "2rem",
mb: ".25rem",
lineHeight: 1.2,
fontWeight: "bold",
fontSize: "1.875rem",
letterSpacing: "-.025em",
},
h2: {
mt: "4rem",
mb: "0.5rem",
lineHeight: 1.3,
fontWeight: "semibold",
fontSize: "1.5rem",
"& + h3": {
mt: "1.5rem",
},
},
h3: {
mt: "3rem",
// mb: "0.5rem",
lineHeight: 1.25,
fontWeight: "semibold",
fontSize: "1.25rem",
},
h4: {
mt: "3rem",
lineHeight: 1.375,
fontWeight: "semibold",
fontSize: "1.125rem",
},
p: {
mt: "1.25rem",
lineHeight: 1.7,
"blockquote &": {
mt: 0,
},
},
hr: {
my: "4rem",
},
blockquote: {
bg: "orange.100",
borderWidth: "1px",
borderColor: "orange.200",
rounded: "lg",
px: "1.25rem",
py: "1rem",
my: "1.5rem",
},
ul: {
mt: "1.5rem",
ml: "1.25rem",
"blockquote &": { mt: 0 },
"& > * + *": {
mt: "0.25rem",
},
},
code: {
rounded: "sm",
px: "1",
fontSize: "0.875em",
py: "2px",
whiteSpace: "nowrap",
lineHeight: "normal",
},
},
})
