How to build an effective dark mode version of your news website

Dark mode isn’t just a trendy aesthetic choice—it improves readability in low-light environments, reduces eye strain, and can even help with battery life on OLED screens. Given that many users read news late at night or in dim settings, offering a well-designed dark mode can enhance accessibility and engagement.

Step 1: Decide on implementation approach

There are two primary ways to implement dark mode:

• System preference detection: Automatically switches based on the user’s OS or browser setting (prefers-color-scheme: dark).
• Manual toggle: Gives users control via a button or settings panel, allowing them to switch modes anytime.

A combination of both ensures accessibility and personalisation.

Step 2: Define your colour scheme

Dark mode isn’t just about flipping black and white. Thoughtful colour choices ensure readability and maintain brand consistency:

• Background: Use deep greys (#121212, #1E1E1E) instead of pure black for better contrast.
• Text: Opt for soft whites (#EAEAEA, #CCCCCC) rather than stark white to reduce glare.
• Accents and links: Maintain brand colours but slightly desaturate them for a subdued effect.
• Images and media: Ensure transparent images (e.g., logos) work on both light and dark backgrounds.

Step 3: Implement dark mode with CSS

Use CSS media queries to detect dark mode preference:

@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #EAEAEA;
    }
    a {
        color: #BB86FC; /* Adjust link colours */
    }
}

For a manual toggle, store user preference in local storage:

document.getElementById("dark-mode-toggle").addEventListener("click", function() {
    document.body.classList.toggle("dark-mode");
    localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
});

Retrieve the setting on page load:

if (localStorage.getItem("darkMode") === "true") {
    document.body.classList.add("dark-mode");
}

Step 4: Optimise images and graphics

• Use SVGs or PNGs with transparent backgrounds to prevent white boxes in dark mode.
• Offer alternative versions of images and infographics with adjusted contrast levels.
• Ensure embedded videos and ads adapt to dark mode without jarring brightness.

Step 5: Test for readability and accessibility

Dark mode should enhance readability, not hinder it. Test:

• Contrast ratios: Use tools like WebAIM Contrast Checker to ensure text remains legible.
• Low-vision accessibility: Verify usability for visually impaired users.
• Cross-browser compatibility: Ensure it works in Chrome, Firefox, Safari, and Edge.
• Performance impact: Check if dark mode affects page speed or script execution.

Step 6: Provide user control and save preferences

• Offer a toggle button in a visible area (e.g., site header or settings menu).
• Save user preferences using cookies or local storage so their choice persists across sessions.
• Allow an opt-out if users prefer standard mode in all settings.

Final thoughts

A well-executed dark mode improves user experience, reduces eye strain, and meets modern accessibility expectations. By carefully choosing colours, optimising assets, and ensuring usability, you can create a dark mode that enhances your news website without sacrificing readability or design consistency.