In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Tech

[News] Browsers Are Bringing Automatic Dark Mode to Websites

2019-09-18 12:04:08
470 9


Hello Mi Fan's!!!

Dark mode is now everywhere, including in iOS 13 and Android 10. Web browsers like Chrome, Firefox, Safari, and Edge have embraced dark mode, too. Now, browsers are bringing automatic dark mode to websites thanks to a feature called prefers-color-scheme.

Websites Can Now Detect Dark Mode Like Apps Can

Some sites offer dark modes today. For example, you can enable dark mode on YouTube, Twitter, or Slack in a few clicks. That’s pretty cool, but who wants to enable this option separately each time they visit a new website?


When you enable dark mode on Windows 10, macOS, iOS, or Android, the applications you use all know you’ve enabled dark mode and can automatically enable it. Google Chrome doesn’t even have an easy-to-access dark mode option. Chrome just automatically adjusts itself based on your overall operating system choice.

In the past, there wasn’t a way for websites to automatically implement dark mode. Even if your browser’s interface goes dark, websites will continue using their bright backgrounds. You have to manually enable dark mode or use a browser extension that forces dark mode. It wasn’t web developers’ faults—they had no way of detecting whether dark mode was enabled on your device. That’s changed with a new cascading style sheets (CSS) feature websites can take advantage of.

It’s Already In a Browser Near You

The answer to this problem is prefers-color-scheme, a CSS feature that websites can use to ask your web browser whether you have dark mode enabled. A web page can use a different theme depending on whether you have dark mode enabled or disabled.


This feature was only recently added to modern web browsers in 2019.

  • Google Chrome for all platforms (including Android) has supported it since Chrome 76, released on July 30.
  • Safari for iPhone and iPad gets it with Safari 13 as part of iOS 13 on September 19.
  • Mozilla Firefox has supported it since Firefox 67, released on May 21.
  • Safari for Mac has supported it since Safari 12.1, released on April 5.
  • Microsoft Edge doesn’t support it, but the new Chromium-based Edge browser will.

This isn’t an option you select in your browser itself. Just choose between light and dark modes in your operating system, your browser will obey the change, and websites can follow along and automatically enable dark mode if they like.

So Where Are the Dark Mode Websites?

While this feature is live today and working in all the popular browsers, it’s very new. Dark mode comes to iPhone and iPad with the new iOS 13. On the Android side, only Android phones with the new Android 10 have dark mode support. Even Google Chrome on desktop has only supported prefers-color-scheme for a few weeks.

It’s just so new. You likely won’t encounter many websites that use prefers-color-scheme to automatically enable dark mode yet. That will hopefully change in the future. Websites can now respect your dark mode preference and automatically follow it. Web developers have a new option they can take advantage of.

Source

We love dark mode. Now that it’s an option on all the latest operating systems, we’ll be excited to see it spread across the web.
2019-09-18 12:04:08
Favorites3 RateRate

Pro Bunny

jihad.ptk1 | from Redmi Note 7 Pro

#1

thanks for sharing
2019-09-18 12:50:26

Grand Master Bunny

Seragios | from Redmi 5

#2

thanks for sharing
2019-09-18 13:03:55

Master Bunny

Genesome | from MI 6

#3

thanks for yours shared
2019-09-18 14:39:12

Master Bunny

m@soud | from Redmi Note 5

#4

thanks for sharing
2019-09-18 15:38:08

Advanced Bunny

GoteSpam | from app

#5

Finally, a worthy improvement! My eyes are much safer now! (well, yes, but actually no)
2019-09-18 18:43:13

Grand Master Bunny

daniel675 | from MIX 3

#6

thanks for sharing
2019-09-18 18:50:55

Pro Bunny

1724657927remanso | from Redmi Note 4

#7

Tanks
2019-09-18 18:52:50

Pro Bunny

1724657927remanso | from Redmi Note 4

#8

Tanks

2019-09-18 18:54:21

Grand Master Bunny

Ian Adoe | from Redmi Note 5A Prime

#9

It sounds cool...
2019-09-19 11:42:14
please sign in to reply.
Sign In Sign Up

ᎮᏒᎥᏁፈᏋ

News Reporter

  • Followers

    229

  • Threads

    994

  • Replies

    2025

  • Points

    25130

Check-in 3 jours
Check-in 7 jours
Check-in 21 jours
Check-in 40 jours
Check-in 70 jours
Check-in 100 jours
10k
New Home
10k Mi Fans
Redmi Note 7
Cast Away
20K Mi Fans
30K Members
Mi Love U & I
Limited Edition Space Medal
Bunny Winner
20K Mi Fans
Mi 9 & Mi 9 SE
70K Fans
Android Q
2 años
Mother's Day
Día de las Madres
Best Mi
Happy Mother's Day
Android Q
50K Mi Fans
Mobile Photography Lover
X-MEN. Desata tu poder
25K
Favorite X-Men
Medalla X-Men: Bestia
Medalla X-Men: Cíclope
X-Men: Mística
Medalla X-Men: Magneto
70K Mi Fans
Challenger
40K Registered Users
Eid Mubarak
Eid ul-Fitr Mubarak
Brain Teaser
X-Men Favorite Medal
Perfil Personalizado
80K Mi Fans
200k Member
Tech Talent
Orgullo
100K Mi Fans
Selfie Day
50K Users
Mi 9T
Medalla Mi Community
MIUI Geek
Fortune 500
Fortune 500
Three's A Party
Happy July
Mi 9T
Global Fans
My Country My Pride
Redmi 7A
Fortune Global 500
FORTUNEGLOBAL500
Mi 9 SE
60K Registered Users
Like
Check in
Reply
Favorites
Post
FortuneGlobal500
Profile Medal
Eid Al-Adha Mubarak
9YearsWithMIUI
Fortune Global 500
MIUI 9th Birthday
Global Community
70K
У які ігри ви граєте найбільше?
Global Community
Mejor Contenido Agosto
Mi A3
80K Medal
Medalla Encuesta Mi Phone
80K
wallpaper votes
500
Redmi 7A
better together slogan
Global Community
device poll
better together with friends
games discuss
Puzzle Master
Mid-Autumn Festival

Read moreGet new
Copyright©2016-2019 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list