Disable DarkReader on your site

For websites that already have a dark theme, DarkReader can be a bit too aggressive and mess up the readability of your site. Here's how to disable it and maintain your carefully designed color scheme.

Published on: Apr 24, 2025

Time to complete: 5 minutes

What is DarkReader and Why It Matters

DarkReader is a popular browser extension that allows users to easily switch between light and dark themes on websites, even if they don’t have a dark theme implemented. With over 6 million users across Chrome, Firefox, and other browsers, it’s one of the most widely used accessibility tools for reducing eye strain during night browsing.

Common Problems When DarkReader Conflicts With Custom Dark Themes

Color contrast ratios may become unreadable
Brand colors can appear distorted or washed out
Custom UI elements might render incorrectly
Text legibility often suffers, especially with custom fonts
Gradient text becomes invisible
Interactive elements like buttons may lose their visual distinction

For developers who have invested time in creating a thoughtful dark mode experience, DarkReader’s automatic color inversion can undermine all that careful design work.

How to Disable DarkReader on Your Website

Fortunately, the DarkReader team has provided a straightforward way to tell the extension to leave your site alone. This is especially important for websites with carefully designed dark themes like those built with North Star Themes.

In the head section of your website, simply add the following meta tag:

1
<head>
2
  <meta name="darkreader-lock" />
3
</head>

Limited Time Launch Sale

Our AstroJS starter templates come with dark mode already configured and DarkReader protection built in, saving you hours of troubleshooting and design adjustments.

GET 60% OFF!

Understanding How the DarkReader Lock Works

When DarkReader encounters the darkreader-lock meta tag, it completely bypasses your site in its processing pipeline. This means:

Your site’s colors remain exactly as you designed them
No performance impact from DarkReader’s color calculations
Users still get a dark experience (your custom one)
Your brand identity stays intact

How to Test Your DarkReader Implementation

Install the DarkReader extension if you don’t already have it
Visit your website with DarkReader enabled
Your site should display in its original colors, not DarkReader’s modified version
Toggle DarkReader on and off to confirm there’s no change in appearance

When to Implement DarkReader Lock on Your Website

Your site already has a well-designed dark theme
You’re using a color scheme that doesn’t work well with automatic inversion
Your UI contains custom components that break under DarkReader
You need precise control over your brand’s visual presentation

For sites without a dark theme, it’s better to let DarkReader do its job, as it provides accessibility benefits to users who prefer dark interfaces.

By taking this small step to disable DarkReader on your site, you ensure that all users experience your website exactly as you designed it, while still supporting those who prefer dark interfaces.