mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
// 1. import `extendTheme` function
|
|
import { extendTheme } from '@chakra-ui/react';
|
|
|
|
// 3. extend the theme
|
|
const theme = extendTheme({
|
|
initialColorMode: 'system',
|
|
useSystemColorMode: false,
|
|
colors: {
|
|
home: {
|
|
bg: '#f5f5fa',
|
|
},
|
|
},
|
|
shadows: {
|
|
card: '0px 4px 8px rgba(0, 0, 0, 0.04),0px 0px 2px rgba(0, 0, 0, 0.06),0px 0px 1px rgba(0, 0, 0, 0.04)',
|
|
},
|
|
fonts: {
|
|
body: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif",
|
|
},
|
|
styles: {
|
|
global: (props: any) => ({
|
|
'html, body': {
|
|
bg: props.colorMode === 'dark' ? 'gray.800' : 'home.bg',
|
|
},
|
|
'img, #write iframe': {
|
|
filter:
|
|
props.colorMode === 'dark'
|
|
? 'saturate(105%) contrast(110%) brightness(75%)'
|
|
: 'unset',
|
|
transitionProperty: 'filter',
|
|
transitionDuration: 'var(--chakra-transition-duration-normal)',
|
|
},
|
|
div: {
|
|
transitionProperty: 'background-color',
|
|
transitionDuration: 'var(--chakra-transition-duration-normal)',
|
|
},
|
|
}),
|
|
},
|
|
});
|
|
|
|
export default theme;
|