To automatically detect whether it is dark mode and switch the color mode of WordPress

2019-06-15Windows

Not long ago Windows 10 was compatible with the dark mode.

I do not particularly like the dark screen, but I think that it is kind to the eyes when I listen to being kind to the eyes and I certainly use it, so I often use it in the dark mode recently.

Google Chrome, FireFox, and browsers such as edge have already been designed to detect the dark mode of Windows 10 and switch to dark mode automatically.

If you want to use Windows 10 in dark mode and Chrome in light mode, you can use Chrome’s color theme.

However, the search window is black, so it is not very good. You can only wait for user settings to be implemented.

I thought that it was a limitation on the Windows side because it was supported at once by many major browsers, but vivaldi etc. is the latest version as it is, so the browser side has set it voluntarily.

Right now, even though it supports dark mode, Chrome’s new tab page and settings screen are just like the Chrome web store and Google search page for searching for advanced functions and so on.

Compare dark mode of each browser

Chrome version 74

New tab page in Chrome. I feel the Google logo is for dark mode.

Recently I have been displaying the Toby bookmark extension page, but once again, the new Chrome tab page has changed a lot too. It is completely different from a few years ago. I didn’t need a page capture thumbnail!

Chrome Dark Mode

Fire Fox Version 66

The scroll bar is white, but this is the same because Chrome is also white when it comes to scrollable pages.

Edge version 44

Why Microsoft’s Edge is not in the dark mode is the most mysterious.

In the future, it may be the time to automatically detect and switch to websites as well.

At present, there has been a method of installing a button to switch the color mode of the site according to the user’s preference on websites such as WordPress sites, but there is no way to “automatically detect and switch to dark mode”. Hmm.

Since it is now common to switch between dark mode and light mode, it is inevitable that in the future website and application producers will want to automatically switch between dark mode and light mode according to the user’s settings. I think it will be such an age.

Even if the user is set to dark mode as a user, the website and general apps may not be blank! It will be.

Whether it will be detected from the settings of the OS such as Windows, Mac, Android, iOs, etc., it will be detected from the settings of the browser such as Chrome or Safari, get the color mode settings of the OS from the situation It seems to be.

What is the media query “prefers-color-scheme” in CSS?

When Chrome detects Windows dark mode, it means that there is some kind of API.

The media query “prefers-color-scheme” is a CSS media query created to detect MacOS dark mods, but it may be possible to detect dark mods on Windows 10 in the future.

Description sample of media query “prefers-color-scheme”

/* Light mode */
@Media (Prefers-color-scheme: Light) {
 Background: #FFF;
 Color: #000;
}

/* Dark Mode */
@Media (prefers-color-scheme: Dark) {
 Background: #000;
 Color: #FFF;
}

In this way, if the browser is compatible with MacOS, it will be possible to automatically switch the dark mode by the CSS side.

As of May 16, 2019, the browsers supported by the media query “prefers-color-scheme” are only Firefox, Firefox for mobile, and Safari.

It seems that the color mode of Windows is not detected at present because there is no change even if you check Windows 10 with dark mode and supported Firefox.

Ref: prefers-color-scheme – CSS: Cascading Style Sheets | MDN

Find out if you can get dark mode with JavaScript or PHP

If it is JavaScript, it is likely to be able to acquire the state of dark mode per OS information acquired by navigator.

If the above CSS can be obtained, will it be possible to determine the dark mode from there as well?

If it is possible if it is an application already, if you look at the place where the sensitive Twitter like this one does not correspond to automatic detection, it looks like it is nothing even if you look at it now, but from now on it is implemented by either method It will be possible.

When considering the implementation of the dark mode, it seems that not only the determination of the dark mode but also the rewriting of CSS is very serious. I wonder if WordPress plugins or JavaScript plugins will appear in the coming season.

I’d like to make an article again once I know how to automatically determine the dark mode.

2019-06-15Windows

Posted by Yousuke.U