Keycloak: Keycloak 主题结构说明

本文件是自定义外观指南的一部分。您可以在这里查看完整指南：在 Stackhero 上轻松为您的 Keycloak 登录页面、账户控制台和邮件进行品牌化：设置您的颜色、Logo、文本，甚至可通过内置在线编辑器创建完整的自定义主题。。

👋 欢迎来到 Stackhero 文档！

Stackhero 提供 Keycloak cloud 服务，让您仅需 2 分钟即可轻松部署可用于生产环境的身份认证服务：

• 无限制的用户、realm 和 client
• 支持 OpenID Connect、OAuth 2.0、SAML 2.0、社交登录、LDAP 及 Active Directory 联邦
• 自定义域名，内置 HTTPS，确保安全访问（例如，https://login.your-company.com）
• 自定义主题：通过内置在线编辑器，轻松定制您的登录页面、账户控制台和邮件内容
• 专属 email 服务器，支持 SPF、DKIM 和 DMARC，自动处理账户确认和密码重置
• 内置 PostgreSQL 数据库，管理控制台可通过独立端口访问并可关闭
• 一键升级，让您的系统始终保持最新，无需手动操作

专注于开发，而不是配置：您可以在 5 分钟内体验 Stackhero 的 Keycloak cloud 解决方案。

主题是一个包含各页面类型子目录的目录结构：

themes/
  acme/
    login/                             # 用户登录页面
      theme.properties                 # 主题继承与 CSS 引用
      resources/css/stackhero.css      # 您的 CSS
      resources/img/logo.svg           # 您的图片
      messages/messages_en.properties  # 您的文本
    account/                           # 用户资料管理
    admin/                             # 管理控制台外观
    email/                             # 邮件模板

主题继承自 Keycloak 标准主题，仅覆盖您需要自定义的部分。典型的 login/theme.properties 文件如下：

parent=keycloak.v2
styles=css/styles.css css/stackhero.css

• parent 设置基础主题。
• styles 列出要加载的 CSS 文件。请将您的 CSS 放在最后，以确保自定义样式生效。

styles 列表会替换父主题的列表，而不是扩展它。务必包含父主题的样式表（css/styles.css），否则页面将丢失默认样式。

只有在需要更改 HTML 结构时，才需用到 FreeMarker 模板（.ftl 文件）。如仅需自定义颜色、Logo、背景、文本和语言，无需编辑模板。更多详情请参阅 Keycloak 主题文档。