FlareWatch

Customize Branding

The branding step controls how your status page looks.

What you can change

  • Page title
  • Logo URL
  • Theme preset (built-in themes)
  • Advanced theme variables (optional)

The wizard shows a live preview while you edit.

Theme presets

Choose a preset to set light/dark color variables quickly. Presets are the fastest path for most deployments.

Advanced theme variables

If you need deeper customization, paste or upload shadcn/tweakcn CSS variables. The wizard extracts supported theme variables from your input and ignores the rest. It does not run arbitrary CSS, layout rules, classes, fonts, or imports.

Theme variables are optional. A preset-only setup is fully supported and easier to maintain.

Supported selectors:

  • :root { ... } for light mode variables
  • .dark { ... } or :root.dark { ... } for dark mode variables
  • bare --token: value; lines for light mode variables

Supported branding tokens:

  • --background
  • --foreground
  • --card
  • --card-foreground
  • --primary
  • --primary-foreground
  • --secondary
  • --secondary-foreground
  • --muted
  • --muted-foreground
  • --accent
  • --accent-foreground
  • --destructive
  • --border
  • --input
  • --ring
  • --radius
  • --popover
  • --popover-foreground
  • --sidebar
  • --sidebar-foreground
  • --sidebar-primary
  • --sidebar-primary-foreground
  • --sidebar-accent
  • --sidebar-accent-foreground
  • --sidebar-border
  • --sidebar-ring
  • --chart-1 through --chart-5

Runtime status tokens such as --status-operational, --status-down, and --status-maintenance are supported and previewed when imported. Outage-color controls are not part of the main editor.

Example:

css
:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.14 0 0);
  --primary: oklch(0.65 0.2 35);
  --card: oklch(1 0 0);
}

.dark {
  --background: oklch(0.16 0 0);
  --foreground: oklch(0.96 0 0);
  --primary: oklch(0.72 0.2 35);
  --card: oklch(0.2 0 0);
}

What gets ignored:

  • @import and font loading rules
  • selectors such as body, .button, or .card
  • Tailwind classes and arbitrary layout CSS
  • unsupported variable names
  • unsafe values such as url(...) or javascript:

When something is ignored, the wizard reports the line number and reason. You can continue as long as at least one supported safe theme variable remains.

Next: Deploy your status page.