@chakra-ui/react#extendTheme JavaScript 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.js From DAOInsure with MIT License | 6 votes |
|
theme = extendTheme({
fonts: {
heading: "Lato",
body: "Lato"
},
components: {
Button: {
baseStyle: {
fontFamily: "Lato",
borderRadius: "20px",
}
},
Text: {
baseStyle: {
fontFamily: "Lato"
}
},
Tag: {
baseStyle: {
fontFamily: "Lato",
borderRadius:"20px",
backgroundColor:"rgba(12, 108, 51, .7)",
color:"rgba(255, 255, 255, 1)"
},
variants: {
solid: {
fontFamily: "Lato",
borderRadius:"20px",
backgroundColor:"rgba(12, 108, 51, .7)",
color:"rgba(255, 255, 255, 1)"
}
}
}
}
})
Example #2
| Source File: index.js From web-client with Apache License 2.0 | 6 votes |
|
ReconmapTheme = extendTheme({
styles: {
global: props => ({
body: {
fontFamily: 'body',
color: mode('gray.800', 'whiteAlpha.900')(props),
bg: mode('#fff', 'var(--color-gray-dark)')(props),
lineHeight: 'base',
},
h1: {
fontSize: "2.1rem",
},
h2: {
fontSize: "1.75rem",
fontWeight: "bold",
},
h3: {
fontSize: "1.5rem",
},
h4: {
fontSize: "1.2rem",
}
}),
},
components: {
Table: {
defaultProps: {
size: "sm",
variant: "simple"
},
}
},
config: {
useSystemColorMode: false,
initialColorMode: "dark",
},
})
Example #3
| Source File: App.js From bottle-radio with MIT License | 5 votes |
|
customTheme = extendTheme({ config })
Example #4
| Source File: theme.js From UpStats with MIT License | 5 votes |
|
theme = extendTheme({
fonts: {
heading: "Poppins",
},
})
Example #5
| Source File: theme.js From benjamincarlson.io with MIT License | 5 votes |
|
customTheme = extendTheme(overrides)
Example #6
| Source File: theme.js From scaffold-directory with MIT License | 5 votes |
|
theme = extendTheme({ config })
Example #7
| Source File: index.js From interspace.chat with GNU General Public License v3.0 | 4 votes |
|
theme = extendTheme({
styles: {
global: {
html: {
bg: "linear-gradient(0deg, rgba(41,2,80,1) 0%, rgba(25,0,50,1) 40%)",
scrollBehavior: "smooth",
},
body: {
bg: "linear-gradient(0deg, rgba(41,2,80,1) 0%, rgba(25,0,50,1) 40%)",
color: "#ffeded",
fontFamily: '"Exo 2", sans-serif',
fontSize: "16px",
fontWeight: 300,
p: 0,
m: '0 auto',
minH: "100vh",
width: '100%'
// overflowY: "auto",
},
// "body *": {
// outline: "1px solid red",
// },
// '#root': {
// width: '100%',
// },
a: {
color: "#FF61E6",
textDecoration: "none",
transition: "color 0.2s ease",
_hover: {
color: "#76EBF2",
textDecoration: "none",
},
"&.chakra-link": {
color: "#FF61E6",
_hover: {
color: "#76EBF2",
textDecoration: "none",
},
},
},
h1: {
color: "#fff",
fontSize: "4vmax",
fontWeight: 700,
"& span": {
color: "#fff",
fontSize: "4vmax",
fontWeight: 700,
},
},
h2: {
color: "#fff",
fontSize: "4vmax",
fontweight: 500,
textShadow: "0 0 10px rgba(0, 0, 0, 0.6)",
},
h3: {
fontSize: { base: "4vmin", md: "1.5vmax" },
fontWeight: 500,
mt: {base: 2, md: 5},
"& + p": {
fontSize: { base: "2.8vmin", md: "1vmax" },
lineHeight: { base: "1.2", md: "inherit" },
fontWeight: 500,
mt: 0,
mb: 1,
},
},
h4: {
fontSize: "1vmax",
fontWeight: 500,
},
p: {
fontSize: { base: "2.6vmin", md: ".9vmax" },
textShadow: "0 0 5px rgba(0, 0, 0, 0.6)",
},
section: {
position: "relative",
display: 'flex',
// display: 'none',
alignItems: "center",
height: '100vh',
w: '100vw',
m: 0,
py: 0,
px: {base: 4, lg: '10%'},
zIndex: 2000,
},
".__content__body": {
"& > p:first-of-type": {
fontSize: { base: "2.6vmin", md: "1vmax" },
fontWeight: 500,
},
"&--no-firstof": {
p: {
fontSize: { base: "2.6vmin", md: "0.9vmax" },
fontWeight: 500,
"& + p": {
fontWeight: 300,
},
},
},
},
// Gradients
".gradient": {
display: "inline-block",
background: "linear-gradient(90deg, #FF61E6 -29.22%, #7C56FF 107.53%)",
backgroundClip: "text",
// WebkitTextFillColor: "transparent",
// textFillColor: "transparent",
// filter: "drop-shadow(0 0 5px rgba(0,0,0,0.6))",
},
".gradient2": {
display: "inline-block",
background:
"linear-gradient(90.24deg, #79F8FB 0.3%, #9032E6 55.76%, #E839B7 106.78%)",
backgroundPosition: "center",
backgroundSize: "100%",
backgroundClip: "text",
textFillColor: "transparent",
WebkitTextFillColor: "transparent",
filter: "drop-shadow(0 0 5px rgba(0,0,0,0.6))",
},
".gradient-cone": {
display: "inline-block",
background:
"conic-gradient(from 92.2deg at 60.45% 74.83%, #8EBBFF 0deg, #DE3FFF 88.12deg, #79F8FB 105deg, #7C56FF 165deg, #FF61E6 251.25deg, #927CFF 286.87deg, #76EBF2 326.25deg, #8EBBFF 360deg)",
backgroundPosition: "-254%",
backgroundSize: "100%",
backgroundClip: "text",
textFillColor: "transparent",
WebkitTextFillColor: "transparent",
transition: "background 0.3s ease",
filter: "drop-shadow(0 0 5px rgba(0,0,0,0.6))",
},
".highlight": {},
".fest-dates": {
d: "inline-flex",
width: "100%",
color: "#FF61E6",
fontSize: { base: "2.2vmin", md: "0.7vmax" },
fontWeight: 700,
justifyContent: "right",
pr: 0.5,
transform: {
base: "translateY(7px)",
lg: "translateY(9px)",
"2xl": "translateY(15px)",
},
zIndex: 2001,
},
},
},
})
Example #8
| Source File: theme.js From xetera.dev with MIT License | 4 votes |
|
export function createTheme(theme) {
const pick = themePicker(theme)
return extendTheme({
config: {
initialColorMode: "dark",
useSystemColorMode: false,
},
fonts: {
heading: fontFamily,
body: fontFamily,
},
fontSizes,
styles: {
global: {
":root": {
colorScheme: pick({ light: "light", dark: "dark" }),
},
ul: {
listStylePosition: "inside",
},
code: {
display: "inline-flex",
fontWeight: "bold",
fontSize: "0.85em",
background: pick({
light: "#e3e3e399",
dark: "#2b141d",
}),
padding: "0 6px",
lineHeight: "1.7",
color: pick({
light: colors.brand[100].light,
dark: colors.brand[100].dark,
}),
borderRadius: "5px",
},
".highlight-line": {
background: pick({
light: colors.bgSecondary.light,
dark: colors.bgSecondary.dark,
}),
},
".themed-scrollable::-webkit-scrollbar": {
width: "8px",
},
".themed-scrollable::-webkit-scrollbar-track": {
width: "8px",
},
"*::-webkit-scrollbar-thumb": {
background: pick(colors.bg[500]),
},
".centered-grid > *": {
gridColumn: "2 / auto",
},
".blog-post :is(h1, h2, h3, h4, h5, h6) > a": {
// resetting the link colors of article headings
color: "inherit",
},
".blog-post > *": {
fontSize: fontSizes.md,
},
a: {
wordBreak: "break-word",
},
".widebanner > p": {
marginBottom: 0,
},
".token-line": {
paddingInlineStart: 3,
paddingInlineEnd: 3,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
},
"pre, kbd, samp": {
fontFamily: `'Jetbrains Mono', ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace`,
},
// We don't want the last element of blockquotes to push the quote border down with a margin
".blog-post blockquote::before, .blog-post blockquote::after": {
width: "3rem",
display: "block",
borderTop: `1px solid ${pick(colors.text[500])}`,
opacity: 0.4,
content: '""',
margin: "0 auto",
},
".blog-post blockquote > p": {
margin: "3rem 0",
fontWeight: "medium",
fontSize: "inherit",
},
body: {
lineBreak: "auto",
transition,
color: pick(colors.text[300]),
background: pick({
light: colors.bg[100].light,
dark: colors.bg[100].dark,
}),
},
"::selection": {
backgroundColor: pick({
light: "#ddbed8",
dark: "#1f242e",
}),
},
},
},
components: {
Link: {
baseStyle: {
color: pick({
light: colors.brandSecondary.light,
dark: colors.brandSecondary.dark,
}),
},
},
// Heading: {
// baseStyle: props => ({
// color: "text.100",
// }),
// },
},
// colors
colors: injectTheme(colors, theme),
})
}
Example #9
| Source File: _app.js From idena-web with MIT License | 4 votes |
|
// Workaround for https://github.com/zeit/next.js/issues/8592
export default function MyApp({Component, pageProps, err}) {
return (
<>
<Head>
<meta charSet="UTF-8" />
<title>Idena app: Proof-of-person blockchain</title>
<meta httpEquiv="X-UA-Compatible" content="chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
/>
<meta
name="description"
content="Take part in the Idena validation ceremony using your browser"
/>
<link rel="shortcut icon" href="/favicon.ico" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
{`/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}`}
</style>
<link href="/static/fonts/icons.css" rel="stylesheet" />
<link href="/static/scrollbars.css" rel="stylesheet" />
<style>{`
html {
-moz-osx-font-smoothing: grayscale;
}
`}</style>
<script
type="text/javascript"
src="https://apis.google.com/js/api.js"
></script>
</Head>
<ChakraProvider theme={extendTheme(uiTheme)}>
<IdenaApp>
<Component {...{...pageProps, err}} />
</IdenaApp>
</ChakraProvider>
</>
)
}
Example #10
| Source File: theme.js From blobs.app with MIT License | 4 votes |
|
theme = extendTheme({
colors: {
primary: '#d7819b',
dark: {
heaading: '#1d3557',
},
},
styles: {
global: ({ colorMode }) => ({
body: {
bg: colorMode === 'dark' ? 'blue.800' : 'white',
},
'.chakra-modal__content-container': {
p: { base: '2', lg: '0' },
},
'#blobSvg': {
overflow: 'visible',
},
}),
},
components: {
Heading: {
baseStyle: {
letterSpacing: '-1px',
},
variants: {
main: ({ colorMode }) => ({
fontWeight: '900',
color: colorMode === 'dark' ? 'gray.300' : '#1d3557',
}),
},
},
Text: {
baseStyle: {
color: 'gray.500',
},
variants: {
subtle: ({ colorMode }) => ({
color: colorMode === 'dark' ? 'gray.300' : 'gray.700',
}),
},
},
Button: {
variants: {
subtle: ({ colorMode }) => ({
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
fontWeight: 400,
fontSize: 'sm',
lineHeight: 'initial',
_hover: { bg: colorMode === 'dark' ? 'gray.800' : 'gray.100' },
}),
main: ({ colorMode }) => ({
bg: 'gray.500',
fontWeight: '600',
color: 'white',
w: 'full',
p: '7',
fontSize: 'md',
lineHeight: 'initial',
transition: 'all 0.4s ease',
_hover: { bg: colorMode === 'dark' ? '#d7819b' : 'gray.600' },
_focus: {
bg: colorMode === 'dark' ? '#d7819b' : 'gray.700',
shadow: 'xl',
outline: 'none',
},
_active: {
transform: 'scale(0.95)',
bg: colorMode === 'dark' ? '#d7819b' : 'gray.500',
},
}),
heavy: ({ colorMode }) => ({
bg: 'transparent',
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
fontWeight: 700,
fontSize: '13px',
borderWidth: '1px',
borderColor: 'transparent',
rounded: 'md',
textTransform: 'uppercase',
lineHeight: 'initial',
_hover: {
bg: colorMode === 'dark' ? 'gray.700' : 'gray.600',
color: '#fff',
textDecoration: 'none !important',
borderColor: colorMode === 'dark' ? 'gray.600' : 'gray.600',
shadow: 'xl',
},
_focus: { boxShadow: 'none' },
}),
silent: ({ colorMode }) => ({
fontWeight: 'normal',
fontSize: 'sm',
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
outline: 'none',
lineHeight: 'initial',
_hover: {
color: colorMode === 'dark' ? 'gray.200' : 'gray.700',
textDecoration: 'none',
},
_focus: {
outline: 'none',
boxShadow: 'none',
color: colorMode === 'dark' ? 'gray.200' : 'gray.700',
},
}),
},
},
Tooltip: {
variants: {
default: () => ({
color: 'gray.50',
bg: 'gray.500',
fontWeight: '400',
fontSize: 'sm',
rounded: 'sm',
px: '3',
py: '1',
}),
},
},
},
})
