Force Dark Mode は、dark mode を提供していないウェブサイトに dark color scheme を強制適用するか、サイトのライトテーマを上書きします。このツールはバックグラウンドカラーをインテリジェントに暗いトーンへ変換し、テキストカラーを読みやすく調整しながら、画像・動画・ロゴ・ブランド要素は元の色のまま保持します。ワンクリックでオン、もう一度クリックでオフ — ページの再読み込みは不要です。
多くのウェブサイトはいまだに dark mode オプションを提供しておらず、夜間のコーディングセッション、深夜のリサーチ、または薄暗い環境での作業中に眩しい白い背景を見つめ続けなければなりません。ブラウザレベルの dark mode（color-scheme 経由）は、明示的にサポートしているサイトでしか機能しません。Force Dark Mode はすべてのウェブサイトで動作します。CSS filter とカスタムスタイルの上書きを適用し、明るいバックグラウンドを暗いトーンへ変換しながら、画像の色と読みやすさを維持します。この変換はインテリジェントで、単に filter: invert(1) を適用するわけではありません（それでは画像が反転し、テキストが読みにくくなります）。代わりに、バックグラウンドカラーを的確にターゲットにし、新しい暗い背景に対してコントラストが取れるようテキストカラーを調整し、hue-rotation を使用してサイトのブランドカラーをできる限り保持します。その結果、サイトのビジュアルアイデンティティを維持した快適な dark mode の閲覧体験が実現します。
ワンクリックで dark mode のオン・オフを切り替えます。ページの再読み込みは不要 — CSS クラスの切り替えによってダークテーマが瞬時に適用・解除されます。白い画面のちらつきなく、シームレスに切り替わります。
バックグラウンドを暗くしながらテキストカラーを明るくして読みやすさを確保します。このアルゴリズムは全体的な反転を適用するのではなく、background-color プロパティを的確にターゲットにし、サイトのカラー関係とビジュアル階層を保持します。
画像、動画、SVG、canvas 要素はカラー反転の対象外となります。写真は自然な見た目を保ち、ロゴはブランドカラーを維持し、動画コンテンツは通常通り再生されます — 変更されるのはページのバックグラウンドとテキストカラーのみです。
CSS アーキテクチャに関わらず、あらゆるウェブサイトに適用できます。静的 HTML サイト、React SPA、WordPress テーマ、ウェブアプリ、ドキュメントサイトなど、すべてに対応します。サイト固有の設定は一切不要です。
明るいテキストと暗い背景の組み合わせにより、画面から放射される光の量が減少し、長時間の作業における目の疲れを軽減します。暗い環境での作業や夜間の使用に特に効果的です。
Dark mode はツールがオンの間のみ有効です。他のページへ移動しても効果は引き継がれます。作業が終わったらオフにするだけ — サイトのデータは変更されず、設定も保存されません。
夜間のコーディングセッション中に、ドキュメントサイト、Stack Overflow、MDN、その他のリファレンスページに dark mode を強制適用します。サイトが独自の dark mode を実装するのを待つことなく、目の疲れを軽減できます。
あらゆる場所で dark mode を使いたい場合、Force Dark Mode がその隙間を埋めます — ネイティブの dark mode を提供していないワークフロー内の数少ないサイトに適用できます。
自分のサイトに dark mode を強制適用して、反転した色合いでどのように見えるか確認します。適切な dark mode の実装に時間を費やす前に、おおまかなプレビューが得られます。
薄暗い部屋でプレゼンテーションを行う場合、任意のウェブサイトに dark mode を強制適用することで画面のグレアを抑え、低照度の環境でプロジェクター上のコンテンツを読みやすくします。
暗い背景は明るい白いページよりもブルーライトの放射が少なく、夜間に閲覧する際の睡眠サイクルへの影響を軽減するのに役立つ可能性があります。
DevSuite Pro のフローティングドックを開き、Force Dark Mode アイコンをクリックします。ページが瞬時に dark color scheme へ切り替わります。
ウェブサイトを通常通り閲覧し続けます。同じサイト内でページを移動しても dark mode は維持されます。
Force Dark Mode アイコンをもう一度クリックすると、元のライトな見た目が瞬時に復元されます。ページの再読み込みは不要です。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
