⚡
Chakra UI v3をv2みたいな見た目にカスタマイズする

2025/03/29に公開
Next.js
Chakra UI
tech
 はじめに今回は、Chakra UI v3をカスタマイズして、v2っぽい見た目にする方法をまとめます。

背景として、Chakra UIのFigmaは依然としてv3が公開されておらず、デザイナーにv2のFigmaを参考に画面を作ってもらったため、なるべくv2っぽいデザインシステムで画面を構築したいという目的があります。

 v3とv2の違いButtonで比較してみます。今回は例として、colorScheme（v3ではcolorPalette）を"blue"にした場合を扱います。
v2

v3

このように、同じblueでも全く雰囲気の違うコンポーネントになってしまっています。

 v3のカスタマイズ方法以下のように書くことで、全体に適用されるデザインを設定できます。公式ドキュメント
import { ChakraProvider, createSystem, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        red: {
          100: { value: "#fff1f0" },
          // ... //
        },
      },
    }
  },
})

const system = createSystem(config)

export default function App() {
  return (
    <ChakraProvider value={system}>
      <YourApp>
    </ChakraProvider>
  )
}

 カスタマイズ
 カラーパレットまずはカラーパレットをv2に合わせます。v2のカラートークンはこのページにあるので、これをもとに以下のように設定します。
const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        blue: {
          "50": { value: "#ebf8ff" },
          "100": { value: "#bee3f8" },
          "200": { value: "#90cdf4" },
          "300": { value: "#63b3ed" },
          "400": { value: "#4299e1" },
          "500": { value: "#3182ce" },
          "600": { value: "#2b6cb0" },
          "700": { value: "#2c5282" },
          "800": { value: "#2a4365" },
          "900": { value: "#1A365D" },
        },
      },
    },
  },
});
v2

v3 before

v3 after

コンポーネントの設定でv2とv3が使用するトークンが若干違うみたいですが、雰囲気は近づきましたね。
一応補足として、v3のデフォルトのカラートークンは50~950まで定義されていますが、こちらに
カスタム カラー パレットを使用する場合は、テーマ設定で必要なすべてのカラー トークン (50 ～ 900) とセマンティック トークンが定義されていることを確認してください。
とあるので、v2の50~900までのカラートークンを設定すれば良いと思います。もしかしたら950を使用するコンポーネントで違和感が出るかもしれません。
同様にgray, red, blue, green, yellowなどのよく使うカラーパレットを上書きすると良いと思います。
こんな感じでコピーしてChatGPTにオブジェクト形式にしてもらうと楽です。


 Buttonの設定v2とv3のButtonの細かなデザインの違いは、recipeという仕組みでButtonに対して個別に設定する形になります。今回は例として、fontWeightと、variant=outlineの時のborder, bgColorを設定しようと思います。
button.recipe.ts
import { defineRecipe } from "@chakra-ui/react";

export const buttonRecipe = defineRecipe({
  base: {
    fontWeight: "semibold",
  },
  variants: {
    variant: {
      outline: { bg: "white", borderColor: "colorPalette.solid" },
    },
  },
});
const config = defineConfig({
  // ... //
  theme: {
    recipes: {
      button: buttonRecipe,
    },
  // ... //
})
この設定は、Chakraのソースコードを見ながら、どれがbaseのプロパティでどれがvariant固有のプロパティなのかや、他の部分に使われているセマンティックトークンは何かを調べながら考える必要があります。
v2

v3 before

v3 after

使われているトークンが微妙に違ったりborderRadiusやfontなど細かいところは一致させていないですが、雰囲気は近づきました。

 まとめChakra UI v3のカスタマイズの概要を、v2っぽい見た目にすることで紹介しました。

個人的には、tokenは全てのコンポーネントに適用されるので積極的に使いたいですが、recipeを設定しすぎると全体の統一感を保つのが難しくなるため、UIライブラリの恩恵を受けにくくなると思います。
はじめに

v3とv2の違い

v3のカスタマイズ方法

カスタマイズ

カラーパレット

Buttonの設定

まとめ

Discussion
