Skip to content

Allow @import url() in Status Page Custom CSS to load external stylesheets #7339

@jbakalarski

Description

@jbakalarski

📑 I have found these related issues/pull requests

I searched through open and closed issues as well as pull requests and found no related issues or pull requests addressing this topic.

🔖 Feature description

Currently, the status page supports custom CSS via a text area where users paste raw styles directly. There is no way to reference an external stylesheet - the entire CSS must be duplicated for every status page.

The feature request is to allow users to use the standard CSS @import url("{link}"); directive inside the existing Custom CSS field (or as a dedicated "External CSS URL" input) so that an externally hosted stylesheet can be loaded on the status page.

✔️ Solution

When rendering the status page, Uptime Kuma should either:

  1. Allow @import url(...) in the existing Custom CSS textarea - simply stop stripping or blocking @import rules if they are currently sanitized out, and let the browser resolve them natively, or
  2. Add a dedicated "External CSS URL" field in the status page settings that injects a <link rel="stylesheet" href="..."> tag into the <head> of the status page.

Option 1 is simpler to implement since the infrastructure (Custom CSS textarea) already exists. Option 2 is more explicit and user-friendly.

In my use-case, I maintain a single CSS file hosted on my own server (or a CDN) that defines the color palette, fonts, and logo for my brand. I manage several status pages and I want all of them to stay visually consistent. Updating one hosted .css file should propagate to all status pages instantly, without having to manually edit each page's inline CSS.

❓ Alternatives

No response

📝 Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions