Files
DefectingCat.github.io/lib/theme.ts
DefectingCat aaad57fc4d Add dark mode
* add dark mode switch button
* modify footer
* fix nav menu opening issue
* add paging number
* remove post card a link focus shadow
* add _document
* remove archive card border on last child
* add post image zoom margin on desktop
* add post index image
* remove TOC scroll bar on firefox
2021-11-21 22:16:35 +08:00

43 lines
1.2 KiB
TypeScript

// 1. import `extendTheme` function
import { extendTheme } from '@chakra-ui/react';
// 2. Add your color mode config
// 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;