Instant Dark Theme for Any Website Using Browser DevTools

Ever wished you could enable dark mode on websites that don’t offer it? Here’s a brilliant JavaScript one-liner that instantly transforms any website into dark theme using your browser’s developer tools.

The Magic Code

Open your browser’s developer console (F12) and paste this code:

var cover = document.createElement("div");
let css = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    mix-blend-mode: difference;
    z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);

How It Works

This technique leverages CSS’s mix-blend-mode: difference property to create an instant color inversion effect:

The Magic Properties:

position: fixed - Covers the entire viewport
width: 100vw; height: 100vh - Full screen coverage
pointer-events: none - Allows clicking through the overlay
mix-blend-mode: difference - Inverts colors underneath
z-index: 1 - Ensures overlay stays on top

Color Inversion Logic:

When mix-blend-mode: difference is applied with a white background:

White → Black
Black → White
Light colors → Dark colors
Bright colors → Muted/inverted colors

Quick Setup Guide

Open any website you want to “dark-ify”
Press F12 to open Developer Tools
Navigate to Console tab
Paste the code and press Enter
Enjoy instant dark mode! 🌙

Use Cases

Perfect for:

📚 Late-night reading on bright websites
👀 Reducing eye strain during long browsing sessions
🎨 Testing how your site looks with inverted colors
🔧 Quick dark mode when websites lack native support

Limitations:

Images and videos will also be inverted
Some color combinations may look odd
Effect is temporary (refreshing the page removes it)
Not a replacement for proper dark mode implementation

Pro Tips

Remove the Effect:

// Remove the dark overlay
document.querySelector('div[style*="mix-blend-mode: difference"]').remove();

Toggle Function:

Create a bookmark with this code for one-click toggling:

javascript:(function(){var e=document.querySelector('div[style*="mix-blend-mode: difference"]');if(e)e.remove();else{var t=document.createElement("div");t.setAttribute("style","position:fixed;pointer-events:none;top:0;left:0;width:100vw;height:100vh;background-color:white;mix-blend-mode:difference;z-index:1"),document.body.appendChild(t)}})();

Browser Compatibility:

This technique works on all modern browsers that support:

CSS mix-blend-mode property
ES6 template literals
Modern DOM methods

Why This Matters

In an era where dark themes are becoming standard for better accessibility and reduced eye strain, this simple trick provides an instant solution for websites that haven’t caught up yet. It’s particularly useful for developers who want to quickly test color inversions or users who prefer darker interfaces.

Perfect for those 2 AM coding sessions! ☕💻

⚡ Quick Bookmark: Save the toggle function as a browser bookmark for instant access to dark mode on any website!