カラーモード

Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれています。

Yamada UIのすべてのコンポーネントは、ダークモードをサポートしています。シナリオによっては、コンポーネントをカラーモードに対応させる必要がある場合があります。

セットアップ

ダークモードを正しく動作させるには、次の2つのことを行う必要があります。

コンフィグにinitialColorModeを設定する。
ColorModeScriptをアプリケーションに追加する。

コンフィグをカスタマイズする

カラーモードは、デフォルトのコンフィグに設定されています。

実際に定義されている値はこちらです。

config.ts

export const config: ThemeConfig = {
  initialColorMode: "light",
}

initialColorMode: ユーザーが初めてアプリケーションにアクセスしたとき(またはストレージがリセットされた後)のカラーモードの初期値です。3つ値を受け入れます。
- light: ライトモード。
- dark: ダークモード。
- system: オペレーションシステム(OS)からカラーモードを取得します。

import { UIProvider, extendConfig } from "@yamada-ui/react"

export const config: ThemeConfig = {
  initialColorMode: "system",
}

const customConfig = extendConfig(config)

const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}

`ColorModeScript`を追加する

カラーモードを正常に動作させるために、headやbody内にColorModeScriptを追加する必要があります。

理由は、カラーモードがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

Create React Appの場合

index.tsx

import { createRoot } from "react-dom/client"
import { App } from "./app"
import { UIProvider, getColorModeScript, defaultConfig } from "@yamada-ui/react"

const injectColorModeScript = () => {
  const scriptContent = getColorModeScript({
    initialColorMode: defaultConfig.initialColorMode,
  })

  const script = document.createElement("script")

  script.textContent = scriptContent

  document.head.appendChild(script)
}

injectColorModeScript()

const container = document.getElementById("app")

const root = createRoot(container!)

root.render(
  <UIProvider>
    <App />
  </UIProvider>,
)

propsのinitialColorModeは、コンフィグと同じinitialColorModeを渡してください。もし、あなたのコンフィグがある場合は、そちらのinitialColorModeを渡してください。

Next.jsの場合

_document.tsx

import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"

export default function Document() {
  return (
    <Html lang="en">
      <Head />

      <body>
        <ColorModeScript initialColorMode={defaultConfig.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

プロジェクトによっては、cookiesから値を取得する場合があるかもしれません。その場合は、createColorModeManager("cookie")を使用します。

_document.tsx

import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"

export default function Document() {
  return (
    <Html lang="en">
      <Head />

      <body>
        <ColorModeScript
          type="cookie"
          nonce="testing"
          initialColorMode={defaultConfig.initialColorMode}
        />
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

_app.tsx

import type { AppProps } from "next/app"
import { UIProvider, createColorModeManager } from "@yamada-ui/react"

const colorModeManager = createColorModeManager("cookie")

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UIProvider colorModeManager={colorModeManager}>
      <Component {...pageProps} />
    </UIProvider>
  )
}

App Routerの場合は、こちらをご覧ください。

`colorModeManager`を追加する

Next.jsなどのサーバー側でレンダリングされるサイトの場合は、カラーモードがハイドレーション中に変更することを避けるために、リクエストにカラーモードを含めたい場合があります。

サーバーサイドレンダリングを使用しない場合は、こちら手順をする必要はありません。Yamada UIは、デフォルトでlocalStorageを使用しています。

`getServerSideProps`を用意する

複数のページでgetServerSidePropsを共通化するために、getServerSideCommonPropsを定義します。

import { GetServerSidePropsContext } from "next"

export const getServerSideCommonProps = ({
  req,
}: GetServerSidePropsContext) => {
  return {
    props: {
      cookies: req.headers.cookie ?? "",
    },
  }
}

`colorModeManager`に`cookies`を設定する

createColorModeManagerにssrとcookiesを設定します。

_app.tsx

import type { AppProps } from "next/app"
import { UIProvider, createColorModeManager } from "@yamada-ui/react"

export default function App({ Component, pageProps }: AppProps) {
  const { cookies } = pageProps
  const colorModeManager = createColorModeManager("ssr", cookies)

  return (
    <UIProvider colorModeManager={colorModeManager}>
      <Component {...pageProps} />
    </UIProvider>
  )
}

`getServerSideProps`を追加する

先ほど作成したgetServerSideCommonPropsを各ページに追加します。

index.tsx

import { getServerSideCommonProps } from "../get-server-side-props.ts"
import { Button } from "@yamada-ui/react"

export default function Index() {
  return <Button>Click me!</Button>
}

export const getServerSideProps = getServerSideCommonProps