Skip to main content

Before you start

You need:
Universal Login provides a number of prompts, or steps in the authentication process, each step includes at least one screen. You can use ACUL to apply a theme to all your custom screens. For example:
login-id reference screenshot
You can apply a theme to this Login screen using Tailwind CSS v4. All theme and branding customizations are located in ACUL project src/index.css directory.
  1. Use the Auth0 CLI tool to create an ACUL project with the screens to apply a new theme.
auth0 acul init <Your-App-Name>
  1. Edit the CSS file src/index.css.
/* In src/index.css */
:root {
  /* Change these CSS variables to match your brand's primary color */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);

  /* Override the theme variables to reference your custom color*/  
  --color-primary-button: var(--ul-theme-color-primary-button);

  /* You can also override specific component colors directly */
  --color-header: var(--primary-foreground);
  --color-body-text: #000000;
  --color-widget-bg: white;
  --color-widget-border: transparent;
  /* ... and many more */
}
CSS variables in the @theme inline block are used by the base components. CSS variables prefixed with --ul-theme- are set to the default Universal Login styling and are automatically overridden by the Branding theme set in your tenant at runtime. To learn more, read the src/utils/theme/themeEngine.ts file in your project’s directory.