Theming

Jolocky footers are self-contained. Each one ships its own scoped stylesheet and renders it with a <style> element, so it looks the same in any project and does not depend on your Tailwind CSS theme tokens. The trade-off is that your site's --background, --primary, and similar tokens do not change a footer's colors. You restyle a footer by editing its own files.

Where the Styles Live#

Each item keeps its CSS in TypeScript files inside its folder, exported as template strings:

• Smaller items use a single file, for example components/footers/aurora-drift/footer-styles.ts.
• Larger items use a styles/ folder with one file per part, plus styles/index.ts, which combines them.

All selectors are scoped under the footer's root class with a short prefix (for example .jf or .hl-footer), so the styles do not leak into the rest of your page.

Changing Colors and Fonts#

Most footers define their palette, fonts, and easing curves as CSS custom properties on the root class. For example, Aurora Drift starts its stylesheet with:

Copy.jf {
  --jf-ink: #ffffff;
  --jf-ink-soft: rgba(255, 255, 255, 0.75);
  --jf-navy: #12104a;
  --jf-line: rgba(255, 255, 255, 0.18);
  --jf-font: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* ... */
}

Change those values to restyle the footer. Some colors, such as gradient stops and canvas fill colors, are written directly in the stylesheet or in the drawing code, so search the item's folder for hex values if a color does not change.

To tie a footer to your own design tokens, point its custom properties at your variables:

Copy.jf {
  --jf-ink: var(--foreground);
}

Fonts#

Many footers load their typeface from Google Fonts with an @import url(...) at the top of their stylesheet. If you self-host fonts or use next/font, remove that @import and set the footer's font custom property (or font-family rule) to your font.

Content and Links#

Text and links are passed as props, with default values when you omit them. Each item's types.ts describes its props, and most items keep their default content in data/defaults.ts:

Copy<AuroraDriftFooter
  ctaHeadline="Ready to ship your next project?"
  ctaButtonText="Get started"
  ctaButtonHref="/signup"
  copyrightName="Acme Inc."
/>

The prop names differ per item, so check the item's types.ts.

Animation Keyframes#

Footer keyframes are defined in the footer's own stylesheet, with names that use the same prefix as its selectors. The CLI does not add anything to your global CSS file.