mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 01:01:38 +00:00
* 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
43 lines
1.2 KiB
TypeScript
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;
|