はじめに
気になっていたYamada UIを触っていて、カラーモードの切り替えが簡単にできるらしいので使ってみました。
今回の使用言語はReact×TypeScriptです。
使用例
まずはカラーモードを正常に動作させるために、vite.config.tsにプラグインを追加します。
※今回はViteプロジェクトを使用しています。
（Next.jsはこちら）
vite.config.ts
import { defineConfig, Plugin } from "vite";
import react from "@vitejs/plugin-react";
import env from "vite-plugin-env-compatible";
import { defaultConfig, getColorModeScript } from "@yamada-ui/react";
//プラグイン追加
function injectScript(): Plugin {
return {
name: "vite-plugin-inject-scripts",
transformIndexHtml(html, ctx) {
const content = getColorModeScript({
initialColorMode: defaultConfig.initialColorMode,
});
return html.replace("<body>", `<body><script>${content}</script>`);
},
};
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
env({ prefix: "VITE", mountedPath: "process.env" }),
injectScript(),
],
});
次に下記を参考にしてコンポーネントを呼び出します。こんなに簡単にできるとは！
tsx
const { colorMode, toggleColorMode } = useColorMode();
return (
<>
<Button onClick={toggleColorMode} mb={2}>
{colorMode === "light" ? "ダーク" : "ライト"}モードに切り替える
</Button>
</>
);
ライトモード使用時（例）
画面左上のボタンを押すとモードが切り替わります。
ダークモード使用時（例）
おわりに
他のUIコンポーネントライブラリではここまで簡単に実装できないのではないでしょうか。
公式ドキュメントも丁寧で見やすいのでぜひ覗いてみてください！
参考