Google Chrome Now Supports Dark Mode Preference

Google Chrome Now Supports Dark Mode Preference

Google Chrome Now Supports Dark Mode Preference

Google Chrome Now Supports Dark Mode PreferenceGoogle Chrome Now Supports Dark Mode Preference

Advertisement

Google announced support for  prefers-color-scheme media query.  This means Chrome will display web pages with dark mode color schemes if a user indicates a preference for dark mode. This change begins in Chrome 76.

Beginning with Chrome 76, web developers can now show Chrome visitors a dark mode version if the user sets that as their default viewing preference.

Advertisement
Continue Reading Below

Bạn đang xem: Google Chrome Now Supports Dark Mode Preference

Dark Mode is an Opportunity

Dark mode allows users to browse your site under dark settings. Creating a dark mode version of your site allows you to provide your content to these users in a way that accommodates them. This is good for the publisher because it will keep that user happy and on your site longer.

Some forum and WordPress theme templates come with dark mode alternative stylesheets. But you will probably want to update those so that they are optimized for legibility.

CSS-Tricks.com has an article listing some of the

customizations you may wish to consider

. For example, there’s a way to make images darker with CSS so that they display better in dark mode.

Advertisement
Continue Reading Below

Xem thêm: Desk là gì

Dark Mode and Accessibility

Dark mode addresses accessibility concerns. Some sight impaired people have an

easier time browsing web pages

in dark mode. Others use dark mode because it reduces eye strain.

Xem thêm: Cô gái mlem mlem sữa chua dù chưa tính tiền, dân mạng nhao nhao:’Em bỏ quên não à?’

Dark Mode Preferences Browser Compatibility

According to Mozilla’s

developer page on browser compatibility

for prefers-color-scheme media query, many major browsers now support dark mode.

Desktop

  • Chrome 76
  • Firefox 67
  • Safari 12.1.
Advertisement
Continue Reading Below

Mobile

  • Android Webview 76
  • Chrome for Android 76
  • Firefox for Android 67
  • Safari on iOS 13

Microsoft Edge and Explorer plus Opera do not currently support dark mode for the desktop. Opera for Android does not support dark mode for Android mobile devices.

According to Google:

“Many operating systems now support a dark mode, or dark theme.

The prefers-color-scheme media query, allows you to adjust the look and feel of your site to match the user’s preferred mode.

@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}”

Advertisement
Continue Reading Below

Xem thêm: Tổng hợp 10 cách Download tải video Facebook “chất lượng cao” chỉ vài giây

Google’s Material Design Page

Google has a Material Design page that discusses the principles of designing for dark mode. In it they suggest:

“Material Design dark themes are defined by the following properties:

Contrast: Dark surfaces and 100% white body text have a contrast level of at least 15.8:1

Depth: At higher levels of elevation, components express depth by displaying lighter surface colors

Desaturation: Primary colors are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels

Limited color: Large surfaces use a dark surface color, with limited color accents (light, desaturated and bright, saturated colors)”

Advertisement
Continue Reading Below

As you can see, a dark mode theme is more than inverting colors, turning black to white and white to black. You may have to choose a less stark contrast for text legibility.

Should You Turn to the Dark Mode?

There are many reasons to add a dark mode version of your site. Allowing users to view your site in dark mode is not only good for users but it may be good for your site and user satisfaction metrics.

Further reading:

Read Google Chrome announcement:

https://developers.google.com/web/updates/2019/07/nic76

Google’s Material Design page on Dark Mode Themes

https://material.io/design/color/dark-theme.html

Advertisement
Continue Reading Below

Mozilla’s Developer page on prefers-color-scheme media query

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Article about considerations when redesigning for dark mode

https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode

Chuyên mục: Hỏi đáp

admin