【Chakra UI+React】カスタムテーマを使って、独自の色やフォントを定義する

はじめに

この記事では、Chakra UIを使用しているプロジェクトでカスタムテーマを適用する方法について解説します。Chakra UIのカスタムテーマ機能を活用することで、自分用のカラーパレットやフォントテーマを設定することができます。

目次

1. 対象読者
2. Chakra UIのカスタムテーマとは
3. 実装方法
4. デフォルトカラーの上書き
5. 最後に

1.対象読者

• Chakra UIを使ったプロジェクトを開発している方
• Chakra UIで、会社のブランドカラーを使用したい方
• Chakra UIのデフォルトの色を上書きしたい方
• カスタムデザインシステムを構築したい方

2. Chakra UIのカスタムテーマとは

Chakra UIのカスタムテーマ機能を使用することで、デフォルトのテーマを拡張して、独自の色やフォント、スタイルを定義することができます。これにより、プロジェクトに会社のブランドカラーやデザインガイドラインを適用できます。

3. 実装方法

以下の手順でカスタムテーマを実装します。
今回はChakraUIのテーマにbrandという名前でQiitaのブランドカラーのテーマと、見出し用、本文用のフォントを拡張しています。

手順1:必要なパッケージをインポートする:

app.js

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import theme from './customTheme';

customTheme.js

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

@chakra-ui/reactからChakraProviderとextendThemeをインポートします。
今回は、拡張するテーマの定義情報を別ファイルcustomTheme.jsに書いて、
それをapp.jsインポートして使用する方針で実装します

手順2:カスタムテーマオブジェクトを作成する

次に、カスタムテーマオブジェクトを作成します。以下は、Qiitaブランドのカスタムカラーパレットとフォントを定義した例です。

customTheme.js

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

const customTheme = {
  colors: {
    brand: {
      50: '#EEF6E5',
      100: '#D4E9BF',
      200: '#BADD99',
      300: '#A0D073',
      400: '#86C34D',
      500: '#59bb0c',
      600: '#3F8E0A',
      700: '#296108',
      800: '#123405',
      900: '#020100',
    },
  },
  fonts: {
    heading: 'Roboto, sans-serif',
    body: 'Roboto, sans-serif',
  },
};

手順3:extendTheme関数でデフォルトテーマとカスタムテーマオブジェクトをマージする

extendThemeメソッドを使用して、デフォルトテーマとカスタムテーマオブジェクトをマージします。
今回はpp.jsで使用するのでエクスポートします

customTheme.js

export const theme = extendTheme(customTheme);

手順4:ChakraProviderにマージされたテーマオブジェクトを渡す

最後に、ChakraProviderにマージされたテーマオブジェクトを渡します。これにより、アプリケーション全体でカスタムテーマが適用されます。

app.js

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from './customTheme';

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* ここにアプリケーションのコンポーネントが入ります */}
    </ChakraProvider>
  );
}

export default App;

完成例

まとめるとこんな感じ

customTheme.js

import { extendTheme } from "@chakra-ui/react";
const customTheme = {
  colors: {
    brand: {
      50: '#EEF6E5',
      100: '#D4E9BF',
      200: '#BADD99',
      300: '#A0D073',
      400: '#86C34D',
      500: '#59bb0c',
      600: '#3F8E0A',
      700: '#296108',
      800: '#123405',
      900: '#020100',
    },
  },
  fonts: {
    heading: 'Roboto, sans-serif',
    body: 'Roboto, sans-serif',
  },
};

export const theme = extendTheme(customTheme);

app.js

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from './customTheme';

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* ここにアプリケーションのコンポーネントが入ります */}
    </ChakraProvider>
  );
}

export default App;

4.デフォルトカラーの上書き

同じ手順でChakraUIデフォルトの色を別の色に上書きする事も可能です。
先ほどの例では新しくbrandというカラーパレットを拡張しましたが、デフォルトの色の名前(redとかblueとか）で定義すると、デフォルトのカラーパレットから上書きされます。
以下はデフォルトのredより暗いテーマに上書きした例です

customTheme.js

import { extendTheme } from "@chakra-ui/react";
const customTheme = {
  colors: {
    red: {
      50: '#F9E9E9',
      100: '#F0C8C8',
      200: '#E7A8A8',
      300: '#DE8787',
      400: '#D56767',
      500: '#9B2C2C',
      600: '#732121',
      700: '#4B1616',
      800: '#240B0B',
      900: '#000000',
    },
  },
};

export const theme = extendTheme(customTheme);

5.最後に

この記事ではChakra UIのカスタムテーマ機能について解説しました。カスタムテーマを活用することで、プロジェクトに独自のブランディングやデザインガイドラインを適用することが可能になりました。
より詳細な設定については、公式ドキュメントを参照してください