如何修改Keycloak管理控制台自身主题（非登录/账户等页面主题）

1. 创建自定义主题目录结构 #

在Keycloak安装目录的themes文件夹下，新建自定义主题文件夹（示例命名为my-admin-theme），并搭建如下目录结构：

my-admin-theme/
├── admin/
│   ├── resources/
│   │   ├── css/
│   │   │   └── custom-styles.css
│   └── theme.properties
└── theme.properties

2. 配置主题继承规则 #

• 根目录下的theme.properties：指定继承官方默认的管理控制台主题

  parent=keycloak
  

• admin子目录下的theme.properties：声明该目录为管理控制台主题的配置入口

  parent=keycloak/admin
  styles=css/custom-styles.css
  

3. 编写自定义样式 #

在admin/resources/css/custom-styles.css中添加你需要的样式修改，比如调整侧边栏、顶部导航栏的外观：

/* 修改管理控制台侧边栏背景色 */
.pf-c-sidebar {
    background-color: #2d3748;
}

/* 修改顶部导航栏链接文字颜色 */
.pf-c-page__header-nav .pf-c-nav__link {
    color: #ffffff;
}

4. 配置Keycloak启用自定义主题 #

传统WildFly版本（Keycloak 16及以下） #

打开standalone/configuration/standalone.xml（集群模式用standalone-ha.xml），找到<theme>节点，更新admin主题配置：

<theme>
    <admin>
        <theme>my-admin-theme</theme>
    </admin>
    <!-- 其他主题配置保持原有内容不变 -->
</theme>

Quarkus版本（Keycloak 17及以上） #

修改conf/keycloak.conf文件，添加如下配置：

theme.admin=my-admin-theme

5. 重启Keycloak服务 #

重启后，管理控制台会自动加载你的自定义主题样式。

注意事项 #

• 管理控制台基于PatternFly组件库开发，可通过浏览器开发者工具定位需要修改的元素类名，再编写对应样式。
• 若需修改页面布局、组件逻辑等复杂内容，需打包自定义前端资源替换内置的管理控制台文件，该方式复杂度较高，仅推荐特殊场景使用。

内容的提问来源于stack exchange，提问作者ESM