Skip to content
StatusOwlDocs

Theming & branding

Upload a logo, set the theme mode, and apply custom CSS or HTML headers and footers to your StatusOwl status page.

Last updated May 9, 2026

A status page is one of the most-visited surfaces during an outage — make sure it looks like yours. StatusOwl supports logo upload, light / dark / auto theme modes, and custom CSS and HTML so the page matches the rest of your brand.

This page covers the actually-shipped customization options. For the underlying page setup (subdomain, components, incidents) see Setting up a status page.

Upload a square or wide logo from the status page's Settings tab. The logo renders at the top of the page on every device. To upload:

  1. Open the status page → Settings → Branding card.
  2. Click Upload logo and pick a file.
  3. The logo is uploaded to StatusOwl's CDN and the new URL is saved on the page record. Visitors see the new logo on the next page load.

Constraints:

  • Max size: 5 MB.
  • Formats: PNG, JPEG, GIF, WebP.
  • Not supported: SVG (rejected to avoid script-injection vectors).

To replace a logo, upload a new file — the previous one is removed from the CDN automatically. To remove the logo entirely, click Remove logo. The page falls back to a text-only header.

Favicon

The favicon is configured by URL — paste a public HTTPS URL in the Favicon URL field on the Settings tab. There is currently no upload flow for the favicon; host the file on your own CDN, your marketing site, or the same image host as your logo.

If the field is empty, browsers fall back to their default behavior for the *.statusowl.app (or your custom) hostname.

Theme mode

StatusOwl ships three theme modes:

ModeBehavior
LightAlways light. Appropriate for marketing-site parity if your site is light-only.
DarkAlways dark. Looks great on terminals, dashboards, and dev-heavy audiences.
AutoRespects the visitor's prefers-color-scheme.

The mode is set per status page and applies to the entire public surface — component list, incidents, maintenance, footer. There is no per-section override; pick one mode for the page.

Auto mode is usually right

If your audience is mixed (developers and end-users on the same page), Auto behaves the way most people expect — light during the day, dark at night. Pick Light or Dark only when you have a strong brand reason to override the system preference.

Custom CSS

You can paste arbitrary CSS into the Custom CSS field on the Settings tab. The CSS is appended to the page's stylesheet at render time, after the theme defaults — your rules win for any selector that overlaps.

Practical uses:

  • Brand-specific accent color: override the buttons and badges to use your brand hex.
  • Typography: load a custom font and apply it to the page heading.
  • Layout tweaks: tighten margins, hide the footer, restyle the component-list separators.
text
/* Example: brand accent */
.status-up    { background: #16a34a; }
.status-down  { background: #dc2626; }
.page-header  { font-family: "Inter", system-ui, sans-serif; }

Custom CSS is yours to maintain

The page's underlying class names and structure are not a stable public API — they may change in a future release. If you rely heavily on custom CSS, audit it after each StatusOwl release. We try to avoid breaking changes, but the surface is not contractual.

Custom header and footer HTML

For larger overrides — adding a top nav back to your marketing site, an analytics pixel, or a corporate footer — the page exposes two HTML slots:

  • Custom header — rendered above the page's own header.
  • Custom footer — rendered below the page's footer.

Both fields accept arbitrary HTML. Common patterns:

text
<!-- Custom header: link back to marketing site -->
<div style="background:#0b0d10;color:#fff;padding:8px 16px;text-align:center">
  <a href="https://example.com" style="color:#fff">← Back to example.com</a>
</div>
text
<!-- Custom footer: legal + analytics -->
<p style="font-size:12px;color:#666">
  © 2026 Example Inc. ·
  <a href="https://example.com/privacy">Privacy</a> ·
  <a href="https://example.com/terms">Terms</a>
</p>
<script async src="https://plausible.io/js/script.js" data-domain="status.example.com"></script>

Custom HTML runs in the page context

Anything you put in the header or footer slots executes in the page's DOM, including <script> tags. Don't paste untrusted markup. If you're loading third-party JS (analytics, chat widgets), use first-party tags from vendors you control.

Preview

The Settings tab shows a live preview of your branding changes alongside the form. Save commits the changes to the live page; visitors pick them up on the next page-cache refresh (~15 seconds). There is no draft / staging mode — the change goes live the moment you save, so test theme overrides during quiet periods.

Plan availability

Branding features (logo, favicon, theme mode, custom CSS / header / footer) are available on all plans. The number of status pages you can run is gated by plan — see the pricing page for the per-plan allotment. Custom domains for status pages are gated to Starter and above; see Custom domains.

See also