Auth UI 品牌设置¶

Authany 让您可以轻松自定义内置的 AuthUI，以满足应用特定的品牌需求。您可以自定义 Logo、文本输入框、按钮等界面元素。

在本指南中，您将了解所有可用的自定义选项。

要打开新的 Authany 设计页面，登录 Authany 管理台，进入品牌 > 外观设计。

设计页面分为两栏。左栏实时预览您的自定义效果，右栏是菜单，包含各个界面元素（如名称、Logo、Favicon）的所有自定义选项。

右上角的语言（Language）下拉菜单，可以让您为特定语言自定义 AuthUI 文本，例如组织名称，以及链接（隐私政策、服务条款和客户支持）。

使用此选项设置要在 AuthUI（登录和注册页面）中显示的应用名称。

主题选项允许您在设计页面和项目中切换浅色模式、深色模式或自动（跟随用户偏好）。选择主题并点击保存按钮后，该主题将应用到您的项目。

选择自动跟随用户偏好主题选项后，AuthUI 会根据具体用户的设置选择主题。

您也可以在设计页面中选择一个主题（深色模式或浅色模式）进一步自定义。详见深色模式部分。

Logo 选项允许您替换 AuthUI 中默认的 Authany Logo，换成您自己的品牌 Logo。您可以上传小于 100 KB 的 PNG、JPG 或 GIF 图片。

使用此选项添加显示在浏览器标签页中的自定义 Favicon。上传的图片尺寸必须是 32px 见方的倍数，且格式为 PNG、JPG 或 GIF。

卡片选项允许您设置 AuthUI 卡片的对齐方式。默认情况下，AuthUI 卡片居中对齐。您可以将对齐方式改为左对齐、右对齐或居中对齐。

使用此选项更改 AuthUI 页面的背景颜色。您可以使用背景颜色（CSS 十六进制颜色代码），也可以上传小于 1 MB 的 PNG、JPEG 或 GIF 图片。

按钮自定义选项让您可以自定义 AuthUI 中按钮的多个属性，具体如下：

主按钮（Primary button）：使用此字段设置按钮的填充颜色。

主按钮文字（Primary button label）：使用此字段设置按钮内文字的颜色。

圆角样式（Border radius style）：在此设置所需的圆角类型，可选直角、圆角和全圆角。

圆角大小（Border radius）：当圆角样式选择圆角时，可以进一步自定义圆角的具体像素大小，用此选项设置圆角的程度。

在链接部分，您可以设置 AuthUI 中链接的文字颜色，也可以配置 AuthUI 上链接的隐私政策、服务条款以及客户支持。

链接颜色（Link color）：使用此选项设置 AuthUI 中链接的文字颜色，值需为十六进制颜色代码。

链接样式（Link decoration）：使用此选项为 AuthUI 中显示的链接添加 underline 文字装饰。

隐私政策（Privacy Policy）：使用此选项添加指向您隐私政策页面的链接。

服务条款（Terms of Service）：使用此选项设置服务条款的自定义链接。

客户支持（Customer Support）：使用此选项添加指向您支持页面的链接。

请注意，如果未设置任何链接属性，AuthUI 会回退使用主语言的默认设置。

输入框部分包含用于设置 AuthUI 文本输入框样式的选项，具体可设置的属性如下：

圆角样式（Border radius style）：使用此选项设置所需的圆角类型，可选直角、圆角和全圆角。

圆角大小（Border radius）：当圆角样式选择圆角时，可使用此选项进一步自定义圆角的弧度。

使用此选项在用户设置页面下添加一个按钮，让用户跳转到您的网站。

您可以使用此开关移除项目 AuthUI 中的 Authany 品牌标识。

AuthUI 默认深色模式和浅色模式的属性都可以自定义。例如，您可以更改深色模式下默认的背景颜色。

要自定义某个属性，先选择要自定义的主题（浅色或深色模式），然后找到要自定义的属性并修改。也可以选择自动跟随用户偏好，同时查看两种主题的自定义选项。

以下是每种主题可自定义的属性：