Chakra UI 颜色模式卡在深色模式

Question

我目前正在尝试使用 Chakra UI 将颜色模式开关添加到我的 Vite React 应用程序。很遗憾，我无法获得想要的结果。

当点击开关切换颜色模式时，它会从浅色模式变为深色模式，但如果再次点击开关，它不会以浅色模式呈现。

main.tsx

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <>
    <ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
    <React.StrictMode>
      <ChakraProvider
        theme={customTheme}
      >
        <BrowserRouter>
          <AuthProvider>  //<- custom provider
            <App />
          </AuthProvider>
        </BrowserRouter>
      </ChakraProvider>
    </React.StrictMode>
  </>
);

theme.ts

import {
  extendTheme,
  ThemeConfig,
  withDefaultColorScheme,
} from "@chakra-ui/react";

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

export const customTheme = extendTheme(
  {
    config,
    colors: {
      brand: {
        50: "#FFB7B1",
        100: "#FF9E98",
        200: "#FF3E30",
        300: "#FB1100",
        400: "#C80D00",
        500: "#930A00",
        600: "#890900",
        700: "#7F0800",
        800: "#740800",
        900: "#6A0700",
      },
    },
  },
  withDefaultColorScheme({ colorScheme: "brand" })
);

Settings.tsx

export const Settings = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  const handleDarkModeChange = () => {
    toggleColorMode();
  };

return (
    <Container marginTop={8} width="full">
      <VStack spacing={6}>
        <Flex width="full">
          <BackButton />
          <Heading flex={1}>Einstellungen</Heading>
        </Flex>

        <InputGroup size="lg">
          <InputLeftElement pointerEvents="none">
            <Icon as={MagnifyingGlass} />
          </InputLeftElement>
          <Input type="text" placeholder="Suche" onChange={handleSearch} />
        </InputGroup>
        <List width="full" spacing={6}>
          <ListItem>
            <InstallButton />
          </ListItem>

          //does not toggle correctly
           <ListItem>
            <FormControl
             display="flex"
             alignItems="center"
             justifyContent="space-between"
            >
              <FormLabel htmlFor="dark-theme-switch" margin={0} fontSize="lg">
                Dark Theme
              </FormLabel>

              <Switch
                id="dark-theme-switch"
                size="lg"
                onChange={handleDarkModeChange}
              />
            </FormControl>
          </ListItem>

        </List>
      </VStack>
    </Container>
  );
}

Answer 1

已找到修复方法。问题与 chakra-ui 无关，但我的实现处理状态和呈现此状态

Chakra UI 颜色模式卡在深色模式

Chakra UI color mode is stuck in dark mode

typescript

reactjs

darkmode

chakra-ui

vite