keycloak 用户迁移：Keycloak主题定制
keycloak 用户迁移：Keycloak主题定制通过压缩包部署的Keycloak服务，其欢迎页配置需要修改keycloak安装目录/standalone/configuration下的standalone.xml文件，在theme节点下增加welcomeTheme节点，节点的值为主题名称。当然，该主题下需要包含欢迎页面部分的样式主题配置比较简单，主要的例外是欢迎页配置即一套主题可以包含如上五个方面的样式，可以针对不同的部分选择不同的样式。Keycloak的主题文件在安装目录的themes目录下themes目录下的每一个子目录就是一套主题，主题的名字就是子目录的名称，例如，上图themes目录下有个keycloak的子目录，那就会有一套名为keycloak的主题，该主题包含的内容在其子目录中，例如，keycloak目录下包含了account、admin、login、welcome等子目录，这些子目录就对应各个方面的样式。例如，welcom
概述我们之前在操作Keycloak管理控制台的时候，控制台界面的样式是Keycloak默认提供的，例如，欢迎页面如下
这个页面的背景、logo都是Keycloak默认的，再比如登录页，如下
这里的logo和背景也是Keycloak默认提供的。一般情况下，将Keycloak集成到公司产品，整体输出时，会统一产品的样式，所以需要对Keycloak控制台页面的样式做修改。而Keycloak为网页和电子邮件提供了主题支持，允许定制面向终端用户的页面的外观，以便可以与公司的其他应用统一。
Keycloak主题类型一套主题涵盖了Keycloak多个方面的样式，每一个方面的样式称为一种类型。具体的类型如下：
- 帐户-帐户管理
- 管理—管理控制台
- 电子邮件-电子邮件
- 登入-登入页面
- 欢迎-欢迎页面
即一套主题可以包含如上五个方面的样式，可以针对不同的部分选择不同的样式。
Keycloak的主题文件在安装目录的themes目录下
themes目录下的每一个子目录就是一套主题，主题的名字就是子目录的名称，例如，上图themes目录下有个keycloak的子目录，那就会有一套名为keycloak的主题，该主题包含的内容在其子目录中，例如，keycloak目录下包含了account、admin、login、welcome等子目录，这些子目录就对应各个方面的样式。例如，welcome子目录下包含的就是欢迎页面相关的样式。一套主题可以只包含某些方面的样式，例如，有个名为test的theme，其只包含login子目录，这样也是可以的，表示该主题只是针对登录页面做了定制。主题的内容无非就是一些js、css、图片、配置文件等，如下：
主题配置比较简单，主要的例外是欢迎页配置
欢迎页配置- 压缩包方式部署
通过压缩包部署的Keycloak服务，其欢迎页配置需要修改keycloak安装目录/standalone/configuration下的standalone.xml文件，在theme节点下增加welcomeTheme节点，节点的值为主题名称。当然，该主题下需要包含欢迎页面部分的样式
- docker部署
通过docker方式部署的keycloak，可以配置KEYCLOAK_WELCOME_THEME环境变量，指定对应的主题名称，具体可以参考官方说明：https://hub.docker.com/r/jboss/keycloak
其他页面配置其他页面的主题配置都是在Keycloak管理控制台对应的realm中配置的，具体操作如下：
打开Keycloak控制台，选择需要修改主题的realm，切换到Themes tab页，就可以针对不同的部分选择不同的主题，页可以通过Internationalization Enabled选项配置该realm对应的国际化信息。配置完正常需要重启服务才会生效。测试阶段可以禁用缓存，这样配置完主题后刷新页面就能直接看到效果了，操作如下：
还是修改standalone.xml文件，修改theme节点，如上图
Keycloak自定义主题Keycloak提供的默认主题有时不能满足要求，就需要自定义主题。自定义主题也需要遵从Keycloak的主题规范，将主题相关的资源放到themes目录下。一般情况下，我们也只需要修改一下国际化信息，修改欢迎页、登录页背景及logo即可，下面我们来自定义一套主题，实现自定义欢迎页背景、logo以及登录页logo、背景，并配置国际化信息，支持中文。
国际化配置这里我们就来修改下默认的master realm的国际化信息，改成中文展示。登录Keycloak控制台，切换到Master Realm，点击左侧Realm Settings，切换到Themes tab页，打开Internationalization Enabled开关，在Default Locale中选择zh-CN 点击保存，如下图
保存后刷新页面，会发现已经使用中文展示了(前提是禁用了主题缓存)，如下图：
一般情况下，我们只是对现有的样式做一些微调，所以是不需要从头到尾编写主题样式的。通常的做法是继承Keycloak默认提供的主题，然后针对特定的部分修改样式。具体操作如下：
- 复制一份默认的名为keycloak的主题(即复制themes目录下的keycloak子目录)，并修改名称为mykeycloak 如下图
- 修改欢迎页背景
借助浏览器调试工具，发现欢迎页的背景图样式是在body样式中指定的，具体是在keycloak主题的welcome部分中的welcome.css文件中，如下图
这样就比较简单了，直接打开themes/mykeycloak/welcome/resources/css/welcome.css文件，定位到对应的样式部分，如下图：
把需要替换的背景图放到resources目录下，然后替换这里的bg.png 如下图所示
修改welcome.css文件，如下图：
由于修改的是欢迎页面样式，需要修改standalone.xml文件，修改theme节点，如下：
welcomeTheme节点的值mykeycloak就是我们自定义主题的名称
重启服务后再访问欢迎页面，如下：
可以看到欢迎页背景图已经改变了
- 修改登录页背景图
登录页背景图修改也是类似，首先借助浏览器调试工具，定位到登录页背景样式，如下图：
可以看出，登录页的背景图是在body元素的样式中设置的，具体是在login部分的login.css中设置的，这样就比较简单了，直接打开themes/mykeycloak/login/resources/css/login.css文件，定位到对应的样式部分，如下图：
我们把刚才的背景图复制一份到mykeycloak/login/resources/img目录下，如下图：
修改login.css文件，如下：
然后登录到Keycloak控制台，修改master realm的登录页主题配置，具体如下图：
在登录主题部分，选择我们创建的自定义主题mykeycloak，点击保存后退出登录，回到登录页，如下：
可以看出，登录页面的背景图页换了。
其他部分的样式微调也是类似，先借助浏览器调试工具找到对应部分的样式，再调整即可。
主题地址https://github.com/ywu2014/keycloak-demo/tree/master/keycloak-theme
