夜にスマホで管理画面を開いて・・・うっまぶしい！という方や目を大事にしたい方向けのWordPressカスタムコードです、functions.php とかに追加するだけでオッケー。

スマホのみでダークテーマON

prefers-color-scheme: dark で端末がダークテーマかどうかを判定し、更にメディアクエリで入れ子にして、PCと切り分けます。

function my_admin_darkmode() {
    echo '<style>
        @media (prefers-color-scheme: dark) {
        @media screen and (max-width: 896px) {
            html {
                filter: invert(1) hue-rotate(180deg);
            }
            html img,
            html iframe {
                filter: invert(1) hue-rotate(180deg);
        }
        }
    }
    </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_darkmode');

PCでもダークテーマON

メディアクエリを外すだけです。

function my_admin_darkmode() {
    echo '<style>
        @media (prefers-color-scheme: dark) {
            html {
                filter: invert(1) hue-rotate(180deg);
            }
            html img,
            html iframe {
                filter: invert(1) hue-rotate(180deg);
        }
    }
    </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_darkmode');

Before

After

色（色相・明度・彩度）反転から色相反転させてるので、画像や背景画像などに再度反転をかける必要がありますが、WordPressの管理画面だと要素種類が少ないので楽に対応できます。

PC版だと左サイドバーが気になる色になっちゃってるんですが、一応ユーザープロフィールから「管理画面の配色」でライトとかを選ぶといい感じになります。

個人的には夜にスマホで開かなきゃいけないサイトに、スマホのみダークテーマを適用させてます。これで眩しくない。いくつか試したプラグインではPCモバイル両方だったり、ダーク化されない要素があったりして使えなかったのですが、この実装のほうが独自カスタマイズしやすいのでしばらくこれを使いそうです。

---

関連記事

関連記事はまだありません