Safariでダークモード非対応サイトをダークモードに！

はじめに

ダークモードに対応していないサイトが眩しくて見てられないって、悩んでいたんですが、解決できたので解決策を共有します！

「ダークモード適用前」

「ダークモード適用後」

本記事で紹介する方法は iOSのSafari限定 です。

1. Makeoverとは？

「Makeover - Custom CSS」は、Safariで閲覧中のウェブページにカスタムCSSを適用できる無料のiOSアプリです。ダークモード未対応のサイトを自分好みにカスタマイズしたりできます。

• App Store: Makeover - Custom CSS

2. セットアップ手順

以下の手順で、Makeoverをセットアップし、ダークモードを適用していきます。

2.1 アプリのインストール

1. App Storeから「 Makeover - Custom CSS」をインストール
2. Safariを開き、対象のウェブサイトにアクセス

2.2 拡張機能を有効化

1. Safariのアドレスバー左の機能拡張アイコンをタップ
2. 「機能拡張を管理」から「Makeover」をオンに
3. MakeoverのアイコンをタップしてCSS入力画面を開く

2.3 CSSを適用

CSSの入力画面に以下のCSSをコピペし、適用するとダークモードが反映されてると思います！

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a; /* 背景色を変更可能 */
    --text-color: #e0e0e0; /* 文字色を変更可能 */
    --link-color: #8ab4f8; /* リンク色を変更可能 */
  }

  body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
  }

  a {
    color: var(--link-color) !important;
  }

  img {
    filter: brightness(0.85) contrast(0.9) !important; /* 画像の眩しさ軽減 */
  }

  * {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: #333333 !important;
  }

  input, textarea, button {
    background-color: #2a2a2a !important;
    color: var(--text-color) !important;
    border: 1px solid #444444 !important;
  }

カスタマイズしたいときは？

背景や文字の色を調整したい場合は、:root に定義されている色を好きな色に変更してみてください！

終わりに

これで夜中にスマホを触っても目が痛くなりません！
この記事が参考になったら嬉しいです🙌