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

開始する前に

次のものが必要です:
Universal Login は、認証プロセス内のステップとなる複数の prompts を提供します。各ステップには少なくとも 1 つの画面が含まれます。ACUL を使用して、すべてのカスタム画面にテーマを適用できます。 例えば次のような画面です。
login-id reference screenshot
Tailwind CSS v4 を使用して、このログイン画面にテーマを適用できます。 すべてのテーマおよびブランディングのカスタマイズは、ACUL プロジェクトの src/index.css ディレクトリ内に定義されています。
  1. Auth0 CLI ツールを使用して、新しいテーマを適用したい画面を含む ACUL プロジェクトを作成します。
auth0 acul init <Your-App-Name>
  1. CSS ファイル src/index.css を編集します。
/* In src/index.css */
:root {
  /* ブランドのプライマリカラーに合わせてこれらの CSS 変数を変更します */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* カスタムカラーを参照するためにテーマ変数を上書きします */  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* 特定のコンポーネントカラーを直接上書きすることもできます */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... その他多数 */
}
@theme inline ブロック内の CSS 変数は、ベースコンポーネントで使用されます。 --ul-theme- プレフィックスが付いた CSS 変数は、Universal Login のデフォルトスタイルに設定され、実行時にテナントで設定している Branding テーマによって自動的に上書きされます。詳細については、プロジェクトのディレクトリ内にある src/utils/theme/themeEngine.ts ファイルを参照してください。