Do some styling

src/kc.gen.tsx

@@ -10,9 +10,9 @@
 
 import { lazy, Suspense, type ReactNode } from "react";
 
-export type ThemeName = "keycloakify-starter";
+export type ThemeName = "pydis-theme";
 
-export const themeNames: ThemeName[] = ["keycloakify-starter"];
+export const themeNames: ThemeName[] = ["pydis-theme"];
 
 export type KcEnvName = never;
 

src/login/KcPage.tsx

@@ -1,3 +1,4 @@
+import "./main.css"
 import { Suspense, lazy } from "react";
 import type { ClassKey } from "keycloakify/login";
 import type { KcContext } from "./KcContext";

src/login/main.css

@@ -0,0 +1,27 @@
+body.kcBodyClass {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.2),
+            rgba(0, 0, 0, 0.4)), url("./assets/banner_pattern.svg");
+    background-size: 256px;
+    background-repeat: repeat;
+    height: 100%;
+}
+
+div.kc-logo-text {
+    background-image: url(./assets/pydis-light.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 85%;
+    height: 75px;
+    width: 300px;
+    margin: 0 auto;
+}
+
+@media (max-width: 767px) {
+    div.kc-logo-text {
+        margin: 0;
+        background-image: url(./assets/pydis-dark.png);
+        width: 150px;
+        height: 50px;
+        background-size: 100%;
+    }
+}