Keycloak: 了解 Keycloak 主题结构

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

👋 欢迎查阅 Stackhero 文档！

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

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

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

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

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 主题文档。