【iOS12】Safariでダークモードを実現できるショートカット

iOS12では複数の操作を1タップで自動実行できる”ショートカット”を使用できますが、今回はSafariで背景色を黒色に変更することができる、ダークモードを擬似的に再現したショートカットを紹介します。

Safariの背景色を黒色に変更するショートカット

今回紹介するショートカットは海外の掲示板redditで、ユーザーであるNdh4k4氏が作成し公開したショートカットです。

ショートカット”Dark Mode”を使用すると「背景色を黒色に変更し文字色を白色に変更する」ことができるようになります。

Safariの”リーダー機能”では、ページ内リンクやSNSシェアボタンなども省略されてしまいますが、Dark Modeであれば背景色と文字色を変更するだけで、ページ内のコンテンツまで省略されることはありません。

Dark Modeの取得方法と使い方

以下のボタンをタップすると、ショートカットアプリが起動しDark Modeが表示されるので、ショートカットを取得をタップ。

ショートカットに「Dark Mode」を追加する

Safariで共有ボタン→ショートカット→Dark Modeをタップ。

「Dark Modeに”~”へのアクセスを許可しますか？」と表示される（初回のみ）ので、許可をタップするとSafariの背景色が黒色に変更されます。

アクセスを許可する行為の危険性

Dark Modeを使用する場合、初回のみ「Dark Modeに”~”へのアクセスを許可しますか？」と表示されますが、これはDark Modeに限らずSafari上でJavaScriptを実行するショートカットで表示されるものです。

Dark Modeは、JavaScriptで背景色や文字色のCSSを追加するレシピになっているので、アクセスを許可しても入力内容が読み取られたり、外部にデータ送信されることは無いので心配する必要はありません。

以下はショートカットのアクションを表示で確認できるソースコードです。

let prevBgColor = getBodyColor(),
darkClassList = [‘theme-dark’, ‘theme–dark’, ‘theme-black’, ‘theme–black’];

document.body.classList.add(…darkClassList);

if (prevBgColor === getBodyColor()) {
var style = document.createElement(“style”);
style.type = “text/css”;
var head = document.head;
head.appendChild(style);

//style.sheet.insertRule(“body{ background:#262626; color:#fff;}”);

style.sheet.insertRule(“* { color: #fff !important; background-color: #000000 !important; border-color: currentColor !important; }”);
}

function getBodyColor() {
return window.getComputedStyle(document.body).backgroundColor;
}

completion(true);

今後悪意のあるJavaScriptを含むショートカットが出回る可能性も十分考えられるので、もし他人が作ったショートカットを使用する場合は、必ずショートカット追加画面のアクションを表示で内容を確認することをお勧めします。