Platform

Branding & theming

Match Authalla’s hosted screens to your product branding with a logo, three colors, a corner style, a font and a tab icon.

Theme settings apply to the hosted auth pages for a tenant:

  • Sign in (/oauth2/login)
  • Sign up (/oauth2/signup)
  • Pin code (/oauth2/pin-code)

The emails your users get while signing in use the theme too. See Sign-in emails.

Where to configure

Open the Admin UI and go to Tenants → {tenant} → Theme. Theme changes are tenant-specific and apply immediately to that tenant’s hosted pages.

Theme editor: what you can change

  • Upload a logo: SVG, PNG, JPG, GIF or WebP, up to 2 MB. A square mark and a wide wordmark both fit. An SVG is turned into a PNG in your browser before upload, so it needs a width and height or a viewBox, and images or fonts it loads from elsewhere are left out.
  • The logo appears above the form on the hosted auth pages.
  • If the logo can’t be loaded, the default Authalla logo is shown.
  • With Separate dark mode on, you can also upload a dark mode logo, shown to visitors whose device is in dark mode. Leave it empty to use the main logo there too.

Tab icon

The small image the browser shows in the tab next to the page title.

  • Upload it like the logo: SVG, PNG, JPG, GIF or WebP, up to 2 MB. A small square image works best, since the browser shows it at whatever size it picks.
  • One icon covers both light and dark mode.
  • Without a tab icon, the pages show none of their own. A tenant still on the default theme shows the Authalla icon.

Separate dark mode

A switch at the top of Colors decides how the hosted pages pick their colors:

  • Off (the default): the pages look the same on every device. The colors can be anything, light or dark. If the page background is dark, the page is treated as a dark page, so the browser’s own controls and scrollbars match it.
  • On: the pages follow each visitor’s system setting, with a separate set of dark mode colors. When you turn it on, the dark colors start from Authalla’s default dark palette.

Dark mode colors are kept when you turn it off. They are not used, but they are there if you turn it on again.

Colors

A theme has three colors:

  • Brand color: buttons, links, focus rings and the box you're typing in on the code step.
  • Page background: the page behind the form.
  • Card background: the card that holds the form.

Authalla works out the rest so the page stays readable:

  • Text is near-black or near-white, whichever reads on the card background.
  • Text on buttons is near-black or near-white, whichever reads on the brand color.
  • Secondary buttons, like Sign in with a passkey and the social sign-in buttons, use the card background with a thin border, and the same text color as the rest of the card.
  • Muted text, borders and error messages are derived from the same colors.

Colors are hex values with 3 or 6 digits, like #4f46e5 or #fff.

With Separate dark mode on, each color has its light and dark value side by side.

Corners

Choose how round the buttons, fields and code boxes are. The card follows at a larger radius. One setting covers both light and dark mode.

  • Square: sharp corners.
  • Rounded (the default): slightly rounded.
  • Pill: fully round buttons and fields.

Font

Choose the font of the hosted pages. One setting covers both light and dark mode.

  • DM Sans (the default)
  • Inter
  • Figtree
  • Manrope
  • Nunito
  • Space Grotesk
  • Source Serif 4
  • Device font: each visitor’s own system font, with nothing to download.

The fonts are served by Authalla with the pages, and a page loads only the one you pick, so nothing comes from a third party.

Default language

Choose the language of the hosted pages and sign-in emails when your app doesn't ask for one: Follow the browser (the default), English, Suomi or Svenska. Set Finnish for a tenant whose users are in Finland, and they get Finnish even on a browser set to English. A language your app passes in ui_locales still wins. See Languages.

Preview

A live preview sits beside the settings and stays in view while you edit. Above it, one row picks what to show (the sign-in, sign-up and code pages, or the sign-in, sign-up and email confirmation emails; with passkeys on, the code page shows the "create a passkey" line under the code), the language (English, Suomi or Svenska) and, with Separate dark mode on, light or dark. The preview starts in the tenant's default language, or English when it follows the browser. The language you pick above the preview is only for the preview and isn't saved. Clicking into a light or dark color switches the preview to that mode.

Pick an email to see the sign-in emails with your unsaved changes, in the language picked above the preview. Authalla renders the real email with sample data (the code 123456 and a sample link) and shows it as an inbox would. Nothing is sent. Emails always use the light colors, so the Light and Dark picker is hidden while an email is shown.

Save, discard, and reset

  • Save changes persists the theme for the tenant.
  • Discard changes reverts to the last saved theme.
  • Reset to defaults returns the logo, colors, corners and font to the Authalla defaults, removes the tab icon and goes back to following the browser's language, with Separate dark mode off. It asks you to confirm first.

Sign-in emails

The emails your users get while signing in (the code and link to sign in, the code that finishes a sign-up, and the code that confirms an email address) carry your theme:

  • Your logo at the top. If a mail client blocks images, it shows your product name instead.
  • The brand color on the Sign in button, with the code set large above it and the link written out below it.
  • The page and card backgrounds.

The emails always use the main (light) colors, since mail clients apply their own dark mode. Fonts and corners don't carry over: mail clients don't load web fonts reliably, so the emails use each device's own font and slightly rounded corners. The emails don't sign off as Authalla; they end by saying why the user got the email. They come from your product name at Authalla's sign-in address, noreply@authalla-mail.com; to send them from your own address, add a sender address.

To see them before you save, pick Email above the theme's preview.

Product name

The emails name your product, not the tenant: "123456 is your code to sign in to Acme", "Finish signing up for Acme". A tenant's own name is often an environment label like "Production" that your users shouldn't see, so set the name they know you by under Tenants → {tenant} → General → Product name. Leave it empty and the emails use the tenant name.

  • It is the name in the subject and heading of every sign-in email, the text shown in place of a blocked logo, and the sender name the emails come from, at Authalla's sign-in address or your own sender address.
  • A sign-up email names the product, not the app the user started from. An account belongs to the tenant and works in every app connected to it, and an app's name is a label for developers. When an AI agent or MCP client that identified itself asks the user to sign up, the email still says which one is connecting.
  • When an app sends a user to sign in, the sign-in page's title names the product: "Sign in to Acme". It doesn't name the app, not even an AI agent: an agent's name is one it chose itself, and the consent screen that follows names it with a note that it hasn't been verified. A sign-in without an app says "Sign in", under your logo.
  • Set it from the API as product_name on the tenant: the Management API and the MCP tools create_tenant and update_tenant take it. An empty string clears it. It can be up to 255 characters, without line breaks.
  • The Email preview on the Theme tab uses the saved product name.

Languages

The hosted pages and the sign-in emails are written in English, Finnish and Swedish. Each user gets one of them, chosen in this order:

  1. The language your app asks for. Pass the standard OpenID Connect ui_locales parameter on the authorization request, with one or more language tags in order of preference: ui_locales=fi or ui_locales=sv-FI en. The first one Authalla supports is used.
  2. The tenant's default language, when you set one under Theme → Default language. It takes the browser's place: a tenant set to Finnish gets Finnish on a browser set to English.
  3. The browser's language. Without ui_locales or a default language, the browser's preferred languages decide.
  4. English, when none of these names a supported language.

Tags match on the language alone, so fi-FI gets Finnish and sv-FI gets Swedish. The emails a user gets while signing in are in the same language as the page that sent them.

The error page reached from an expired or broken link can still show its message in English.

Setting the theme from an agent or the API

The MCP server and the Management API can set the whole theme, logo included:

  • MCP update_theme takes the color mode, corner style, font, default language, logos, tab icon and colors in one call. Only the fields you pass change.
  • The fields have the same names everywhere: brand_color, page_background_color, card_background_color, corner_style (square, rounded or pill), font (dm_sans, inter, figtree, manrope, nunito, space_grotesk, source_serif_4 or system), icon_url, default_language (en, fi or sv, or an empty string to follow the browser), color_mode (single or light_dark) and logo_url. In the Management API the dark mode values sit under dark; in update_theme they are dark_brand_color, dark_page_background_color, dark_card_background_color and dark_logo_url.
  • For a logo or tab icon file, the MCP tool create_logo_upload_url returns a short-lived upload URL (valid for 15 minutes). Upload the image to it, for example curl -F file=@logo.png '<url>', and pass the returned logo_url to update_theme as logo_url, dark_logo_url or icon_url.
  • Both also accept a public https image URL as a logo or tab icon. Authalla downloads it once and serves its own copy, so the login page never loads images from your site. The URL must point straight at the image, without a redirect.

Tips and limitations

  • Text contrast is handled for you, but a brand color close to the card background makes buttons and links hard to spot.
  • With Separate dark mode on, check that your logo reads on the dark background, or upload a dark mode logo.
  • Theme changes apply only to the hosted auth pages listed above.
  • With Separate dark mode on, check both Light and Dark in the preview before saving.
Previous
Custom domains
Next
Sender addresses