この記事では、MacのSafariで、ダークモードを適用する方法を2パターン紹介します。
- CSSをカスタマイズしてダークモードにする(無料)
- 機能拡張Dark Readerでダークモードにする(有料)
どちらの方法も、ダークモードに対応していないサイト含め、すべて黒基調のデザインに変化できますよ。
ダークモードを適用した当サイト
関連記事 iPhone版Safariでダークモードを使う方法
関連記事 Android版Chromeでダークモードを使う方法
Tamperish – カスタムCSSでSafariをダークモードにする
Tamperish（テンプリシ）という機能拡張を使います（無料）。
起動して、設定を有効にします。
赤枠のトグルをクリックする
Safari拡張機能が開くので、Tamperishにチェックを入れる
次にCSSファイルを用意します。
適当なエディタアプリで、以下コードをCSSファイルとして保存しましょう。
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
}
エディタアプリとして、例えばCotEditorがオススメです。
CotEditorを開き、上記コードをコピペする
名前をつけて保存する。拡張子は.cssとする
デスクトップに保存した例
Tamperishを開き、Change よりCSSファイルを保存したフォルダを選択します。
赤枠のChangeをクリック
保存先のデスクトップを選択する例
さらに、ダークモードを適用したいサイトURLを名前にしたフォルダを、この場所に保存して、中にCSSファイルを入れてください。
たとえば当サイトで適用したい場合、sp7pc.com というフォルダを作り、先ほどTamperishで指定した場所（例：デスクトップ）に保存します。
保存先として選択したデスクトップに、sp7pc.com フォルダを作成、中にCSSファイルを入れる例
さっそくSafariを開き、CSSが適用されているかチェックしましょう。
各サイトごと、初回のみ、Tamperishに対するアクセス権の許可が必要です。
赤枠をクリック
アクセスを許可する
これで端末全体の外観モードが「ダークモード」になってるとき、CSSを設定したページにもダークモードが適用されます。
システム設定の 外観 で確認できます。ダークモードを適用した当サイト
端末全体の外観モードは、システム設定の 外観 → 赤枠の外観モードでセットできる
もし端末全体の外観モードに関わらず、常にCSSを設定したページにダークモードを適用したい場合、以下コードを登録してください。
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
留意点として、下記のような、もともとダークモードに対応済みサイトで今回のCSSを反映すると、機能が競合してしまい、おかしな表示になってしまいます。
- YouTube
- X(旧Twitter)
- Google検索
あくまでダークモード非対応のサイトに対して、今回のCSSコードを適用するようにしましょう。
▼YouTube：標準のダークモード
普通のダークモード
▼YouTube：今回のCSSコードを反映
CSSコードを反映すると不自然な表示になる
Dark Reader – 機能拡張でSafariをダークテーマにする
Dark Reader for Safariという機能拡張を使います。
初期設定として、拡張機能の有効化が求められます。
Dark Reader for Safariを起動して、Activate for Safari をクリックします。
赤枠をクリックする。
Dark Readerをチェックします。
Safariの機能拡張設定が開くので、赤枠をチェックする。
さっそくSafariを開いてみましょう。
どのWebサイトも、背景がすべて黒になっています。
▼通常
通常の当サイト
▼適用後
ダークモードを適用した当サイト
検索フィールド左側のアイコンより、設定変更できます。
赤枠アイコンをクリックする。
設定は、主に4つあります。
- 切り替えを自動化する
- 特定サイトは対象外とする
- 明るさ等を調整する
- その他
▼切り替えを自動化する
切り替えを Auto にすると、macOS標準のダークモードと連動して、Dark Readerも自動でオン/オフ変化します。
システム設定の 外観 から変更できます。切り替えをAutoにする
システム設定のダークモードと連動する
▼特定サイトは対象外とする
表示中サイトURLのチェックを外すと、そのサイトのみ、Dark Readerが無効になります。
当サイトのチェックを外すと、ダークモードは適用されない。
▼明るさ等を調整する
ダークモード中のBrightness(輝度)や、Contrast(コントラスト)を調整できます。
赤枠のスライダを左右に動かす
▼その他
Settings を開くと、さらに細かい設定メニューが表示されます。
| メニュー名 | 内容 |
|---|---|
| Enable on all websites ※デフォルトはチェックあり |
チェックを外すと、基本は全サイト適用対象外となり、 特定サイトのみ適用対象となる。 |
| Enable for PDFs ※デフォルトはチェックあり |
チェックを外すと、PDFファイルは対象外となる。 |
| Shortcuts | ショートカットキーで切り替え設定をする。 |
| Theme | 特定サイトに関して、さらに細かい設定を行う。 |
細かい設定メニューが並ぶ
〆：すべてのサイトをダークモードに切り替えよう!
以上、Mac版Safariでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう の説明でした。
macOS標準機能としてダークモードは存在しますが、ブラウザ上ではサイト側で個別対応していないかぎり、従来の明るい背景のまま表示される仕様となっています。
そこで今回紹介した方法を使えば、強制的に黒基調のデザインに変化できるので、夜間にブラウジングする機会が多いならオススメです。
お試しあれ。
コメント