Light & Dark Mode

Leenkies lets you choose between a bright, open light mode and a sleek dark aesthetic for your pages -- it's a single toggle.

Toggling Between Modes

1. Open the Theme tab in your page editor.
2. Find the Mode toggle at the top of the theme settings.
3. Click it to switch between Light and Dark.
4. The live preview updates immediately.
5. Click Save to apply.

Like other theme settings, your choice applies globally to all pages.

Light Mode

Light mode uses a bright background with dark text -- the default and the most familiar pattern for web content. It works well for text-heavy pages, professional brands, and image-focused content where you want a neutral backdrop.

Dark Mode

Dark mode uses a dark background with light text for a dramatic, immersive feel. It suits tech products, creative brands, and luxury positioning. Vibrant accent colors pop more, and it's easier on the eyes in low-light environments.

Side-by-Side Comparison

The difference goes beyond inverting the background -- the entire visual hierarchy shifts:

• Light mode achieves content separation through subtle shadows and slightly tinted card backgrounds. The page feels open and airy.
• Dark mode relies on surface color differences between the background and cards. The page feels focused and cinematic.

Pro Tip: Consider where and when your audience browses. Evening phone users may prefer dark mode; daytime desktop users may find light mode more natural.

How Mode Affects Colors

Surface Colors Change

Surface tokens are most affected by mode selection. When you toggle, these swap automatically:

• Background flips from light (white/off-white) to dark (near-black/dark gray), or vice versa.
• Foreground (main text) flips to maintain contrast against the new background.
• Card surfaces adjust to stay visually distinct from the background.
• Popover surfaces adjust similarly.
• Muted backgrounds shift to remain subtle against the new base.

These changes use the preset's pre-defined values for each mode. You can further customize any token after switching.

Brand Colors Stay Consistent

Your Primary, Secondary, and Accent colors remain the same across both modes -- your brand is your brand regardless of the surface. Buttons, links, and interactive elements keep their recognizable identity.

That said, you may want to tweak brightness or saturation after switching. A Primary that looks perfect on white might need to be brighter to stand out equally on a dark background.

Pro Tip: After switching to dark mode, check your Destructive color. Reds that read clearly on light backgrounds can appear too dark or muddy on dark backgrounds -- adjust to a brighter red if needed.

Utility Colors Adapt

Border, Input, and Ring also shift when you toggle. Borders that were subtle gray on a light background become lighter on a dark background so they stay visible without overpowering. These adjust automatically, but you can fine-tune them afterward.