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 two clean ways to customize how widgets look: host element styles (layout and sizing) and CSS variables (colors, fonts, radius).

---

1. 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-church-info {
  display: block;
  max-width: 420px;
  margin: 2rem auto;
}

fs-prayer-wall {
  display: block;
  margin: 3rem 0;
}

This works regardless of Shadow DOM mode.

---

2. CSS Variables (Theming)

Widgets support a set of CSS custom properties that you can set on the custom element. These cascade into the Shadow DOM and let you match the widget to your church's brand colors and typography.

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

/* In your stylesheet */
fs-prayer-wall {
  --primary: #1a3a5c;
  --primary-foreground: #ffffff;
  --font-sans: "Source Sans 3", sans-serif;
  --radius: 0.5rem;
}

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

Available Variables

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

Church Primary Color

The quickest way to brand widgets is to set a Primary color in Dashboard → Settings → Church Profile. Firesky automatically applies it as the accent color across all widgets — no CSS required.

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

---

3. 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-church-info,
fs-prayer-wall,
fs-firesky-forms,
fs-media-library {
  --primary: #7b2d26;        /* your brand red */
  --primary-foreground: #fff;
}

Custom font

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

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

Rounded or sharp corners

/* Rounder */
fs-church-info { --radius: 1rem; }

/* Sharper */
fs-church-info { --radius: 0.25rem; }

/* Square */
fs-church-info { --radius: 0; }

Dark mode

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