Automatic light and dark mode for Blocs. It reads your Global Swatches, so there is no second palette to build.
Every other way of doing this asks you to build the dark theme yourself
The standard method in Blocs is to create a class, right click it, choose Create Dark Theme Version, then assign colours to both versions. Then do it again for the next element. Then again. Then build a toggle out of two icons and wire them up by ID. Then write the transition yourself, if you want one.
It works. It is also an afternoon, and every colour you change afterwards is two edits instead of one, forever.
LightsOut does not ask you for a dark theme. Drop it into the Global Area and it reads the Global Swatches your project already defines, works out a dark counterpart for each, and applies them under a dark scope.
That is the whole setup. There is no paired class to author, no ID to wire, and no second palette to keep in step. Add a swatch next month and it is darkened too, with nothing to update.
It is not just flipping the lightness
Darkening a colour on lightness alone is easy and gives you a mess, because the same white is a page background in one project and a heading over a hero photo in the next.
LightsOut reads your stylesheet to see how each swatch is actually used:
- Used as text, an icon fill or a border, it is ink. Dark ink is lifted until it carries the same contrast on the dark page that it carried on a light one. Ink that is already light is left exactly as it is.
- Used as a background, it is a surface. A light surface is darkened. A surface that was already dark is left alone, because it was never a light surface to begin with.
- A strong saturated colour that is not glaringly bright is a brand accent and is left alone. Those are chosen colours and they read on either theme.
Hue and saturation are always kept, so a light lilac becomes a deep lilac rather than a grey. A site with white headings over dark imagery comes through intact instead of having its headings darkened into the background.
And when the automatic answer is wrong for a particular colour, you type that swatch’s variable name into a field and give it an exact dark value. That always wins, and it is applied in the page head rather than by script, so it is correct on the first frame too. Override the two or three colours that carry meaning. Let the rest darken itself.
No white flash, and that is not an accident 
A theme that flashes the wrong colour before correcting itself reads as a fault, however good the rest of the site is.
Your colours go into a stylesheet that Blocs places in the page head. With Default set to System, the starting theme is chosen by a plain CSS media query with no JavaScript involved, so there is no window in which a light frame could be painted.
There is one case CSS cannot solve: a returning visitor whose saved choice disagrees with their system setting, because saved choices live in browser storage and storage needs JavaScript, which Blocs puts at the end of the page. So there is a Copy Head Code button that writes the block for your exact settings. Paste it into Header Code once and that case closes too. It is optional, and it takes two clicks.
What $14.99 actually buys you
| Toggle styles | 4: Sun/Moon Morph, Minimal Switch, Icon Button, Hidden |
| Placements | 8: inline, four corners, in the Blocs nav bar, or any CSS selector you name |
| Transitions | 7: Circular Reveal, Split Curtain, Wipe Right, Wipe Down, Slide Over, Crossfade, None |
| Transition duration | Anything from 80 ms to 2000 ms, default 480 |
| Starting mode | System, Light or Dark |
| Swatch handling | Automatic for everything, hand picked for anything |
| Image dimming | 0 to 60 per cent, on by default at 15 |
| Memory | Remembers the visitor’s choice, or goes dark on a schedule in their local time |
| Setup | One Bric in the Global Area |
Circular Reveal opens the new theme out of the exact point the visitor clicked. Split Curtain opens from the middle of the screen outward, top and bottom at once. The same duration drives the toggle’s own animation, so the icon and the page move together rather than on separate clocks.
On a browser without the View Transitions API, the clip path effects fall back to the crossfade automatically. Nothing breaks and you do not need to plan for it.
The toggle goes where Blocs will not let you put it
Set Placement to In the Navbar and LightsOut finds your nav bar on its own and inserts the switch as a proper menu item. It sits level with your links on a wide screen and follows their alignment when the nav bar collapses on a phone. Blocs will not let you drop a Bric in there yourself, and no amount of custom code makes that pleasant.
Fixed placement is safe inside ScrollSmoother, GSAP and other scroll wrapper Brics too. A fixed element normally breaks inside a transformed container, so LightsOut moves the toggle out to the page body before it is ever drawn.
The things you should not have to think about
- Bootstrap 5.3’s own dark theme is switched on, not overridden, so native components follow the theme instead of fighting it. Bootstrap’s variables are skipped rather than recomputed, which is both faster and more correct.
- Reduced motion is respected automatically. A visitor whose system asks for it gets an instant change, whichever effect you chose. There is no switch to get wrong, because a switch to turn this off would only ever be a switch to make the site worse.
- The toggle is a real button. Keyboard reachable, visible focus ring, and a label that says what pressing it will do rather than what mode you are in. The colour scheme is announced to the browser, so form controls and scrollbars follow the theme instead of staying stubbornly light.
- Dim Images knocks photos back slightly in dark mode so a bright image does not glare off a dark page. Turn it off on a gallery site, where dimming the work is the one case the feature is wrong.
- Bootstrap 5 only. On a Bootstrap 4 project LightsOut will tell you so, and Bootstrap’s own components will not follow the theme.
Get LightsOut Now.
One time purchase, no subscription, use it on every site you build.
Get LightsOut in the Blocs Store 
: here
read the full manual prior purchasing : here