Building

src/keycloakTheme/KcApp.css

@@ -5,4 +5,12 @@
 
 .my-font {
 	font-family: 'Work Sans';
+}
+
+.my-root-class {
+	background: white;
+}
+
+.my-root-class body {
+	background: url(./assets/background.svg) no-repeat center center fixed;
 }

src/keycloakTheme/KcApp.tsx

@@ -1,24 +1,31 @@
 import "./KcApp.css";
 import { lazy, Suspense } from "react";
 import type { KcContext } from "./kcContext";
-import { useI18n, type I18n } from "./i18n";
-import Fallback, { defaultKcProps, type PageProps } from "keycloakify";
+import { useI18n } from "./i18n";
+import Fallback, { defaultKcProps, type KcProps, type PageProps } from "keycloakify";
+// Here we have overloaded the default template, however you could use the default one with:  
+//import Template from "keycloakify/lib/Template";
 import Template from "./Template";
-import { KcContextBase } from "keycloakify/lib/getKcContext";
-import type { I18nBase } from "keycloakify/lib/i18n";
-import type { TemplateProps } from "keycloakify";
 
-const Login = lazy(()=> import("keycloakify/lib/pages/Login"));
+const Login = lazy(() => import("keycloakify/lib/pages/Login"));
 const Register = lazy(() => import("./pages/Register"));
 const Terms = lazy(() => import("./pages/Terms"));
 const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
 const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
 
-type Props = {
-    kcContext: KcContext;
+// This is like editing the theme.properties 
+// https://github.com/keycloak/keycloak/blob/11.0.3/themes/src/main/resources/theme/keycloak/login/theme.properties
+const kcProps: KcProps = {
+    ...defaultKcProps,
+    // NOTE: The classes are defined in ./KcApp.css
+    "kcHeaderWrapperClass": "my-color my-font",
+    "kcHtmlClass": [...defaultKcProps.kcHtmlClass, "my-root-class"],
 };
 
-export default function App({ kcContext }: Props) {
+export default function App(props: { kcContext: KcContext; }) {
+
+    const { kcContext } = props;
+
     const i18n = useI18n({ kcContext });
 
     //NOTE: Locales not yet downloaded
@@ -26,52 +33,23 @@ export default function App({ kcContext }: Props) {
         return null;
     }
 
-    const props = {
+    const pageProps: Omit<PageProps<any, typeof i18n>, "kcContext"> = {
         i18n,
         Template,
-        ...defaultKcProps,
-        // NOTE: The classes are defined in ./KcApp.css
-        "kcHeaderWrapperClass": "my-color my-font"
-    } satisfies Omit<PageProps<any, I18n>, "kcContext">;
-
-
+        doFetchDefaultThemeResources: true,
+        ...kcProps,
+    };
 
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
-                    case "login.ftl": return <Login {...{kcContext, ...props }} />;
-                    case "register.ftl": return <Register {...{ kcContext, ...props }} />;
-                    case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
-                    case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
-                    case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
-                    default:
-
-                        //console.log(xxxx);
-
-                        //const x: KcContextBase = kcContext;
-                        //console.log(Template2, x);
-
-                        //const y: I18nBase = i18n;
-
-                        //const zz: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<KcContext, I18n>;
-                        //const z: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<typeof kcContext, I18n>;
-                        type XX = typeof kcContext;
-                        const Template2: (props: TemplateProps<KcContextBase, I18nBase>) => JSX.Element | null= null as any as (( props: TemplateProps<XX, I18n>)=> JSX.Element | null);
-
-
-                        //const Template3= (props: TemplateProps<typeof kcContext, I18n>)=> <Template {...props}/>;
-
-                        /*
-                        const xxxx: PageProps<KcContextBase, I18nBase> = {
-                            "kcContext": kcContext,
-                            ...defaultKcProps,
-                            "Template": Template3,
-                            "i18n": i18n
-                        };
-                        */
-
-                        return <Fallback {...{ kcContext, ...props }} Template={Template3}  />;
+                    case "login.ftl": return <Login {...{ kcContext, ...pageProps }} />;
+                    case "register.ftl": return <Register {...{ kcContext, ...pageProps }} />;
+                    case "terms.ftl": return <Terms {...{ kcContext, ...pageProps }} />;
+                    case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...pageProps }} />;
+                    case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...pageProps }} />;
+                    default: return <Fallback {...{ kcContext, ...pageProps }} />;
                 }
             })()}
         </Suspense>

src/keycloakTheme/Template.tsx

@@ -9,9 +9,7 @@ import { assert } from "keycloakify/lib/tools/assert";
 import { clsx } from "keycloakify/lib/tools/clsx";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import type { TemplateProps } from "keycloakify/lib/KcProps";
-//import type { KcContextBase } from "keycloakify/lib/getKcContext";
 import type { KcContext } from "./kcContext";
-// Here Instead of KcContextBase.Common you should provide your own context
 import type { I18n } from "./i18n";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
@@ -118,7 +116,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                         {locale.supported.map(({ languageTag }) => (
                                             <li key={languageTag} className="kc-dropdown-item">
                                                 {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                                <a href="#" onClick={()=> changeLocale(languageTag)}>
+                                                <a href="#" onClick={() => changeLocale(languageTag)}>
                                                     {labelBySupportedLanguageTag[languageTag]}
                                                 </a>
                                             </li>
@@ -212,7 +210,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                     <div className={clsx(props.kcFormGroupClass)}>
                                         <input type="hidden" name="tryAnotherWay" value="on" />
                                         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                        <a href="#" id="try-another-way" onClick={()=>{
+                                        <a href="#" id="try-another-way" onClick={() => {
                                             document.forms["kc-select-try-another-way-form" as never].submit();
                                             return false;
                                         }}>