Chakra UI V3でシステム設定の色がデフォルトカラーになってしまう

はじめに

Chakra UI V3で詰まったところを解消します

問題

Chakra UI V3を使った時に、デフォルトのカラーがダークモードになっていました。
原因を探っていると、自分が使っているPCの設定がダークモードになっていたため、
デフォルトのカラーモードも変わったみたいでした。

解決方法

ドキュメントを見ると、
・ColorModeProvider や useColorMode は Chakra UI v3 から削除された
・常にライトモードやダークモードに固定したい場合は、Chakra UI v3 で推奨される next-themes などを使うのが最も簡単

などが記載されていたので、ThemeProviderを間に挟むことでなんとか解決

provider.tsx

import { ChakraProvider } from "@chakra-ui/react";
import { ThemeProvider } from "next-themes";
import { system } from "../../theme";
import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode";

export function Provider(props: ColorModeProviderProps) {
  return (
    <ThemeProvider enableSystem={false}>
      <ChakraProvider value={system}>
        <ColorModeProvider {...props} />
      </ChakraProvider>
    </ThemeProvider>
  );
}

'

おわりに

Chakra UI v3にしたら急にデフォルトのカラーが変わり、
一気にデザイン性が悪くなったので、とりあえず治ってよかったです。

参考

https://www.chakra-ui.com/docs/get-started/migration#color-mode
https://zenn.dev/shimabukuromeg/articles/1062bd78bf096c
https://github.com/chakra-ui/chakra-ui/issues/4987