esphome / esphome/feature-requests

Allow Customization of Captive Portal UI

Open
#2,796 1 comment 8 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
450
Forks
29
PR merge metrics
No merged PRs in 30d

Description

**Describe the problem you have/What new integration you would like**

It would be great if you we could supply a custom stylesheet for the captive portal. This would allow customization of the entire UI, adding a logo using data URIs and such.

Currently the captive portal feature doesn't have any configuration, so adding optional config to specify either CSS inline, or point to a file, would be great. There may need to be limits on the size of the CSS.

Ideally this would look like:

```yaml
captive_portal:
custom_styles: {string}
```

If the value starts with a `/` then it is interpreted as a file path, if it's anything else, it would be interpreted as a stylesheet. Either way, it should be injected into the page using `…` tags.

**Please describe your use case for this integration and alternatives you've tried:**

The use case is to allow makers of "Made for ESPHome" devices to customize their users onboarding experience. This ties nicely into the new ESPHome onboarding experience in Home Assistant.

I don't believe there are any viable alternatives for this except a local esphome change.

**Additional context**

None

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no files, tests, or entry points; first locate the captive portal UI and its configuration handling. Confirm the request is still wanted, then define how optional inline and file-based custom_styles values, size limits, and stylesheet injection should work; done means the portal renders the requested customization.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, yaml
Domain
embedded-iot, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.