Add custom theme support

[dhoeben]

Proposed change

Add option to add custom themes. For now the custom themes need to be an exact match of all the variables, because there is no fallback. This is exactly how the other themes are used as of now.

To create a custom theme:

1. Create folder /themes
2. Copy theme.css from repo /web/themes/.css
3. Adjust
4. Select from UI like any other theme

Naming will be automatic, so theme-xmas-2025.css will be Xmas-2025 in the list.

I will add a PR for the docs, containing an example theme.css file. Maybe in the future we can add CSS fallback to variables, to make themes more save.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code
• Documentation Update

Additional information

• This PR is related to issue: Feature request - allow custom themes #21347

Checklist

• The code change is tested and works locally.
• Local tests pass. Your PR cannot be merged unless tests pass
• There is no commented out code in this PR.
• UI changes including text have used i18n keys and have been added to the en locale.
• The code has been formatted using Ruff (ruff format frigate)

[netlify]

✅ Deploy Preview for frigate-docs canceled.

Name	Link
🔨 Latest commit	164387d
🔍 Latest deploy log	https://app.netlify.com/projects/frigate-docs/deploys/694a6e9f79405900084b9b15

[hawkeye217]

Thanks for this PR. There are a number of issues that need to be addressed before we would consider merging:

• You've added a fetch inside a useEffect that re-runs often. The guard (__frigateThemesLoaded) prevents multiple network requests but feels hacky and relies on a global mutation to enforce single-run. SWR should be used for caching/revalidation instead of fetch.
• You're mutating an exported const (colorSchemes.push()) at runtime.
• There is a race condition, where theme selection from localStorage may be applied before your custom theme links are injected, so the UI could flash and briefly show wrong styles or not reflect the selected theme.
• There is a potential security vulnerability where your custom theme filenames are used directly to construct hrefs, these should be validated/sanitized to avoid path traversal.

[hawkeye217]

Also, Frigate 0.17 is feature-frozen, so if you do decide to refactor this, it would need to be based on the 0.18 branch.

[dhoeben]

Also, Frigate 0.17 is feature-frozen, so if you do decide to refactor this, it would need to be based on the 0.18 branch.

I'll look into the issues after the holidays probably. I'll change the branch. Happy Holidays!

[dhoeben]

Should be fixed, happy holidays 🎄

[NickM-27]

you'll need to rebase without the changes from dev

[dhoeben]

you'll need to rebase without the changes from dev

Of course, I was too quick, sorry. Should be fixed now.

[ZhaiSoul]

you can use npm run lint:fix command fix