Chrome Dark Mode
Amancio Mccrae
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
This example shows both options: Theme A uses light colors, but can be overridden to dark colors. Theme B uses dark colors, but can be overridden to light colors. In the end, if the browser supports prefers-color-scheme, both themes will be light or dark.
The left boxes shows Theme A and Theme B as they would appear without the prefers-color-scheme media query. The right boxes show the same themes, but one of them will be changed to a darker or lighter variant based on the user's active color scheme. The outline of one box will be dashed or dotted if it was changed based on your browser or operating systems settings.
\n The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.\n A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.\n
Google Chrome has had a built-in dark theme like Mozilla Firefox and Microsoft Edge since Chrome 74. You can even apply a dark theme to every web page you visit using third-party themes or an extension. Here's how.
Here's how to activate Chrome's new dark mode if you'd rather use dark mode in Chrome and light mode throughout the rest of Windows 10. That article also includes instructions for tweaking the color of Chrome's window title bars.
Chrome supports user-created themes, which you can download from the Chrome Web Store. To give Chrome a dark interface, all you have to do is install a dark theme. Google even provides a helpful collection of editor-selected dark themes. This will give your Chrome browser a dark mode on Windows 7, Linux, Chrome OS, and any operating systems without a native dark theme available.
We recommend Morpheon Dark, which is the most popular dark theme in the Store. Unlike some other dark themes, it provides a decent amount of contrast between your active tab, which is a bit lighter, and your inactive tabs, which are darker.
A theme changes your browser's interface, but most websites use white backgrounds. Sure, you can enable dark mode in Gmail and some other websites individually, but that only works for one website at a time.
To get a dark mode for the entire web, install the Dark Reader extension from the Chrome Web Store. Some other browser extensions work similarly, but we like Dark Reader most out of all the dark mode extensions we've tried.
This extension automatically applies a dark style to every web page you visit, and you can click the Dark Reader button on your toolbar to adjust it. You can also disable dark mode for a website from here. The extension even lets you set sites to never open in dark mode, which is useful if Dark Reader doesn't work well with a website.
Unfortunately, Chrome's Settings pages will always be light unless you enable your system's dark theme. Extensions can't tamper with these for security reasons. Chrome's context menus are provided by the operating system, so you can't turn those dark with an extension, either.
Chris Hoffman is the former Editor-in-Chief of How-To Geek. Chris has personally written over 2,000 articles that have been read more than one billion times---and that's just here at How-To Geek.
With over a decade of writing experience in the field of technology, Chris has written for a variety of publications including The New York Times, Reader's Digest, IDG's PCWorld, Digital Trends, and MakeUseOf. Beyond the web, his work has appeared in the print edition of The New York Times (September 9, 2019) and in PCWorld's print magazines, specifically in the August 2013 and July 2013 editions, where his story was on the cover. He also wrote the USA's most-saved article of 2021, according to Pocket.
Chris was a PCWorld columnist for two years. He founded PCWorld's "World Beyond Windows" column, which covered the latest developments in open-source operating systems like Linux and Chrome OS. Beyond the column, he wrote about everything from Windows to tech travel tips.
The news he's broken has been covered by outlets like the BBC, The Verge, Slate, Gizmodo, Engadget, TechCrunch, Digital Trends, ZDNet, The Next Web, and Techmeme. Instructional tutorials he's written have been linked to by organizations like The New York Times, Wirecutter, Lifehacker, the BBC, CNET, Ars Technica, and John Gruber's Daring Fireball. His roundups of new features in Windows 10 updates have been called "the most detailed, useful Windows version previews of anyone on the web" and covered by prominent Windows journalists like Paul Thurrott and Mary Jo Foley on TWiT's Windows Weekly. His work has even appeared on the front page of Reddit.
Articles he's written have been used as a source for everything from books like Team Human by Douglas Rushkoff, media theory professor at the City University of New York's Queens College and CNN contributor, to university textbooks and even late-night TV shows like Comedy Central's @midnight with Chris Hardwick.
Starting in 2015, Chris attended the Computer Electronics Show (CES) in Las Vegas for five years running. At CES 2018, he broke the news about Kodak's "KashMiner" Bitcoin mining scheme with a viral tweet. A wave of negative publicity ensued, with coverage on BuzzFeed News, CNBC, the BBC, and TechCrunch. The company's project was later reportedly shut down by the U.S. Securities and Exchange Commission.
In addition to his extensive writing experience, Chris has been interviewed as a technology expert on TV news and radio shows. He gave advice on dark web scans on Miami's NBC 6, discussed Windows XP's demise on WGN-TV's Midday News in Chicago, and shared his CES experiences on WJR-AM's Guy Gordon Show in Detroit.
Chris also ran MakeUseOf's email newsletter for two years. Nearly 400,000 subscribers received the newsletter complete with a handwritten tip every day.
A light-on-dark color scheme (dark mode, night mode) has been suggested as an option/enhancement to Wikipedia numerous times since 2010, including on Phabricator. Wikipedia's smartphone apps offer an official night mode, but the desktop settings do not. While there is no official desktop dark mode yet, there is a gadget on English Wikipedia, and various volunteer-written CSS files that allow customization for logged-in users. More limited options exist for non-logged-in users. No current options are actively supported or maintained by the Wikimedia Foundation.
Apart from gadgets, another way to get a dark mode is adding custom CSS to your user style page(s). This is more complex than activating a gadget, but more flexible, allowing, for example: custom colors, custom fonts, or hiding unused UI elements. Help:User style describes the process of adding custom CSS in general. For dark mode-specific CSS, a number of options are available including:
There are browser extensions for popular browsers that offer a Wikipedia-specific dark mode, and browser extensions that allow you to set custom CSS for a given domain, which could be used with the CSS available above. However, all browser extensions need to be carefully screened for security issues, some inject advertising, and customization may be more difficult than editing a single CSS file.
If you use Chrome, there is also a built-in experimental/beta setting to force dark mode, set through chrome://flags/ with the description "Force Dark Mode for Web Contents - Automatically render all web contents using a dark theme". This is provided by Chrome's development team, so security should not be a concern, but this will render all web pages in dark mode. This feature is also available in Microsoft Edge, through the edge://flags/ menu.
There are several add-on/extension offerings on Firefox which work well. The most popular is Dark Mode for Wikipedia which uses only a single css style sheet to enable dark mode on Wikipedia. Do not install any extension or add-on that you don't trust.
MediaWiki dark modes often lack Wikipedia-specific CSS classes, which can result in unexpected page rendering when used with Wikipedia. They may provide useful ideas in improving Wikipedia-specific dark modes, however.
You'll use the same menus to disable dark mode that you do to turn it on. In macOS and iOS, go to the System Preferences or Settings app (respectively) and turn it off for the system. You can also activate Siri and say, "Turn off Dark Mode." In Windows, go to Settings > Personalization; on an Android device, go to Chrome settings, and then select Theme.
Turning on dark mode on Chrome feels almost impossible because Google doesn't exactly make it obvious how to turn on Chrome dark mode, especially in the desktop browser. It's like they're playing hide and seek with this feature.
So, way back in 2019 with version 78 of Chrome, they actually added a dark mode for websites but they didn't make it easy to find. It's like a secret treasure hunt, and you won't stumble upon it unless you know exactly where to look.
The obsession around Dark Mode continues, as in the last few days we have heard about nothing but the upcoming dark side of Google Chrome. Last year, it was centered around Windows 10 and macOS. Now that both the operating systems have introduced easier-on-the-eye themes, apps are trying to match those system wide dark modes but apparently not without issues.
08ab062aa8