Pro

Dark Mode

PreviousNext

How Jolocky footers behave with light and dark themes, and how to make one follow your site's theme.

Jolocky footers have their own color palette. They do not switch automatically when your site changes between light and dark mode, because their colors come from their own scoped stylesheet, not from your theme tokens. (Graphite Marquee is the exception: it has its own light/dark switch, which it remembers in localStorage.)

If your site toggles a .dark class on the html element (as next-themes does with attribute="class"), you can override a footer's custom properties for dark mode in your global stylesheet:

app/globals.css
.dark .jf {
  --jf-ink: #f5f5f5;
  --jf-line: rgba(255, 255, 255, 0.12);
}

.dark .jf is more specific than the footer's own .jf rule, so these values win. Replace .jf and the property names with the root class and custom properties of the footer you use; you will find them at the top of its footer-styles.ts or styles/ files.

Colors written directly in the stylesheet or in canvas drawing code are not custom properties. Edit them in the item's files instead. See Theming.

Adding Dark Mode to a Next.js Site

If your site does not have a theme switch yet, follow the Next.js guide:

Next.js Dark Mode

Install next-themes, create a theme provider, and add a mode toggle button.