Share common resources (images and fonts) between theme types (login and account)

Getting advice
1

I’ve got a custom theme for keycloak for the login and the account pages.

I inherit the keycloak theme and make changes to that in
themes/mytheme/login/theme.properties

Where I’ve set parent=keycloak.

I want to share resources (fonts and images) across both the login and account themes.
themes/mytheme/login
themes/mytheme/account

I see that in the keycloak theme there is a themes/keycloak/common thats used to share resources.

So I attempted the same method by creating
themes/mytheme/common.

However when i attempt to share resources between my custom themes by setting the stylesCommon attribute in theme.properties i receive a MIME type error (indicating that the file can’t be found). I’ve attempted to add import=common/mytheme in theme.properties and this didn’t fix the issue.

Could anyone please point me to a working example of a custom theme, inheriting from keycloak, sharing resources between theme types?

Thank you, any help will be much appreciated.

1 Like
2

It sounds like you’re doing the right thing.

For example, if you have a css file in theme/mytheme/common/resources/css/my.css that you want to use in one of your themes, the theme.properties in yourtheme should include:

import=common/mytheme

stylesCommon=css/my.css
3

it doesn’t work :frowning: I have an error 500. Anyone have an idea ?

my structure

.
├── META-INF/
│   └── keycloak-themes.json
└── theme/
    └── my-custom-theme/
        ├── account/
        │   ├── *.ftl
        │   └── theme.properties
        ├── common/
        │   └── resources/
        │       └── css/
        │           └── bootstrap.min.css
        └── login

and my theme.properties (login)

locales=en,fr
styles=css/login.css

# -- which I already tried 
# by default keycloak use common/keycloak 
# (but how to change to my own common resources ? 
# I tried this import=common/my-custom-theme but I have an error 500)
stylesCommon=css/bootstrap.min.css (it's bootstrap file of keycloak (3.4.1 :/)
4

Where is the import in your theme.properties?

5 
import=common/my-custom-theme (I tried this but I have an internal server error)
locales=en,fr

styles=css/login.css
stylesCommon=css/test.css
7

Do you have a public repo I/we can fork and test on? I’ve got something similar working, but without seeing your full setup, I can’t be sure it will work the same way.

8

Was this ever figured out? I am running into the exact same issue.

9

Nope. the problem is not yet solved

10

I got it running by adding the theme type ‘common’ to the custom theme in the keycloak-themes.json.

{
"themes": [
    {
        "name": "client",
        "types": [
            "common",
            "login",
            "email",
            "account"
        ]
    }
}
11

File and Directory Structure:

├── mytheme/
│   ├── common/
│   │   └── resources/
│   │   │   └── scripts/
│   │   │   │   └── theme.js
│   │   │   └── ...
│   │   └── ...
│   ├── login/
│   │   ├── resources/
│   │   │   └── scripts/
│   │   │   │   └── login.js
│   │   │   └── ...
│   │   ├── theme.properties
│   │   └── login.ftl
│   └── ...
└── ...

Content of theme.properties:

parent=base
common=common/mytheme

scriptsCommon=scripts/theme.js 
scripts=scripts/login.js

Content of login.ftl:

<#if properties.scriptsCommon?has_content>
    <#list properties.scriptsCommon?split(' ') as script>
        <#if script?starts_with("http") || script?starts_with("//")>
            <script src="${script}"></script>
        <#else>
            <script src="${url.resourcesCommonPath}/${script}"></script>
        </#if>
    </#list>
</#if>

<#if properties.scripts?has_content>
    <#list properties.scripts?split(' ') as script>
        <#if script?starts_with("http") || script?starts_with("//")>
            <script src="${script}"></script>
        <#else>
            <script src="${url.resourcesPath}/${script}"></script>
        </#if>
    </#list>
</#if>