LightsOut

Automatic light and dark mode for Blocs. It reads your Global Swatches, so there is no second palette to build.

LightsOut gives a Blocs site a dark mode without asking you to build one.

The usual method is to author a dark version of every class by hand, keep both in step, and wire up a toggle yourself. LightsOut instead reads the Global Swatches your project already defines, works out a dark counterpart for each, and applies them under a dark scope. Drop it into the Global Area and it works. A swatch you add later is darkened too, with nothing to update.

Darkening keeps hue and saturation, so your palette stays recognisable. LightsOut reads your stylesheet to work out whether a swatch is used as text, as a background, or as a brand accent, and treats each case differently. Dark ink is lifted, light surfaces are darkened, and light ink and saturated accents are left alone, so a site with white headings over dark imagery comes through intact. Any swatch can be given a hand picked dark value that always beats the automatic one.

Your colours are written into a stylesheet in the page head, so with Default set to System the starting theme is chosen by a CSS media query before any JavaScript runs. There is no flash of white on first paint.

Features

• Automatic dark counterpart computed for every Global Swatch, from its own hue
• Hand picked dark values for individual swatches, applied on first paint
• No flash of the wrong theme on load, with an optional head code block that closes the last case
• 4 toggle styles, including Hidden for a silent, system themed site
• 8 placements: inline, any of the four corners, inside the Blocs nav bar, or any element you name with a CSS selector
• 7 transitions, with duration from 80 to 2000 ms
• Bootstrap 5.3 dark mode switched on properly, rather than overridden
• Visitor's choice remembered in their own browser, or a schedule by local time
• Images dimmed in dark mode, adjustable from 0 to 60 per cent
• Reduced motion respected automatically
• Accessible toggle: real button, keyboard reachable, focus ring, live label
• A small JavaScript interface for controlling the theme from your own code
• No dependencies, no jQuery, nothing loaded from a third party
  

Requirements

Bootstrap 5. On a Bootstrap 4 project LightsOut will warn you and Bootstrap's own components will not follow the theme. Best placed in the Global Area, one instance per site.

Documentation

Read the full documentation here👉:  LightsOut Manual