Chakra UI v3でOS設定に左右されずライトモード固定する（forcedTheme対応）

はじめに

chakra UI v3を使っていて、PCの設定によって、ダークモードかライトモードになってしまうので、どっちかに統一したいとなり、調べたのでまとめました。

問題

私のダークモードになってるので、chakra UIを使ったら、背景が黒になってしまいます。ライトモードとデザインが変わってしまうので、直したいと思ってました。

解決方法

forcedTheme="light" で固定することで解決しました。

components/ui/color-mode.tsx をこうします（ライト固定）:

export function ColorModeProvider(props: ColorModeProviderProps) {
  return (
    <ThemeProvider
      attribute="class"
      disableTransitionOnChange
      forcedTheme="light"
      enableSystem={false}
      {...props}
    />
  )
}

おわりに

ライトモードになりました。逆にダークモードに固定する場合もこちらを変更すればいいかと思います。

参考