> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# useAuth0Themes

<ParamField body="useAuth0Themes()" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FlattenedTheme">FlattenedTheme</a></span>}>
  ブランディングコンテキストから取得したフラット化済みの設定を含む、現在のテーマオプションを取得するための React フックです。

  ## 戻り値

  [`FlattenedTheme`](/docs/ja-JP/libraries/acul/react-sdk/API-Reference/Types/interfaces/FlattenedTheme) | `null`

  colors、fonts、borders、pageBackground、およびウィジェットの設定を含む `FlattenedTheme` オブジェクト。ブランディングが利用できない場合は `null`。

  ```tsx Example theme={null}
  import React from 'react';
  import { useAuth0Themes } from '@auth0/auth0-acul-react';

  const ThemedComponent: React.FC = () => {
    const theme = useAuth0Themes();

    if (!theme) {
      return <div>No theme available</div>;
    }

    return (
      <div
        style={{
          backgroundColor: theme.colors.primary_button,
          color: theme.colors.primary_button_label,
          borderRadius: theme.borders.button_border_radius,
        }}
      >
        <h1
          style={{
            fontWeight: theme.fonts.title.bold ? 'bold' : 'normal',
            fontSize: `${theme.fonts.title.size}%`,
          }}
        >
          Auth0 テーマでスタイリング
        </h1>
        <button
          style={{
            backgroundColor: theme.colors.primary_button,
            borderRadius: theme.borders.button_border_radius,
          }}
        >
          プライマリボタン
        </button>
        <p>本文テキストの色: {theme.colors.body_text}</p>
      </div>
    );
  };
  ```
</ParamField>