From f7d1ee43bc3aa1f80a31fc191e377668eeeb88b9 Mon Sep 17 00:00:00 2001
From: flbraun <mail@chiron-online.de>
Date: Fri, 28 Aug 2026 12:31:56 +0200
Subject: [PATCH] feat(ui): allow configuring background via css instead of an
 image

---
 .env.example                                   |  2 ++
 frontend/src/components/layout/layout.tsx      | 14 +++++++++-----
 frontend/src/schemas/app-context-schema.ts     |  1 +
 internal/controller/context_controller.go      |  2 ++
 internal/controller/context_controller_test.go |  1 +
 internal/model/config.go                       |  1 +
 internal/test/test.go                          |  1 +
 7 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/.env.example b/.env.example
index bd9843bf7..0577e7498 100644
--- a/.env.example
+++ b/.env.example
@@ -205,6 +205,8 @@ TINYAUTH_UI_TITLE="Tinyauth"
 TINYAUTH_UI_FORGOTPASSWORDMESSAGE="You can change your password by changing the configuration."
 # Path to the background image.
 TINYAUTH_UI_BACKGROUNDIMAGE="/background.jpg"
+# Value of the CSS background property, takes precedence over the background image.
+TINYAUTH_UI_BACKGROUNDCSS=
 # Enable UI warnings.
 TINYAUTH_UI_WARNINGSENABLED=true
 
diff --git a/frontend/src/components/layout/layout.tsx b/frontend/src/components/layout/layout.tsx
index 3139022f1..e0b3f8a8f 100644
--- a/frontend/src/components/layout/layout.tsx
+++ b/frontend/src/components/layout/layout.tsx
@@ -15,11 +15,15 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
       className="flex flex-col justify-center items-center min-h-svh px-4"
-      style={{
-        backgroundImage: `url(${ui.backgroundImage})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
+      style={
+        ui.backgroundCss
+          ? { background: ui.backgroundCss }
+          : {
+              backgroundImage: `url(${ui.backgroundImage})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }
+      }
     >
       <div className="absolute top-4 right-4">
         <QuickActions />
diff --git a/frontend/src/schemas/app-context-schema.ts b/frontend/src/schemas/app-context-schema.ts
index f8740a704..82647d2b3 100644
--- a/frontend/src/schemas/app-context-schema.ts
+++ b/frontend/src/schemas/app-context-schema.ts
@@ -18,6 +18,7 @@ const uiSchema = z.object({
   title: z.string(),
   forgotPasswordMessage: z.string(),
   backgroundImage: z.string(),
+  backgroundCss: z.string(),
   warningsEnabled: z.boolean(),
 });
 
diff --git a/internal/controller/context_controller.go b/internal/controller/context_controller.go
index abfabaad3..780edd04d 100644
--- a/internal/controller/context_controller.go
+++ b/internal/controller/context_controller.go
@@ -56,6 +56,7 @@ type ACRUI struct {
 	Title                 string `json:"title"`
 	ForgotPasswordMessage string `json:"forgotPasswordMessage"`
 	BackgroundImage       string `json:"backgroundImage"`
+	BackgroundCSS         string `json:"backgroundCss"`
 	WarningsEnabled       bool   `json:"warningsEnabled"`
 }
 
@@ -161,6 +162,7 @@ func (controller *ContextController) appContextHandler(c *gin.Context) {
 			Title:                 controller.config.UI.Title,
 			ForgotPasswordMessage: controller.config.UI.ForgotPasswordMessage,
 			BackgroundImage:       controller.config.UI.BackgroundImage,
+			BackgroundCSS:         controller.config.UI.BackgroundCSS,
 			WarningsEnabled:       controller.config.UI.WarningsEnabled,
 		},
 		App: ACRApp{
diff --git a/internal/controller/context_controller_test.go b/internal/controller/context_controller_test.go
index 2a3bc5459..c188adec6 100644
--- a/internal/controller/context_controller_test.go
+++ b/internal/controller/context_controller_test.go
@@ -45,6 +45,7 @@ func TestContextController(t *testing.T) {
 						Title:                 cfg.UI.Title,
 						ForgotPasswordMessage: cfg.UI.ForgotPasswordMessage,
 						BackgroundImage:       cfg.UI.BackgroundImage,
+						BackgroundCSS:         cfg.UI.BackgroundCSS,
 						WarningsEnabled:       cfg.UI.WarningsEnabled,
 					},
 					App: ACRApp{
diff --git a/internal/model/config.go b/internal/model/config.go
index 80b986f06..4f0e0595e 100644
--- a/internal/model/config.go
+++ b/internal/model/config.go
@@ -205,6 +205,7 @@ type UIConfig struct {
 	Title                 string `description:"The title of the UI." yaml:"title,omitempty"`
 	ForgotPasswordMessage string `description:"Message displayed on the forgot password page." yaml:"forgotPasswordMessage,omitempty"`
 	BackgroundImage       string `description:"Path to the background image." yaml:"backgroundImage,omitempty"`
+	BackgroundCSS         string `description:"Value of the CSS background property, takes precedence over the background image." yaml:"backgroundCss,omitempty"`
 	WarningsEnabled       bool   `description:"Enable UI warnings." yaml:"warningsEnabled,omitempty"`
 }
 
diff --git a/internal/test/test.go b/internal/test/test.go
index 031d5e1fe..f0f9bdcee 100644
--- a/internal/test/test.go
+++ b/internal/test/test.go
@@ -19,6 +19,7 @@ func CreateTestConfigs(t *testing.T) (model.Config, model.RuntimeConfig) {
 			Title:                 "Tinyauth Test",
 			ForgotPasswordMessage: "foo",
 			BackgroundImage:       "/background.jpg",
+			BackgroundCSS:         "linear-gradient(135deg, #03045e 0%, #0077b6 50%, #00b4d8 100%)",
 			WarningsEnabled:       true,
 		},
 		OAuth: model.OAuthConfig{