RICK REA: Helping You Grow Through Online Marketing
  • Home
  • Blog
    • Social Media News
    • SEO Marketing News
    • Digital Trends News
    • Photography News
    • Mobile Marketing
    • Business News
    • Gadget News
    • Printing News
  • Contact
  • About
  • Subscribe

SEO Marketing News

Google Chrome Now Supports Dark Mode Preference via @martinibuster

7/30/2019

0 Comments

 
https://ift.tt/32XUSlG

Google Chrome Now Supports Dark Mode Preference via @martinibuster

https://ift.tt/330RGWr


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.

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.

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.

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.

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;
}
}”

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)”

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

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





SEO

via Search Engine Journal https://ift.tt/1QNKwvh

July 30, 2019 at 02:26PM
0 Comments



Leave a Reply.

    Categories

    All
    Conversions
    Landing Pages
    Lead Generation
    Link Building
    Search Ranking
    SEO

    Archives

    November 2020
    October 2020
    September 2020
    January 2020
    November 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017

    RSS Feed

All content copyrighted (C) 2010 ~ 2020
​All Photos & Content Used Under Creative Commons
​www.RickRea.com 701-200-7831
Privacy Policy
  • Home
  • Blog
    • Social Media News
    • SEO Marketing News
    • Digital Trends News
    • Photography News
    • Mobile Marketing
    • Business News
    • Gadget News
    • Printing News
  • Contact
  • About
  • Subscribe