Customizing Widget Appearance

Firesky widgets render inside Shadow DOM by default, which means your site's CSS cannot accidentally break the widget, and the widget's CSS cannot affect your page. This makes them safe to drop onto any website.

That said, you have three clean ways to customize how widgets look:

1. Dashboard → Settings → Design for church-wide widget branding.
2. Host element styles for layout and sizing on your website.
3. CSS variables for per-widget overrides.

---

1. Dashboard Design Settings

The recommended starting point is Dashboard → Settings → Design. These settings are saved to your church profile and automatically apply to widgets that load through the Firesky script.

Design settings include:

Use Derive from primary after choosing your main brand color to fill the supporting palette automatically. Use Reset to defaults to return all widget styling to Firesky defaults.

For a dashboard-focused walkthrough, see Widget Design Settings.

---

2. Host Element Styles

You can always set CSS on the custom element tag itself. This controls the widget's position, size, and surrounding layout:

fs-prayer-wall {
  display: block;
  max-width: 600px;
  margin: 2rem auto;
}

This works regardless of Shadow DOM mode.

---

3. CSS Variables (Theming)

Widgets support CSS custom properties that you can set on the custom element. These cascade into the Shadow DOM and let you override the dashboard design for a specific widget or page.

Set them either in your stylesheet or inline on the element:

fs-prayer-wall {
  --fs-color-primary: #1a3a5c;
  --fs-color-primary-foreground: #ffffff;
  --fs-font-body: "Source Sans 3", sans-serif;
  --fs-font-heading: "Source Sans 3", sans-serif;
  --fs-radius-lg: 12px;
}

<!-- Or inline on the element -->
<fs-prayer-wall style="--fs-color-primary: #2d6a4f; --fs-color-primary-foreground: #fff;"></fs-prayer-wall>

Common Firesky Variables

Tip: Set --fs-color-primary to your church's brand color and --fs-color-primary-foreground to white (or a dark color if your primary is light). That's usually all you need.

Firesky also maps the dashboard theme into common shadcn-style variables (--primary, --background, --foreground, --muted, --border, --radius, and others) for compatibility. Prefer the --fs-* variables in new custom CSS because they are the widget-specific contract.

Dashboard Primary Color

The quickest way to brand widgets is to set Primary in Dashboard → Settings → Design. Firesky automatically applies it as the accent color across all widgets.

If you want to override per widget, use --fs-color-primary on the custom element (it takes precedence over the dashboard setting for that page).

---

4. Disable Shadow DOM

If you need your site's existing CSS to apply to widgets (or you need to target widget internals), add data-firesky-shadow="false" to the script tag:

<script
  id="FireSkyWidgets"
  src="https://www.thefiresky.com/widgets.js"
  data-firesky-shadow="false"
></script>

With Shadow DOM disabled:

• Widgets render in the light DOM (your page's regular DOM)
• Your site's CSS can style widget internals
• Widget CSS may affect other elements on your page

You can then target widget internals:

fs-prayer-wall .fs-widget {
  background: #f9fafb;
}

[data-firesky-widget] h2 {
  color: #1a3a5c;
}

Shadow DOM is strongly recommended. Disabling it makes widgets more fragile — your site's global styles (resets, typography, form styles) can break widget layout. Use it only if you have a specific reason.

---

Examples

Match your church's brand color

fs-prayer-wall,
fs-firesky-forms,
fs-media-library {
  --fs-color-primary: #7b2d26;        /* your brand red */
  --fs-color-primary-foreground: #fff;
}

Custom font

fs-prayer-wall {
  --fs-font-body: "Lato", sans-serif;
  --fs-font-heading: "Lato", sans-serif;
}

Make sure the font is already loaded on your page (via <link> or @import).

Rounded or sharp corners

/* Rounder */
fs-prayer-wall {
  --fs-radius-lg: 16px;
  --fs-radius-xl: 20px;
  --fs-radius-2xl: 24px;
}

/* Sharper */
fs-prayer-wall {
  --fs-radius-lg: 4px;
  --fs-radius-xl: 8px;
  --fs-radius-2xl: 12px;
}

/* Square */
fs-prayer-wall {
  --fs-radius-sm: 0;
  --fs-radius-md: 0;
  --fs-radius-lg: 0;
  --fs-radius-xl: 0;
  --fs-radius-2xl: 0;
  --fs-button-radius: 0;
}

Dark mode

@media (prefers-color-scheme: dark) {
  fs-prayer-wall {
    --fs-color-background: #111827;
    --fs-color-foreground: #f9fafb;
    --fs-color-muted: #1f2937;
    --fs-color-muted-foreground: #9ca3af;
    --fs-color-border: #374151;
    --fs-color-primary: #60a5fa;
    --fs-color-primary-foreground: #111827;
  }
}