Dark Readerをサイト側の設定で無効化する方法
Dark ReaderはあらゆるWebページをダークモードにしてくれる便利な拡張機能ですが、すでにダークモードに対応しているWebサイトに対しても無理にダークモードにしようとしてしまい、外観が不自然になることがあります。
ユーザー側の対策としてはそのサイトでDark Readerを無効化できますが、実はサイト管理者側でもDark Readerを無効化できます。
サイト側でDark Readerを無効化する方法
サイト側でDark Readerを無効にする方法は、Dark ReaderのGitHubリポジトリーのCONTRIBUTING.mdに記載されています。
それによれば、<head>タグにdarkreader-lockメタタグを追加することでDark Readerを無効化できます。
<head> <meta name="darkreader-lock" /></head>JavaScriptを使用して動的にタグを追加することもできます。
const lock = document.createElement("meta");lock.name = "darkreader-lock";document.head.appendChild(lock);また、OSの設定によらずに常にダークモードで表示されるサイトなど、いくつかの条件を満たしている場合は、Dark Reader側の除外リストに追加するプルリクエストを提出できるようです。
この記事の検証内容と情報源
検証環境
- OS：Windows 11
- ブラウザー：Zen Browserバージョン1.22.1b
- Dark Reader：4.9.131
検証内容
自身のブログに<meta name="darkreader-lock" />を追加し、Dark Readerが自動的に無効化されることを確認
最終検証日
参考リンク
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。
