Light & Dark Mode

Leenkies lets you choose between light mode and dark mode for your pages. This is a global setting that determines the overall brightness and atmosphere of your pages. Whether you want a bright, open feel or a sleek, modern dark aesthetic, switching between modes is a single toggle away.

Toggling Between Modes

Switching between light and dark mode is simple:

1. Open the Theme tab in your page editor.
2. Locate the Mode toggle at the top of the theme settings.
3. Click the toggle to switch between Light and Dark mode.
4. The live preview updates immediately so you can see exactly how your page looks in the selected mode.
5. Click Save to apply your choice.

The mode you choose applies globally to all of your pages, just like other theme settings. You do not need to configure each page individually.

Light Mode

Light mode uses a bright background with dark text. It is the default mode and the most universally familiar pattern for web content.

When to use light mode:

• Readability-focused content. Long-form descriptions, product details, and text-heavy pages are generally easiest to read in light mode. Most people are accustomed to reading dark text on a light background, which reduces eye strain during extended reading sessions.
• Professional and corporate brands. Light mode conveys openness, clarity, and trustworthiness. It works well for business consultants, coaches, agencies, and service providers.
• Photography and visual content. If your products or portfolio rely on images, light mode provides a neutral backdrop that does not compete with your visuals. Colors in photographs tend to appear more accurate against a light background.
• Broad audience appeal. When your audience spans a wide range of demographics and preferences, light mode is the safer default choice that will feel familiar and comfortable to the majority of visitors.

Dark Mode

Dark mode uses a dark background with light text. It creates a dramatic, modern, and immersive viewing experience.

When to use dark mode:

• Tech and digital products. Dark mode has become synonymous with modern tech aesthetics. If you are selling software, digital tools, design assets, or development resources, dark mode reinforces the digital-first nature of your brand.
• Creative and artistic brands. Photographers, videographers, musicians, and digital artists often prefer dark mode because it creates a gallery-like atmosphere where content pops against the dark backdrop.
• Luxury and premium positioning. Dark backgrounds with carefully chosen accent colors can convey sophistication, exclusivity, and premium quality. High-end brands frequently use dark aesthetics.
• Neon and vibrant color schemes. Bright, saturated brand colors are dramatically more vivid and eye-catching against a dark background. If your Primary or Accent colors are bold neons or bright hues, dark mode makes them sing.
• Evening and entertainment content. Content consumed primarily in the evening or in dimly lit environments is more comfortable to view in dark mode.

Side-by-Side Comparison

The difference between light and dark mode extends beyond simply inverting the background. The entire visual hierarchy shifts:

• In light mode, content separation is achieved through subtle shadows and slightly tinted card backgrounds. The page feels open, airy, and expansive.
• In dark mode, content separation relies more on surface color differences between the background and cards. The page feels focused, contained, and cinematic.

Pro Tip: When deciding between modes, consider where and when your audience will view your pages. If your typical visitor browses on their phone in the evening, dark mode may be more comfortable. If they access your pages during work hours on a desktop, light mode may feel more natural.

How Mode Affects Colors

Understanding how light and dark mode interact with your color tokens is important for getting the best results:

Surface Colors Change

Surface colors are the tokens most affected by mode selection. When you switch modes, the following tokens swap to appropriate values:

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

These changes happen automatically when you toggle the mode, using the preset's pre-defined values for each mode. You can further customize any of these tokens after switching modes.

Brand Colors Stay Consistent

Your brand identity colors -- Primary, Secondary, and Accent -- remain the same across both modes. Your brand color is your brand color regardless of whether it sits on a light or dark surface. This ensures that your buttons, links, and interactive elements maintain the same recognizable identity in both modes.

However, you may want to slightly adjust the brightness or saturation of your brand colors after switching modes to ensure they look their best against the new background. A Primary color that looks perfect on a white background might need to be slightly brighter or more saturated to stand out equally well on a dark background.

Pro Tip: After switching to dark mode, pay special attention to your Destructive color. Red tones that read clearly on a light background can sometimes appear too dark or muddy on a dark background. Adjust to a brighter or more saturated red if needed.

Utility Colors Adapt

Utility colors like Border, Input, and Ring also shift when you toggle modes. Borders that were subtle gray lines on a light background become lighter-toned lines on a dark background so they remain visible without being overpowering. These adjustments happen automatically with the mode toggle, but you can fine-tune them afterward if needed.