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 a custom CSS value.
  • Custom background CSS takes precedence over the configured background image.
  • Added the TINYAUTH_UI_BACKGROUNDCSS environment variable for background customization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 0ce6fc94-3f0f-4bd4-b106-2a7aad3f0cc5

📥 Commits

Reviewing files that changed from the base of the PR and between f7d1ee4 and 342ea02.

📒 Files selected for processing (2)

• .env.example
• internal/model/config.go

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

---

📝 Walkthrough

Walkthrough

The change adds configurable UI background CSS. The value flows from configuration to the app context. BaseLayout uses it before the existing background image fallback.

Changes

UI background CSS

Layer / File(s)	Summary
Configuration and app-context propagation .env.example, internal/model/config.go, internal/controller/context_controller.go, internal/controller/context_controller_test.go	The UI configuration and app-context response now include BackgroundCSS. The environment variable documentation and controller test expectation were updated.
Frontend background rendering frontend/src/schemas/app-context-schema.ts, frontend/src/components/layout/layout.tsx	The frontend schema requires backgroundCss. BaseLayout applies that CSS value when present and otherwise uses the background image with cover positioning.

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

Change: Feature

Suggested reviewers: steveiliop56

Sequence Diagram(s)

sequenceDiagram
  participant Environment
  participant appContextHandler
  participant BaseLayout
  Environment->>appContextHandler: Configure TINYAUTH_UI_BACKGROUNDCSS
  appContextHandler->>BaseLayout: Provide backgroundCss in app context
  BaseLayout->>BaseLayout: Apply CSS background or background image fallback

Loading

Merge Risk: ⚪ Minimal · up to 342ea

The configuration-to-rendering flow is covered by the implemented contract, with no merge-blocking risk identified.

🚥 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 use configurable 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.}

[steveiliop56]

Haha sounds like a fun feature. Code looks good to me, I will handle the conflicts. Thanks!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!