Add custom Keycloak theme

Description

Closes #37 (closed)

Everyone likes branding so adding an Arch Linux based custom theme to Keycloak will make people happy enough to forget their daily troubles .

Acceptance Criteria

The Keycloak theme resembles the Arch Linux website in terms of coloring scheme and aesthetics.

Breakdown

• There are four sections that can be customized: login, account, admin console and email.

• The following color palette is used throughout the custom theme:

• The custom theme (archtheme) is a modification of the existing default theme (keycloak)

• Type of change

• Visual change (non-breaking change which modifies the appearance of a component)

Additional info

• When extending a theme we can override individual resources (templates, stylesheets, etc.). If we decide to override HTML templates bear in mind that we may need to update our custom template when upgrading to a new release.

• While creating a theme it’s a good idea to disable caching as this makes it possible to edit theme resources directly from the themes directory without restarting Keycloak. We need to remember to re-enable caching in production as it will significantly impact performance (currently development is only taking place on my local machine but added for clarity).

  ./standalone/configuration/standalone.xml
  

  <theme>
      <staticMaxAge>-1</staticMaxAge>
      <cacheThemes>false</cacheThemes>
      <cacheTemplates>false</cacheTemplates>
      ...
  </theme>

• Do not put anything except characters in the theme name or it'll break (currently set as archtheme).

• Once custom theme is complete, Ansible will be used to copy the theme under the Keycloak theme directory

• With the exception of the Ansible playbook (provided to test the changes locally) all files are committed in the same directory structure that Keycloak expects the themes to be in so that we know where to copy the files on the actual server (only modified files will be committed).

How Has This Been Tested?

Using a Keycloak Docker image to spin up a local instance via Ansible to test the theme in an iterative manner. The local instance is set to use the default "keycloak" theme and the modified files (css, templates, images etc) are copied over to essentially override the default theme. An Ansible playbook is provided in the theme folder to facilitate local development.

• Test Configuration:
  • OS: Arch Linux
  • Ansible: 2.9.11
  • Docker: 19.03.12-ce, build 48a66213fe

Progress (section will keep being updated)

• Login Theme

• Welcome Theme

• Account Theme Preview

• Admin Theme

• Email Theme

No changes to the messages content is necessary

Currently I am working on the login screen.

This is the only screen I can compare because I can see it when logging in to GitLab. I am not sure about the other parts but will assume they are based on the default theme.

Here is a before and after screenshot. I will try to finish one part at a time before moving to the next one. Feedback is not only welcome but required!

Before:

After(WIP):

Questions:

1. Prefer an image or static color for background?
2. Use only dark colors or a mix of both is OK (for example the login card)?

Note:

Remember me and Forgot password links are completely missing - not sure why is that. Maybe because the after image is based on my local instance - will look into that.

I think just a black solid background is maybe a bit harsh. Also the particular Arch logo you used could be of better quality and a bit larger. Apart from that good update. Looking forward to the next iteration.

Actually I'm just reading the official guide on this and it would appear there are ways to do this with less copying of the whole thing required. Perhaps you can look into that? I'm a bit uncomfrtoable with the big diff right now and perhaps we can distill it down to just the actual stylesheet changes or whatnot.

Hello @svenstaro thank you very much for the feedback.

I will try to find a suitable background image that goes well with the Arch logo then. I feel the default one does not really fit in with the overall aesthetics maybe is too busy. I will post a few images and maybe we can decide that way before committing anything.

Now in terms of the big diff, yes indeed I am aware that we can copy only the relevant parts rather than the whole theme (I am following the same guide) but was not sure which parts we will need to update that is why I included everything.

For example currently we only modify the login.css part everything else uses the default theme. I guess I could just add the modified files as we go rather than keep editing the whole theme. I will give it a go no worries.

What about the default theme though? Does it make sense to keep a copy in the project just in case or shall I get rid of that as well?

Sample login screens volume 2 (background images from unsplash):

I went with minimal and black and white tone images because the Arch Linux logo is colorful enough and might clash with busy background images.

General feedback (background selection, sizing, positioning etc) is welcome. Also feel free to point me to any image you think might be better and will try it out and upload an image.

Edit: the login card can also be modified but not sure if that is necessary. Please share your thoughts.

Most of these are too busy IMO and don't contrast the logo too nicely in all places. Of all of these, I like this one the most.

Have you tried just going with a solid color like #f6f9fc?

Alternatively, I found a few more simple ones:

• https://unsplash.com/photos/gM8igOIP5MA
• https://unsplash.com/photos/cGNCepznaV8
• https://unsplash.com/photos/6a3nqQ1YwBw

Hello, cool I will try the images you provided (and maybe some other similar ones) and we can decide which one fits best. I see we should be aiming for a dark background so will keep that in mind.

Sorry for the back and fourth but this is really a subjective thing and cannot really decide on my own.

In terms of a static color I though that it might be too blunt like the black one above but will also try the color you provided.

I will upload new screenshots and we go from there.

Login screens volume 3

I'm liking some of these a lot! My favorites: 1 and 2. Please use a vector version of the Arch logo though.

@jelle @grazzolini @anthraxx What do you guys think?

Number 1 please. The darker the better. Also, I don't like stuff that dark reader can't turn to dark so, I'd say, hardcoded images are not a good idea.

Shall we aim for a completely dark theme then including the login card?

Something like this maybe?

The blue letters might be hard to read, I liked https://gitlab.archlinux.org/archlinux/infrastructure/uploads/1ac48be7d0374d105a4840067e412505/image.png more

Cool, sounds good to me. I will just wait for confirmation then and push the changes for the login screen. In the meantime I will have a look to see if we can theme anything else.

@svenstaro

I am not exactly sure how to view the current welcome screem, admin pages but I guess we might need to theme those as well? Do we even have a welcome screen in place?

Here is what they look with the default keycloak theme:

Welcome screen:

Admin Console:

There are also

• Account theme: user account management pages theme
• Email theme: theme for emails sent by the server

since login is more or less decided I can start tinkering with another component if necessary.

Yes, good thinking. So optimally I'd like for all the mentioned parts to be themed. I don't want a user to randomly hit a page somewhere and be like "huh is this still Arch?"

You'll be unable to view the current admin e theme for security reasons.

So themes for:

• admin pages
• user account management
• emails
• welcome screen

Great, will start looking into the welcome screen next!

I will try to keep the same dark theme going.

We can even use the same background image as the login screen but will play a bit with it and come up with a few samples and we go from there.

Sounds great and this is already shaping up rather nicely. Keep up the good work!

changed the description

added 5 commits

• 9c974009 - Remove backup of default keycloak theme
• d5cc018c - Remove standalone custom theme (archtheme)
• ee5757af - Remove docker-compose file because of switch to Ansible
• d5ffbadf - Add custom theme (archtheme) login screen images
• 269b2d6d - Add custom theme (archtheme) login screen css file

Compare with previous version

I have updated the PR information and got rid of the excess files as discussed. I will also commit the local testing Ansible playbook unless there are any objections to that.

Now, since there are no diffs to see what actually changes I am also copying here a diff of our login theme with the default one not sure if is necessary but without it will be difficult to see what actually were the modifications.

--- archtheme/login/resources/css/login.css	2020-07-26 16:11:47.040912763 +0900
+++ default/login/resources/css/login.css	2020-07-10 15:53:57.180397203 +0900
@@ -1,5 +1,5 @@
 .login-pf body {
-    background: url("../img/login-background.jpg") no-repeat center center fixed;
+    background: url("../img/keycloak-bg.png") no-repeat center center fixed;
     background-size: cover;
     height: 100%;
 }
@@ -86,10 +86,10 @@
 }
 
 div.kc-logo-text {
-    background-image: url(../img/archlinux-logo-light.svg);
+    background-image: url(../img/keycloak-logo-text.png);
     background-repeat: no-repeat;
-    height: 199px;
-    width: 600px;
+    height: 63px;
+    width: 300px;
     margin: 0 auto;
 }
 

And two images (background and Arch Linux logo) were added to the resources of the login theme.

A local Ansible playbook might be useful for people to test this but I'm honestly not sure where it would fit in the repo. I certainly want to rule out any chance of it being confused with the actual playbooks. You can make a suggestion and we'll see how it fits.