颜色模式 #

import { ColorModeScript } from '@chakra-ui/react'

function App() {
  return (
    <>
      <ColorModeScript initialColorMode="light" />
      <App />
    </>
  )
}

import { extendTheme, type ThemeConfig } from '@chakra-ui/react'

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
}

const theme = extendTheme({ config })

import { useColorMode, Button } from '@chakra-ui/react'

function ColorModeToggle() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <Button onClick={toggleColorMode}>
      {colorMode === 'light' ? '切换到深色模式' : '切换到浅色模式'}
    </Button>
  )
}

import { useColorModeValue, Box } from '@chakra-ui/react'

function Example() {
  const bgColor = useColorModeValue('gray.100', 'gray.700')
  const textColor = useColorModeValue('gray.800', 'white')

  return (
    <Box bg={bgColor} color={textColor}>
      根据颜色模式自动切换样式
    </Box>
  )
}

const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: true,
  },
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === 'dark' ? 'gray.900' : 'white',
        color: props.colorMode === 'dark' ? 'white' : 'gray.800',
      },
    }),
  },
})

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: (props) => ({
        bg: props.colorMode === 'dark' ? 'blue.300' : 'blue.500',
        color: props.colorMode === 'dark' ? 'gray.800' : 'white',
      }),
    },
  },
})

import { useColorMode, IconButton } from '@chakra-ui/react'
import { SunIcon, MoonIcon } from '@chakra-ui/icons'

function ColorModeButton() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <IconButton
      aria-label="切换颜色模式"
      icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
      onClick={toggleColorMode}
      variant="ghost"
    />
  )
}

function ThemedCard({ children }) {
  const bg = useColorModeValue('white', 'gray.800')
  const borderColor = useColorModeValue('gray.200', 'gray.600')
  const textColor = useColorModeValue('gray.800', 'white')

  return (
    <Box
      bg={bg}
      borderColor={borderColor}
      color={textColor}
      borderWidth="1px"
      borderRadius="lg"
      p={6}
    >
      {children}
    </Box>
  )
}