feat(ui): allow configuring background via css instead of an image

[flbraun]

Thank you for Tinyauth! This is my first contribution to this project.

The default background image (foggy forest) transfers ~550kB over the wire on a cold cache. Many of my users run on spotty and slow connections and report that loading the background image causes severe UI flickering.

I'm aware that one may configure a custom, smaller background image via the TINYAUTH_UI_BACKGROUNDIMAGE setting, but I think I've found an even better solution for this scenario: The new TINYAUTH_UI_BACKGROUNDCSS config allows specifying the value of the backdrop's background CSS property. With modern browser's CSS capabilities, this allows for a surprising amount of creativity and doesn't require any additional network transfers.

For example, setting TINYAUTH_UI_BACKGROUNDCSS="linear-gradient(135deg, #03045e 0%, #0077b6 50%, #00b4d8 100%)" makes the UI look like this:

Your thoughts about this? Is anything missing from this PR?

Summary by CodeRabbit

• New Features
  • Added support for configuring the UI background with custom CSS.
  • Custom background CSS takes precedence over the configured background image.
  • Added an environment variable example for setting the background CSS.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 0417ff5c-ea6f-44df-b603-bea03c2967bd

📥 Commits

Reviewing files that changed from the base of the PR and between 4bb7669 and f7d1ee4.

📒 Files selected for processing (7)

• .env.example
• frontend/src/components/layout/layout.tsx
• frontend/src/schemas/app-context-schema.ts
• internal/controller/context_controller.go
• internal/controller/context_controller_test.go
• internal/model/config.go
• internal/test/test.go

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds a UI background CSS configuration value, exposes it through the app context, validates it in the frontend, and gives it precedence over the configured background image.

Changes

UI background CSS

Layer / File(s)	Summary
Configuration and app-context propagation internal/model/config.go, .env.example, internal/controller/context_controller.go, internal/test/test.go, internal/controller/context_controller_test.go	BackgroundCSS is added to UI configuration and app-context responses. The environment example and test data include the new value.
Frontend background rendering frontend/src/schemas/app-context-schema.ts, frontend/src/components/layout/layout.tsx	The frontend validates backgroundCss. BaseLayout uses it when set and otherwise renders the background image with the existing positioning.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to f7d1e

This change adds an optional configurable CSS background while preserving the existing image fallback, with no actionable merge-blocking risk remaining after normal checks and review.

Suggested reviewers: steveiliop56

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 6 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: allowing the UI background to be configured with CSS instead of an image.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 6 files. (1 skipped: 1 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}