Roboin Blog
ExtensionsHowToHTMLJavaScriptOpen SourceProgrammingTypeScriptWeb Development

How to disable Dark Reader on your website

Users can use Dark Reader to apply dark mode across the web. On sites that support dark mode, users may see Dark Reader apply another layer of dark-mode styling and end up with an unnatural-looking page.

Users can disable Dark Reader for a specific site. Site administrators have a way to disable it from the site itself.

Advertisement

How to disable Dark Reader from your website

Dark Reader document the site-side method in the CONTRIBUTING.md file in the Dark Reader GitHub repository.

Site owners can disable Dark Reader by adding a darkreader-lock meta tag inside the <head> tag.

<head>
    <meta name="darkreader-lock" />
</head>

You can use JavaScript to add the tag at runtime.

const lock = document.createElement("meta");
lock.name = "darkreader-lock";
document.head.appendChild(lock);

Dark Reader also accept pull requests to add sites to the extension's exclusion list when they meet certain conditions, such as sites that use dark mode regardless of the operating system setting.

Verification details and sources

Verification environment

  • OS: Windows 11
  • Browser: Zen Browser version 1.22.1b
  • Dark Reader: 4.9.131

Verification details

I added <meta name="darkreader-lock" /> to my blog and confirmed that I no longer had to disable Dark Reader by hand.

Last verification date

Reference links

Share this article

Follow us for updates

Adding us to your preferred sources on Google makes it easier to find our articles on Google. Also, be sure to follow us on X and our RSS feed.

Add as a preferred source on GoogleAdd as a preferred source on Google
著者のアイコン画像
roboin
XMisskeyGitHubQiita

I've been using JavaScript more than my native language since birth. I am nowhere and everywhere on the internet.

I build web apps and browser extensions in TypeScript as a web frontend programmer. I released Shadowban Scanner, a tool that detects shadowbans on X, and Restore Link Card, a tool that brings back link cards. Media outlets in Japan and abroad covered both tools. For iGEM 2023, I built the Wiki for Team Japan-United and helped the team win the Grand Prize. On my blog, I cover news about X and social media, test and troubleshoot bugs, and share frontend development insights.