はじめに
最近のウェブデザインのトレンドの中で、ユーザーがライトモードとダークモードを選べる機能は非常に人気があります。特に夜や暗い環境でのブラウジングを好むユーザーや、目の疲れを感じやすいユーザーには非常に有用です。Chakra UIは、このような機能を簡単に実装するためのツールを提供しているので実装してみました。
環境構築
前回こちらで作成したログイン画面にダークモードを実装していきたいと思います。
chakra-ui/iconsのインストール
切り替えボタンの実装に必なiconを下記のコマンドで導入していきます。
docker環境に入りインストールをしていきます。
docker compose exec front bash
npm i @chakra-ui/icons実装
まず、chakra-ui/iconsをimportしていきます。
import { MoonIcon, SunIcon } from '@chakra-ui/icons';useColorModeの使用
useColorModeはChakra UIが提供するReact Hookの一つです。このフックを使用すると、ライトモードやダークモードといったカラーモードの切り替えを効率的に実装することができます。具体的には、useColorModeは現在のカラーモードの情報をブラウザのlocalStorageに保存する役割を持っており、この値はchakra-ui-color-modeというキーで管理されます。この機能により、ユーザーの選択したカラーモードの状態を維持することができます。
こちらを導入していきます。
'use client';
import { Button, Flex, Heading, Input, Checkbox, Text,Link,useColorMode,useColorModeValue,} from "@chakra-ui/react";
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
export default function Page() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex height="100vh" alignItems="center" justifyContent="center" >
<Flex direction="column" padding={100} rounded={50} minWidth="550px" maxWidth="90%" background= "gray.100">
<Button size='lg' onClick={toggleColorMode}>{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}</Button>
<Heading padding={10} color="#2B3774" textAlign="center">ログイン画面</Heading>
<Input placeholder="mail@sample.com" type="email" borderRadius="12px" sx={{'::placeholder': {fontSize: '10px',},}} mb={3} />
<Input placeholder="********" type="password" borderRadius="12px"/>
<Flex align="center" justifyContent="space-between" margin={4}>
<Flex align="center">
<Checkbox fontSize="8px" />
<Text ml={2} fontSize="10px">ログイン状態を保存する</Text>
</Flex>
<Link color="#4418FF" fontSize="10px" href="/forgot-password"> パスワードを忘れですか？</Link>
</Flex>
<Button type="submit" margin={2} color="white" bg="#4418FF" borderRadius="10px" fontSize="8px">ログイン</Button>
</Flex>
</Flex>
);
}
上記の赤枠に月のbuttonが表示されます。こちらのボタンを押下してください。すると下記画像のように色が変更されます。
しかし、このままだと色を固定で指定している部分がダークモードでは見えにくくなる問題があります。そこで、colorModeを利用して、カラーモードごとに色の設定を変更し、最適な表示になるよう修正していきます。
<Flex direction="column" padding={100} rounded={50} minWidth="550px" maxWidth="90%" background={colorMode === "dark" ? "gray.600" : "gray.100"}>
<Button size='lg' onClick={toggleColorMode}>{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}</Button>
<Heading padding={10} color={colorMode === "dark" ? "white" : "#2B3774"} textAlign="center">ログイン画面</Heading>
これで固定していたものも見やすくなっており完成です。
おわり
このように、Chakra UIを使用すると、ダークモードの実装が非常にスムーズに行えますので試してみてはいかがでしょうか。
参考
