メインコンテンツへスキップ

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()
ブランディングコンテキストから取得したフラット化済みの設定を含む、現在のテーマオプションを取得するための React フックです。

​
戻り値

FlattenedTheme | nullcolors、fonts、borders、pageBackground、およびウィジェットの設定を含む FlattenedTheme オブジェクト。ブランディングが利用できない場合は null。
Example
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>
  );
};