はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）
ChakraUIを使用して、リポジトリ内の全体テーマを変更するやり方を簡単にご紹介します！
ChakraUIとは？
ChakraUIは、UIコンポーネントライブラリの一つです。
コンポーネントをimportして利用する形で簡単にイケてるUIが作れちゃう優れ品です。
例えば、例にあるようなものをimportするだけで実装できちゃいます。
ChakraUIを使った全体のテーマをカスタマイズする方法
theme.jsというファイルを使って管理します。
theme.jsは、ChakraUIのテーマをカスタマイズするためのファイルで、色、フォント、ブレークポイント、コンポーネントのスタイルなどを設定できます。
(既存のコンポーネントのスタイルも自由自在！)
このファイルを使うことで、アプリケーション全体のデザインに統一感を持たせられるんですよね！
global.scssみたいなものです。
ChakraUIのテーマを適用するためには、ルートのlayout.jsxでchildrenをラップする形でChakraProviderを配置します。
また、この時にカスタムしたテーマを渡します。
import { ChakraProvider } from "@chakra-ui/react";
import customTheme from "./theme";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<ChakraProvider theme={customTheme}>
{children}
</ChakraProvider>
</html>
)
}
このcustomThemeなるものを、theme.jsで作成していきます！
import { extendTheme } from "@chakra-ui/react";
// カスタムカラー
const colors = {
brand: {
50: "#e3f2f9",
100: "#c5e4f3",
200: "#a2d4ec",
300: "#7ac1e4",
400: "#47a9da",
500: "#0088cc", // プライマリカラー
600: "#007ab8",
700: "#006ba1",
800: "#005885",
900: "#003f5e",
},
};
// カスタムフォント
const fonts = {
heading: "Arial, sans-serif",
body: "Georgia, serif",
};
// ブレークポイント
const breakpoints = {
sm: "30em",
md: "48em",
lg: "62em",
xl: "80em",
};
// コンポーネントのスタイル
const components = {
Button: {
baseStyle: {
fontWeight: "bold", // ボールドフォント
},
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
variants: {
solid: {
bg: "brand.500",
color: "white",
_hover: {
bg: "brand.600",
},
},
},
},
};
// カスタムテーマの作成
const customTheme = extendTheme({ colors, fonts, breakpoints, components });
export default customTheme;
ざっくりとこんな感じで作成できます！
作成したものは、color、fonts,breakpoints,components,customThemeになります！
上記のように、簡単に定義することが出来るので楽々ですね！
この値は、実際にアプリケーション内で利用できます！
例えば、Buttonコンポーネントのwindow幅が48emで色を変更したい時は以下のように指定できます！
<Button color={{ base: "brand.50", md: "brand.100" }}>
チェンジ！
</Button>
また、全体のテーマだけではなく、コンポーネント毎にスタイルを調整できるのでButtonコンポーネントに対してのみテーマを変更するといったことも可能となっています！
色々カスタマイズできるので自分好みにUIを作り込めますね！
おわりに
今回は簡単なChakraUIの紹介とテーマの変更方法について解説しました！
自分も、個人的にCSSが苦手なのでChakraUIのようなコンポーネントライブラリは重宝しています！
（本当はCSS得意になりたい。。。🥹）
ここまで読んでいただきありがとうございました！
センリツでした🤓