safari css dark mode

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

prefers-color-scheme

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.

Embedded elements

For SVG and iframes, prefers-color-scheme lets you set a CSS style for the SVG or iframe based on the color-scheme of the parent element in the web page. SVGs must be used embedded (i.e., <img src="circle.svg" alt="circle" /> ) as opposed to inlined in HTML . An example of using prefers-color-scheme in SVGs can be found in the Color scheme inheritance section.

Using prefers-color-scheme is allowed in cross-origin <svg> and <iframe> elements. Cross-origin elements are elements retrieved from a different host than the page that is referencing them. To learn more about SVGs, see the SVG documentation and for more information about iframes, see the iframe documentation .

Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.

Indicates that user has notified that they prefer an interface that has a dark theme.

Detecting a dark or light theme

A common usage is to use a light color scheme by default, and then use prefers-color-scheme: dark to override the colors to a darker variant. It is also possible to do it the other way around.

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.

Theme A (brown) uses a light color scheme by default, but will switch to a dark scheme based on the media query:

Theme B (blue) uses a dark color scheme by default, but will switch to a light scheme based on the media query:

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.

Color scheme inheritance

The following example shows how to use prefers-color-scheme with the color-scheme property inherited from a parent element. A script is used to set the source of the <img> elements and their alt attributes. This would normally be done in HTML as <img src="circle.svg" alt="circle" /> .

You should see three circles, with one drawn in a different color. The first circle inherits the color-scheme from the OS and can be toggled using the system OS's theme switcher.

The second and third circles inherit the color-scheme from the embedding element; the @media query allows setting styles of the SVG content based on the parent element's color-scheme . In this case, the parent element with a color-scheme CSS property is a <div> .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• color-scheme CSS property
• Sec-CH-Prefers-Color-Scheme HTTP Header User Agent Client Hint
• Simulate prefers-color-scheme in Firefox (Firefox Page Inspector > Examine and edit CSS)
• Video tutorial: Coding a Dark Mode for your Website
• Redesigning your product and website for dark mode
• Changing color schemes in Windows , macOS , Android , or other platforms .

How to get dark mode working with CSS

by Frank Lämmer

I have been playing around with MacOS Mojave’s dark mode lately. It’s not 100% pleasing to my eyes, yet. But it’s especially useful when nerding out at night time with little ambient light.

Dark mode is a design trend. Many reading applications (Medium App, Twitter …) have it already. It’s not only about just inverting all colors, but it’s also about art direction.

Not everything is dark (yet)

One thing that can be a bit shocking when working in dark mode is the flash of light when opening a document with a big white background. This post explores how to deal with dark mode on the web and styling dark mode with CSS.

Dealing with dark mode user settings

So wouldn’t it be nice if documents and websites would respect the current surrounding theme?

Automatic color conversion?

At least Safari and Firefox already have a “Reader mode” with support for light text on a dark background. Here, the <article> context gets rendered using custom styles for best readability and removing clutter, and there is a setting for inverting colors. Extending on that, browsers might invert websites automatically with smart styles. Sounds scary! But at least Apple Mail is doing so already. It even inverts colors for some HTML mail.

Smart-inverting colors might or might not be a solution. What else?

Media query to the rescue!

I am not alone. Dark mode for CSS is currently (August 2018) being discussed in “CSS Working Group Editor Drafts” . The idea is to make that available as a media query. Something has already landed in Safari ( private ), see also here .

So in theory you can do this:

Let’s wait until all browsers are ready. I think there is some way to go for standardization. The OS makers might need to agree on something as well.

Inverted is not dark mode

Did you know: There already is a media feature for “inverted-colors” in Media Queries Level 4. That’s not the same as dark mode. A kind of “dark mode” has been around for a while. Windows has also High Contrast mode. There are many different takes on that.

Nevertheless, it would be really cool if website authors could decide if and how to deal with it when a user with enabled “dark mode” visited their site. So you, as the designer, have full control over how your website will look in “lights off mode”. Much more work for you? No, it’s easy. Read on.

Incognito is not dark mode

When opening an incognito window for private browsing, many browsers will present a dark browser chrome to highlight the difference. That’s also not dark mode, but it’s dark.

Using CSS vars for theming dark mode

Thanks to “CSS custom properties” (also known as “CSS Vars”), we can now more easily than ever create themes with very little CSS. The most simple invert theme:

Shameless plug: My (great new) CSS framework Teutonic CSS already makes use of such simple inverting:

Websites changing browser chrome

This article is about how a user setting can change the appearance of a website. It also works the other way around: a website can change the way the browser looks. There are some proprietary meta tags available, so far only for mobile browsers:

Further readings

The article “ OS: High Contrast versus Inverted Colors ” by Adrian Roselli discusses the differences between “inverted” and “high contrast” in Windows and macOS.

The article “ How “invert brightness” can improve accessibility and help us use our devices ” by Matthew Atkinson discusses how inverting colors helps with the user experience. You can also find the concept of “smart inverting” colors there.

The nice thing about standards is that you have so many to choose from.

While “night mode” is definitely a trend, different implementations are floating around. Raise your voice to make that ONE web standard. Get your CSS forward compatible so you can support that without too much hustle.

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Website Demos Safari Browser's Upcoming Support for Dark Mode CSS in macOS Mojave 10.14.4

In the next official update to macOS Mojave, Apple's Safari browser will enable automatic Dark Mode for websites that support it.

macOS Mojave enables users to switch between Light and Dark mode via System Preferences -> General. With the latest macOS developer beta installed, websites that support the new CSS query will automatically adapt their color scheme to match whichever system-wide option the user has enabled.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

While this is neat, I can’t see it being widely implemented by websites. I’m a web dev and I feel like unless this becomes a standard across all browsers, we simply won’t implement designs for it. It’s a further cost to our clients (and a pretty major one in reality) and for a single web browser? A web browser that only runs on a single OS? I doubt many companies will be keen to spend money on this.

Others browsers will implement support for it as well, eventually. Also, Windows 10 has already got dark theme, so it makes sense for other browsers to have it as well. Chrome and Firefox are already working on it. When it comes to adding support for it and the costs related to it, I think it mostly depends on how big the website is, but for my personal website I added the query for like 5 minutes. I think it is really nice feature and hope to become widespread in near future. Just because you feel like it's "useless", doesn't mean it's the case for everyone else.

I've been looking for something like this to go with dark mode on my 2017 MBP running Mojave. Is this something that the end user can do right now? If so, can you link a tutorial? I used to do web development myself, so I'm comfortable with CSS.

Popular Stories

Warning: Apple Users Targeted in Phishing Attack Involving Rapid Password Reset Requests

Sources: iOS 18 Lets Apps Be Placed Anywhere on Home Screen Grid

Apple Announces WWDC 2024 Event for June 10 to 14

New iPad Pro Again Rumored to Feature Landscape Front-Facing Camera

Apple Maps May Gain Custom Routes With iOS 18

Apple Releases macOS Sonoma 14.4.1 With Fix for USB Hub Bug

iOS 18 Will Finally Bring This Android Feature to iPhone

Ios 18: what to expect from 'biggest' update in iphone's history, next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

5 hours ago by MacRumors Staff

23 hours ago by MacRumors Staff

2 days ago by Tim Hardwick

3 days ago by Tim Hardwick

How to get Dark Mode in Safari for your website?

• March 26, 2019
• Roman Matovsky

Apple today released macOS Mojave 10.14.4. But I’m interested in this part:

Safari: — Adds Dark Mode support for websites that support custom color schemes

It’s a cool thing if you care about your website because with the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme . This feature lets us detect if the user sets Dark Mode on his Macbook or iMac.

All you need is just to add very simple code into your CSS:

Using dark mode in CSS

MacOS Mojave has been recently released with the Dark Mode option.

The option allows you to enable dark interface through all the system, which is very useful while working in the evenings and nights. Native apps are able to take advantage of the mode by following the interface guidelines .

What about web apps? The good news is: Safari 12.1, Chrome 73 and Firefox 67 support Dark Mode! The CSS itself is very simple:

The prefers-color-scheme query supports three values: dark , light , and no-preference .

To use it in JS, window.matchMedia('(prefers-color-scheme: dark)') would do the trick. No polyfills are required, the CSS/JS code would be skipped if your browser doesn’t support it.

For the demo, open this site in Safari, Chrome or Firefox with MacOS Dark Mode enabled. iOS would probably also get a dark mode in the next major update.

DEV Community

Posted on Apr 29, 2023 • Updated on May 6, 2023

Dark Mode in 3 Lines of CSS and Other Adventures

Dark Mode is a design trend where the color scheme of a website is changed to a dark background with light-colored text and elements. It's also referred to as Night Mode or Dark Theme . The purpose of Dark Mode is to reduce eye strain in low light environments, conserve battery life on mobile devices, and create a sleek and modern aesthetic.

Many popular websites and applications now offer a Dark Mode option — here’s TailwindCSS:

If you’re a developer, you most likely already know how to toggle Dark Mode in Dev Tools (for those who don’t know, go to the “rendering” tab!):

If you want to toggle on Dark Mode for your operating system (and thus all apps supporting Dark Mode), go to System Settings. On a Mac, you‘ll find it under System Settings > Appearance:

There are a lot of tutorials out there already on how to implement dark mode for a webiste.

This tutorial will look into different approaches , including some rad new CSS-features, that’ll allow you to ditch JavaScript.

Ready? Let’s get started.

Dark Mode using System Colors

First, we’ll create a simple HTML-document with a headline:

In a stylesheet, we’ll add:

This will tell the browser, that our document can accept both a light and a dark color-scheme .

If you run this snippett in a browser, even with Dark Mode on , it will be … light.

Your browser UI will be dark, though.

That’s because the user-agent -stylesheet does not have any default colors set up.

We can fix that quickly, by using System Colors :

Let’s check our snippet again:

Much better! Dark Mode for your entire website in 3 lines of CSS!

Let’s dive a bit more into System Colors . From the specs:

In general, the <system-color> keywords reflect default color choices made by the user, the browser, or the OS. They are typically used in the browser default stylesheet, for this reason.

Here’s a Light Mode-demo, showing the available System Colors in Safari:

If we switch to Dark Mode, some colors are changed completely (like Canvas and CanvasText as we’ve already encountered), while others are only slightly changed:

Using System Colors for Dark Mode is a bit of a simplified Dark Mode-experience.

Yes, it will work — but pure black and white is a bit boring.

We can spice it up using color-mix in CSS. We can mix a bit of CanvasText (black or white) into Canvas (white or black) for the background-color , and the opposite for color :

This results in a “softer” look:

Deducting saturation from a color, is a widely used way to make variations of colors in Dark Mode.

Using relative colors in CSS, we can do exactly that:

Unfortunately, relative colors don’t work with System Colors in any browsers — yet!

NOTE: System Colors can be overwritten with forced colors (although used rarely) — so don’t rely too much on this technique.

Let’s move on to another technique, that’ll allow us to fine-control our Dark Mode colors.

Using a prefers-color-scheme media-query

To specify specific colors for light and dark mode, I recommend using CSS Custom Properties , and then update these using a prefers-color-scheme media-query.

With Light Mode as our default, let’s add the colors to a :where(body) -section, to separate them from our regular body -styles:

Then, for Dark Mode , we’ll simply update these colors-properties:

Let’s check it out:

But what if we want the users to choose which version of our website they want, indepently of the System Settings?

They might prefer a system set to Dark Mode, but our website in Light Mode.

Let’s create a toggler!

Creating a color-scheme toggler

Using JavaScript

If you go to a site like TailwindCSS , you’ll notice that a dark -class is added to the html -node when you select ”dark” from the color-scheme-toggler. This is done with JavaScript:

Open Props is using a similar method, but updating a data-theme -attribute instead, and then defining properties in two blocks:

Using some brand new CSS-techniques, we can create a toggler without JavaScript.

We’ll create a toggler with 3 states:

• Light (forced)
• Auto (system default, could be either light or dark)
• Dark (forced)

First, some basic markup:

After adding some basic styles (see the Codepen-demo below), it renders like this:

We’ll add a --darkmode -property and container-type to the html-element:

We’ll be using @container style() -queries, so we need to set the node as a “container”.

Since we don’t want to observe inline-size -changes, we just add the value normal .

If the user picks a “forced” value, we’ll update --darkmode :

And finally, we’ll use a container style() -query to check, if --darkmode is set to 1 :

NOTE: @container style() -queries only works behind-a-flag in Chrome at the moment, it’s early days, so do not use in production.

Now, after selecting “Dark”, our toggler (and page) looks like this:

Simple and effective!

Storing state

If we want to store the users choice, I’m afraid we need a bit of JavaScript!

First, let’s add an identifier to our <fieldset> :

Then, in JavaScript:

Now, all we have to do is setting the property to the localStorage -value when the document has been loaded:

To select the correct mode in the toggler, add this to the if -block:

System Colors

Photo-credit: Sora Shimazaki

Top comments (21)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Dec 16, 2020

What is the general consensus in the community about referencing elements like this? As opposed to:

Isn't it considered unsafe and error-prone? I don't really remember, it's rarely seen in the wild, perhaps for a reason.

• Location Copenhagen
• Work Co-Founder at Perfection.DEV
• Joined Nov 16, 2020

When I write example-code for articles, I tend to omit selectors, because I want to focus on what the code does , rather than how to select a Node in the DOM. I assume most of Dev.to's readers knows how to do that anyway, and might want to use their own selectors (class-based, attribute-based, something else?) instead of just copy/pasting the code.

But I could be wrong! So thank you for your feedback — I've added this to the article:

• Location California
• Education Networking/Software
• Work Self Employed
• Joined Jun 5, 2021

It's best practice to use document.getElementById over the global variable because defining a local variable colorScheme would take precedence. It's also annoying to debug these global variables because they are not explicitly defined. When searching for something like colorScheme = you won't find anything, and finding something like colorScheme.addEventListener tells you nothing about the type of variable. However, finding document.getElementById tells you it's a DOM element.

• Location City of Bath, UK 🇬🇧
• Education 10 plus years* active enterprise development experience and a Fine art degree 🎨
• Work Web Development Consultant at ForgeRock
• Joined Aug 21, 2018

I vote that implicit code is dangerous code and explicit code is safe code and there is no grey area 🫣

(see updated feedback above)

• Joined Feb 5, 2023

I've used this scheme of system themed colours when programming Windows desktop apps.

I didn't know it existed in CSS though - thanks!

• Location Prague, Czech Republic
• Work Webscope
• Joined Mar 21, 2021

Very detailed post! Great share! @madsstoumann Framing these screenshots would've been chef's kiss. I've built a simple OSS tool to help with screenshots with ease. Give it a shot and let me know what you think.

github.com/ekqt/screenshot

• Joined Mar 14, 2023

Love this ❤️, Thanks for sharing.

• Email [email protected]
• Location India
• Education Gurugram
• Pronouns he/him
• Work Student
• Joined Nov 15, 2021

Amazing code snippet.. thanks for telling.

You just saved a lot of time ⏲️ 😌

• Location Usa, Nowhere (Private)
• Education Barbara Goleman High School
• Work Game developer, web developer, and software developer
• Joined Mar 21, 2023

• Email [email protected]
• Education Bachelor of CSE
• Work Computer Science Student
• Joined Oct 12, 2021

This is something I'm for, Thanks for sharing! 🚀

• Location UK
• Education Makers Fellow Alum
• Pronouns she/her
• Joined Mar 20, 2018

Great tips, this was exactly what I've been looking for! 👏

• Joined Mar 7, 2017

If statement missing here:

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Remote debugging using Google Chrome on Android devices with Windows

Nima Jafari - Mar 4

Remote debugging using Google Chrome on iOS devices with macOS

DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

Sh Raj - Mar 21

Goodbye SASS 👋, welcome back native CSS

Karsten Biedermann - Mar 20

We're a place where coders share, stay up-to-date and grow their careers.

CSS dark mode

November 5, 2018

Dark mode is finally coming to CSS, and you can start experimenting with it thanks to Safari Technology Preview . With their latest release, the experimental browser includes support for the prefers-color-scheme media query. Variables in CSS are also coming, making dynamic light and dark modes for your visitors easier than ever.

Here’s an abbreviated set of the variables and media query I’ve put to use for my sites.

You should use this time to experiment with how you’d adapt your own styles to put the new media query to work. For example, picking the dark colors for my site wasn’t too difficult, but I found screenshots were far too intense for comfortable reading. A quick opacity and transition brings some added comfort while reading at night.

Newsletters

• Our sponsors
• Watch Store
• Hot topics:
• Apple legal battles
•  Apple deals 
• Editor’s picks
• Buying guides

Force websites to comply with macOS Catalina’s Safari Dark Mode

By Charlie Sorrel • 11:00 am, November 13, 2019

• Top stories

I stopped reading white text on a black background the moment I left school, and I’ve never liked it since. Especially on a screen, where the black expanse becomes a dark mirror that reflects everything in its sight. But even I prefer Dark Mode late at night, when I want to read without disturbing other people.

The trouble is, many websites don’t support Dark Mode. Everything else in Safari is rendered in tasteful black, but the page itself is still rendered in glaring white. Happily, on the Mac at least, there’s a way to fix it. Here’s how to force any website to support Safari Dark Mode on Mac.

Dark Mode for Safari is an Apple-recommended Safari extension that forces Dark Mode on sites that don’t support it. Instead of pages flashing bright white when they load, they will open in restful white-on-black.

Just like Dark Mode on the rest of your Mac, the extension’s operation can be scheduled. You can activate it manually, run it on a schedule of your choosing, or set it to activate whenever Mojave/Catalina’s native Dark Mode is active .

How to use the Dark Mode for Safari extension

Enabling the Dark Mode Safari extension couldn’t be easier. Just download the extension from the Mac App Store, and activate it in Safari’s Preferences . The preference page is found in Safari, under the Safari menu bar item. Open it, click on the Extensions tab, and click the check box for the Dark Mode extension.

You can choose between three dark themes — Dark, Soft Dark and Mono — and you also can whitelist sites so they are not automatically darkened.

Dark Mode for Safari, from developer Denk Alexandru, seems essential for anyone using Mojave or Catalina’s Dark Mode. Nothing says “half-assed implementation” like a bright webpage popping out of your tastefully dim desktop. Apple chose not to build this in, but you can add it for just $2.

Price: $1.99

Download: Dark Mode for Safari from the App Store (macOS)

Daily round-ups or a weekly refresher, straight from Cult of Mac to your inbox.

Cult of Mac Today

Our daily roundup of Apple news, reviews and how-tos. Plus the best Apple tweets, fun polls and inspiring Steve Jobs bons mots. Our readers say: "Love what you do" -- Christi Cardenas. "Absolutely love the content!" -- Harshita Arora. "Genuinely one of the highlights of my inbox" -- Lee Barnett.

The Weekender

The week's best Apple news, reviews and how-tos from Cult of Mac, every Saturday morning. Our readers say: "Thank you guys for always posting cool stuff" -- Vaughn Nevins. "Very informative" -- Kenly Xavier.

Popular This Week

Hackers can exploit flaw in apple m-series processors, imac vs. macbook: should you buy a desktop or laptop mac, smackdown: magic mouse vs. logitech mx master 3 [setups], good news for airpods, bad news for apple [the cultcast], apple patches iphone bugs with new ios update, powerful new desktop speakers put on light show, charge gadgets, blockbuster us antitrust lawsuit targets apple’s ‘iphone monopoly’, own the air with this 2-pack of easy-to-fly camera drones [deals], why the doj’s antitrust lawsuit against apple is weak, vision pro vs. macintosh: a historical perspective.

• Is a New iPad Pro Coming Soon?
• Get It Now: Spring Tech Deals at Amazon

How to Enable Safari Dark Mode

Avoid eye strain with these settings

• Swansea University, Staffordshire University

• Wichita Technical Institute

What to Know

• Turning on dark mode in system preferences will enable the mode for compatible websites.
• If a website has a  Reader  button on the left side of the search field, click it to go dark.
• Use a Safari extension to enable dark mode on all websites. We recommend Night Eye and Dark Reader

This article covers three options to enable and disable Safari's Dark Mode on your Mac: via system preferences, by using Safari Reader View and using a browser extension.

How to Turn on Safari's Dark Mode via MacOS

At night, black text on white backgrounds is particularly tough on your eyes. It's very simple to switch on Dark Mode for your Mac. It doesn't just turn on Dark Mode for Safari, it does so for all your apps but that's perfect for protecting your eyes late at night or in dim lighting conditions.

Dark Mode is only available in macOS Mojave or later.

Click the Apple icon on the top left of your screen.

Click System Preferences.

Click General .

Click Dark .

If you want the dark appearance to only appear at night, you can click Auto for it to automatically adjust as the day progresses.

All websites that have been designed to support Dark Mode will now show in a darker form than before.

How to Switch off Safari Dark Mode

Switched on Dark Mode and realized you don't like it? It's simple to switch it back off.

As above, click the Apple icon on the top left of your screen and then choose System Preferences > General .

Click Light .

MacOS and Safari will now return to the light background permanently until you choose to switch it over again. 

How to Use Safari Reader View to Turn on Dark Mode

Depending on the website you're viewing, the only thing that may go dark with MacOS's Dark Mode is the buttons and menus around the website. To ensure the site goes fully dark to protect your eyes, you need to use Safari's Reader View.

Safari Reader View only works on certain websites. Often, this is restricted to blog posts and other text-heavy websites. It's worth using when able to though. 

On the website you want to view, click the Reader button on the left side of the search field.

This only appears on websites that support Safari Reader View.

Click the letter button on the right side of the search field.

Click the black background to change the background color. 

You can also adjust font size and font choice here.

The background has now been changed to a dark one with white text. 

Click away from the article to revert back to the original look or press the Escape key on your keyboard.

How to Use a Dark Mode Extension in Safari

The above solutions work only on a limited number of websites. If you want to enable Dark Mode for every website, you need to use a Safari extension. Many of these cost money but they can be useful. We recommend using either Night Eye which is free but limited or paying a one-off fee for Dark Reader. The process is the same for both extensions.

Install either Night Eye or Dark Reade r from the Mac App Store .

Open Safari then click Safari > Preferences .

Click the Extensions tab.

Check the box next to your newly installed extension to enable Dark Mode.

Both of these extensions should convert the vast majority of websites to Dark Mode as and when you need it.

Get the Latest Tech News Delivered Every Day

• How to Use Night Mode on Twitter/X
• How to Use Google Docs Dark Mode
• 9 Best Safari Extensions of 2024
• 10 Hidden Features in macOS Sonoma
• What Is Safari?
• The 20 Best Firefox Extensions of 2024
• How to Turn on Windows 11 Dark Mode
• How to Use Safari Extensions on the iPhone, iPad, or iPod Touch
• How to Enable Dark Mode on WhatsApp
• The 17 Best Hidden Features in Samsung Galaxy Note 10 and 10+
• 8 Tips for Using Safari With macOS
• How to Turn Mac Dark Mode On or Off
• How to Turn On Dark Mode in Windows 11
• How to Use Reading Mode on an iPhone or iPad
• How to Turn Dark Mode On or Off in Microsoft Outlook
• How to Print a Web Page

How to turn on Safari dark mode on a Mac

How to turn on safari dark mode on an iphone or ipad, how to turn on safari's dark mode on any apple device to save battery life and reduce eye strain.

• You can enable dark mode for Safari on a Mac, iPhone, or iPad, which can help ease eye strain and extend your device's battery life.
• Turn on dark mode for your Mac in System Preferences in the General section.
• For an iPhone or iPad, enable dark mode in the Settings app by going to the Display & Brightness section. 

In recent years, developers have been making it easier to enable dark mode for all your most common apps. That's good, because many people prefer dark mode because the palette is often easier on the eyes — especially at night — and it can even help extend your device's battery life by not illuminating the screen as brightly. Here's how you can turn on dark mode for the Safari browser on your Mac, iPhone, or iPad. 

Safari automatically uses dark mode if you enable it in your Mac's System Preferences.

1. Click the Apple menu and then choose System Preferences…

2. Click General .

3. In the Appearance section, click Dark or Auto . 

If you choose Dark , Safari and all other compatible apps will switch to a dark color palette right away and stay that way until you change this setting. Auto , on the other hand, sets the palette to dark at night and switches it to light during the day. 

Just like on the Mac, Safari on your iOS device uses dark mode if you enable the feature in your iPhone or iPad's settings. 

1. Start the Settings app.

2. Tap Display & Brightness .

3. In the Appearance section, tap Dark . 

If you want Safari (and the rest of your device) to use dark mode automatically at night but switch to a light palette during the day, turn on Automatic by swiping the button to the right.

• Main content

Your perfect Dark Mode Favicon

Did you switch to dark mode on some of your devices? Yes? Well, then you are already familiar with the problem: favicons. If they contain dark colors they are invisible. Here you will learn how to fix that!

Table of Contents

Google Chrome, the most popular browser to date, introduced dark mode almost 3 years ago. Firefox and all other major browsers now support it as well. On the contrary, even large companies (such as Asics, Sentry, and Under Armour) still use a favicon that is almost invisible on a dark background.

This is especially painful to see for a front-end person with a small tab-hoarding problem (and I have the feeling I am not alone here). Here’s what you can do to solve this difficulty:

Option 1: Quick Fix – Favicon with Background

If you only have 5 minutes to optimize for dark and light mode, you can simply update your current favicon with a white or black background.

This way your favicon will always look professional regardless of light or dark mode. Google also chose this option and added a white circle around the “G” to create more contrast. However, if you want to have a website with dedicated favicons for dark and light mode, go for the next option.

Option 2 (recommended): SVG-Icon for Light and Dark Mode

For a while now it’s been possible to use SVG graphics as favicons. This is convenient: They can be scaled without quality loss, plus you can apply CSS to change the color. The latter we are going to use for our dark mode and light mode favicons.

First open up your SVG file in your preferred editor, in my case that’s VS-Code. All you have to do is add internal CSS to your SVG through style tags. Within the tags, you select the fragment(s) of your icon and choose the color for the light theme.

Finally, use the media query to detect dark mode and set your favicon color accordingly: @media (prefers-color-scheme: dark) { ... }

The final SVG for your favicon will look like this:

Favicon Fallback for SVG Icons

The “Can I use” website states 75% support for SVG icons . We can start from here. Nevertheless, for a crucial branding element like the favicon we need 100% browser support. Therefore you can upload your SVG file to realfavicongenerator.net to create all possible favicon variants and then place the files in the root directory of your website. The generator also creates a code snippet to link all favicon variants in your header.

Note: The link to your previously created SVG favicon should come first, and then the fallback favicons from the generator. The favicon.ico shouldn’t be referenced.

How Safari Handles Favicons

Safari takes a different way in handling favicons in dark and light mode. SVG-Icons are unfortunately not supported, therefore it’s not possible to change the color through the CSS media query when visitors use dark mode. Safari solves the dark mode difficulty by automatically adding a white or black background if there is a low-contrast favicon.

Example WordPress: How to Add Dark Mode / Light Mode Favicon

Use a wordpress plugin: svg-favicon.

It is possible to add the SVG-Favicon through a plugin called SVG-Favicon if you don’t know how to edit your child theme. You still have to update your SVG graphic as described previously and then upload it to your WordPress website through the plugin.

Add SVG-Favicon to Your Child Theme Manually

• Add all favicon variants to your root directory via FTP: In my case those are the favicons from the generator
• Update your functions.php To link all your favicon variants open your functions.php of your child theme and add the following function function add_favicon() { // dynamic light mode/dark mode svg favicon echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml" >'; // as icon on the iPhone homescreen echo '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" >'; // link icons for Android devices echo '<link rel="manifest" href="/site.webmanifest">'; // fallback png icon echo '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" >'; echo '<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" >'; // style of windows tiles echo '<meta name="msapplication-TileColor" content="#da532c" >'; // set color of url bar echo '<meta name="theme-color" content="#ffffff" >'; // second fallback favicon.ico located in root directory, but not linked here } add_action('wp_head', 'add_favicon');
• Final Step: Remove your current favicon from WordPress: If you have already linked your favicon in WordPress you have to delete it so it does not overwrite the ones we just added. To do so go to Appearance → Customize → Site Identity (left column) → Site Icon, and click “Remove”

Different Favicon for Admin Dashboard and Login Screen

In WordPress, the html header for the admin dashboard and login is different from the html header which will be sent to your website visitors. This means the fallback favicon in your root directory will be displayed when you login to your website or are in the admin dashboard.

For me, that’s more of a feature than a bug. My fallback favicon is one with an additional white background. Whenever I have two tabs up, one for the admin dashboard and one for the actual website visitors see, I can automatically distinguish those two.

You can add the following two lines to your functions.php to display a different (or the same) favicon on your login and admin dashboard:

Happy coding in dark mode! ✌️

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!

There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:

Perhaps the most noticeable thing there in Safari 15 on iOS is URL bar at the bottom ! Dave was speculating in our little Discord watch party that this probably fixes the weird issues with 100vh stuff on iOS. But I really just don’t know, we’ll have to see when it comes out and we can play with it. I’d guess the expectation is that, in order for us to do our own fixed-bottom-UI stuff, we’d be doing:

On desktop, the most noticeable visual feature is probably the theme-color meta tags.

This isn’t even a brand new Apple-only thing. This is the same <meta> tag that Chrome’s Android app has used since 2014 , so you might already be sporting it on your own site. The addition is that it supports media queries.

It’s great to see Safari get aspect-ratio and the new fancy color systems like lab() and lch() as well. Top-level await in JavaScript is great as it makes patterns like conditional imports easier.

I don’t think all this would satisfy Alex . We didn’t exactly get alternative browser engines on iOS or significant PWA enhancements (both of which would be really great to see). But I applaud it all—it’s good stuff. While I do think Google generally takes privacy more seriously than what general internet chatter would have to believe, it’s notable to compare each company’s newly-released features. If you’ll forgive a bit of cherry-picking, Google is working on FLoC , a technology very specifically designed to help targeted advertising. Apple is working on Private Relay , a technology very specifically to making web browsing untrackable.

I’ve been using the iOS 15 beta for a few days, and I’ve liked how Safari handles the viewport height for the most part. While the URL bar is in its normal state, the viewport extends to the bottom of the screen (and going past the safe area on devices with a notch). The viewport shrinks down to right above the URL bar when it becomes hidden.

This video might explain it better than I can.

Last Christmas, my wife got me a new Android phone with 6” display. On it, Android 11 featured Chrome serach bar at the bottom. Firefox for Android also has search bar at the bottom by default (although this can be changed).

I suspect it has something to do with larger screen sizes and top part of the screen not being as acessible on handheld devices (espacially when using single-hand).

If I were to do design prediction, I would say we should see even more movement from headers toward rich footers in the future.

Yeh, I feel another pattern Apple are using is the card from the bottom, which improves the thumb reach area.

The URL bar at the bottom really bugs me. It seems that Apple believes that Safari is the primary app in itself, not a gateway to other experiences on the web.

I see no reason to have the most accessible part of the screen reserved for interacting with the URL bar instead of it being available to websites, to make them easier to use.

Though the notch on their latest models already killed more than 44 CSS pixels of the bottom for interactive use, the new URL bar now demands twice that and does it always, not just until the user has scrolled down the page.

Am I the only one who thinks this actually makes the 100vh issues way more complicated? Ugh.

This is a big change too:

https://twitter.com/kevgski/status/1403754664160632835?s=12

This url bar on mobile is absolutely bad. What this means? You have to fix all old project for one browser! Stupid

There are quite a few bugs. For example, interfaces where you have fixed cards or absolute cards will cause the env() of the tab bar to inexplicably double. -> https://codepen.io/paul3fa/pen/gOmBxxY try this on your phone in debug mode, ios15

Has there been more research on how to handle the new address bar?

I just had to fix this in one of my current project. It seems that using bottom: env(safe-area-inset-bottom) worked out of the box for me, without the need for calc .

How do I get it to apply on Bottom address bar on Safari 15?

It should be default! But if not, 9to5Mac breaks down the steps which you can do with the Safari app open:

• In the address/search bar, tap the “aA” icon on the left (when on a website)
• Tap “Show Bottom Tab Bar”

Alternatively, you can also change the iOS 15 address/search bar by heading to the Settings app > Safari > swipe down and choose “Tab Bar.”

Hope this helps!

how can i disable the divider/border between the adressebar and the website? The divider/border appears only on iOS Safari. A few websites e.g. t3n.de does`t have it.

Best, Florian

Safari 15 still has issues with 3d transform e.g: transform: rotate3d(1, 0, 0, -60deg); Or -webkit-transform: rotate3d(1, 0, 0, -60deg)

it just not renders while any other browser can.

Also still issues with html5 video tags. Somehow IOS restrictions are applied for desktop too :”HTTP servers hosting media files for iOS must support byte-range requests”

Safari is becoming the IE of browsers …

• PC & Mobile

How To Enable Dark Mode on Safari

Evan Gower With over a decade of experience in digital publishing. Evan leads our team with a keen eye for emerging tech trends. Read more September 15, 2022

Device Links

• Device Missing?

If you spend a lot of time on your iPhone or Mac computer reading articles on the web, chances are that your eyes will hurt after sitting in front of the screen for several hours. Bright light and small font lead to eye strain, headaches, and decreased focus.

Windows users have had the Dark Mode for a long time, and now it’s finally available for Safari users on iOS devices. You can get an extension for your Safari browser and read articles all night. Read on and learn how to activate Dark Mode on your iOS device.

Safari’s Native Dark Mode Function

Safari (even older versions) already has a built-in dark mode feature. This function won’t work for every website because it’s meant to help ease the strain on your eyes while reading.

Users who are running a newer version of macOS can follow these steps:

If you don’t have the option to use Dark Mode, you can use ‘Reader View’ within Safari. Here’s how you can use the Reader View to darken your screen:

If you don’t see the Reader tab, you can find it by clicking View and selecting Show Reader .

Of course, this won’t work for every web page. It will work for any blogs or articles you’re trying to read, so we have a few more options listed below.

Night Eye for Safari

This extension is another download available in the App Store for Safari’s lack of dark mode options.

Although this app is free to download, it will cost you $39.99 per year to use it. The free option, ‘NightEye Lite,’ will limit you to five websites. This is perfect for someone looking to activate only a handful of pages. The extension offers full image support and the ability to use the features on multiple platforms.

Download Night Eye for Safari

Visit your Mac’s App Store and download the extension.

Activate the Extension

Tap on the Night Eye extension and choose the dark mode option. If there’s a website, you’d like to view without dark mode, simply tap the extension again and choose “Normal.”

With great reviews and the 24/7 support team, this is definitely an add-on worth looking into.

Nightlight for Safari

Another great option available for Safari is the Nightlight browser extension . The extension is free and available for those using macOS 10.13 or later. This is an Excellent, lightweight addition to your browser.

With the optional timer settings, you can enjoy dark mode on Safari without ever having to toggle it on and off. The nightlight will automatically shift the color patterns when at night, then back again during the day.

Using Dark Mode in Safari on iPad and iPhone

On the iPad and iPhone, Safari comes with a built-in reader mode designed to ease the pressure on your eyes during night reading. Here is how to activate it.

Repeat the process for every website you want to read in dark mode.

Dark Mode on macOS Mojave & Catalina

Most Mac users had to wait for the macOS Mojave update to be able to activate the dark mode on their computers. Previous versions had to use shortcuts, and you had to make exceptions for every site you wanted to view in dark mode. So, if you have Mojave installed on your Mac, follow these steps to set the dark mode up.

• Select “Dark” in the “Appearance” options, and all websites on your Safari will switch to a black background.

Dark Mode and Other Apps

You can use the Dark Mode for other apps, not just your Safari browser. If dark mode is enabled, some apps will automatically have it activated. Here is a short how-to on toggling it on and off for the most popular apps on iOS.

Maps – If you want to use a dark background for maps with the Dark Mode activated, open the app and select “View,” and then select “Use Dark Map.”

Mail – If you want to use light mode when reading your emails, open your Mail and select “Mail,” then “Preferences.” Click on the “Viewing” tab and uncheck “Use dark backgrounds for messages.”

Notes – Your Notes will open with a black background if the Dark Mode is activated. You can disable it by selecting “Preferences” and then deselecting “Use dark backgrounds for note content.”

TextEdit – You can switch to the Dark Mode when working in TextEdit by selecting “View,” then “Use Dark Background for Windows.”

Safari – With the Dark Mode turned on; all websites will show as dark when you load them. If some website doesn’t support Dark Mode, you can use Safari Reader.

Frequently Asked Questions

Here are the answers to more of your questions about Apple Dark Mode.

Can I use Dark Mode with Chrome on a Mac?

Yes, but unfortunately, it isn’t an option provided natively. This means you’ll need to use a Chrome browser extension like the ones we’ve mentioned above. If you follow the steps above to activate Dark Mode on your Mac, it will have no effect on third-party apps and browsers such as Firefox or Chrome.

Can I enable Dark Mode with Mozilla Firefox on my Mac?

Fortunately, yes! Firefox makes many things simpler than other web browsers, and Dark Mode is one of them. Enabling Dark Mode on Firefox is the same on a Mac or a PC. All you need to do is click on the three horizontal lines in the upper right-hand corner of the browser. Then, click ‘Add Ons.’ From here, you’ll see a Themes option on the left; click it, then click on one of the options in the list that gives you Dark Mode.

There are several different color variations, so choose one that you like. Now, the Firefox system will show in Dark Mode, but not all of your websites will, so you may need to enable Night Eye for Mozilla or another add-on.

Ease the Strain on Your Eyes

Reading texts all night long can cause migraines, sore eyes, and unpleasant muscle strain; switching to Dark Mode is a great option. Your eyes will be grateful, and you will be able to focus for longer periods. Who doesn’t want to increase productivity while keeping themselves healthy?

Related Posts

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Parth Shah February 29, 2024

Lee Stanton February 23, 2024

Lee Stanton February 19, 2024

Send To Someone

Missing device.

Please enable JavaScript to submit this form.

• Henry Bley-Vroman
• Mar 25, 2024

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript

• CSS , JavaScript , Techniques , Design
• Share on Twitter ,  LinkedIn

About The Author

Henry is an experienced dev team leader and front-end developer. He creates tools to improve other builders’ daily experience, teaches and mentors, advocates … More about Henry ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Many modern websites give users the power to set a site-specific color scheme preference. A basic implementation is straightforward with JavaScript: listen for when a user changes a checkbox or clicks a button, toggle a class (or attribute) on the <body> element in response, and write the styles for that class to override design with a different color scheme.

CSS’s new :has() pseudo-class , supported by major browsers since December 2023, opens many doors for front-end developers. I’m especially excited about leveraging it to modify UI in response to user interaction without JavaScript . Where previously we have used JavaScript to toggle classes or attributes (or to set styles directly), we can now pair :has() selectors with HTML’s native interactive elements.

Supporting a color scheme preference, like “Dark Mode,” is a great use case. We can use a <select> element anywhere that toggles color schemes based on the selected <option> — no JavaScript needed, save for a sprinkle to save the user’s choice, which we’ll get to further in.

Respecting System Preferences

First, we’ll support a user’s system-wide color scheme preferences by adopting a “Light Mode”-first approach. In other words, we start with a light color scheme by default and swap it out for a dark color scheme for users who prefer it.

The prefers-color-scheme media feature detects the user’s system preference. Wrap “dark” styles in a prefers-color-scheme: dark media query.

Next, set the color-scheme property to match the preferred color scheme. Setting color-scheme: dark switches the browser into its built-in dark mode, which includes a black default background, white default text, “dark” styles for scrollbars, and other elements that are difficult to target with CSS, and more. I’m using CSS variables to hint that the value is dynamic — and because I like the browser developer tools experience — but plain color-scheme: light and color-scheme: dark would work fine.

Giving Users Control

Now, to support overriding the system preference, let users choose between light (default) and dark color schemes at the page level.

HTML has native elements for handling user interactions. Using one of those controls, rather than, say, a <div> nest, improves the chances that assistive tech users will have a good experience. I’ll use a <select> menu with options for “system,” “light,” and “dark.” A group of <input type="radio"> would work, too, if you wanted the options right on the surface instead of a dropdown menu.

Before CSS gained :has() , responding to the user’s selected <option> required JavaScript, for example, setting an event listener on the <select> to toggle a class or attribute on <html> or <body> .

But now that we have :has() , we can now do this with CSS alone! You’ll save spending any of your performance budget on a dark mode script, plus the control will work even for users who have disabled JavaScript. And any “no-JS” folks on the project will be satisfied.

What we need is a selector that applies to the page when it :has() a select menu with a particular [value]:checked . Let’s translate that into CSS:

We’re defaulting to a light color scheme, so it’s enough to account for two possible dark color scheme scenarios:

• The page-level color preference is “system,” and the system-level preference is “dark.”
• The page-level color preference is “dark”.

The first one is a page-preference-aware iteration of our prefers-color-scheme: dark case. A “dark” system-level preference is no longer enough to warrant dark styles; we need a “dark” system-level preference and a “follow the system-level preference” at the page-level preference. We’ll wrap the prefers-color-scheme media query dark scheme styles with the :has() selector we just wrote:

Notice that I’m using CSS Nesting in that last snippet. Baseline 2023 has it pegged as “Newly available across major browsers” which means support is good, but at the time of writing, support on Android browsers not included in Baseline’s core browser set is limited . You can get the same result without nesting.

For the second dark mode scenario, we’ll use nearly the exact same :has() selector as we did for the first scenario, this time checking whether the “dark” option — rather than the “system” option — is selected:

Now the page’s styles respond to both changes in users’ system settings and user interaction with the page’s color preference UI — all with CSS!

But the colors change instantly . Let’s smooth the transition.

Respecting Motion Preferences

Instantaneous style changes can feel inelegant in some cases, and this is one of them. So, let’s apply a CSS transition on the :root to “ease” the switch between color schemes. (Transition styles at the :root will cascade down to the rest of the page, which may necessitate adding transition: none or other transition overrides.)

Note that the CSS color-scheme property does not support transitions.

Not all users will consider the addition of a transition a welcome improvement. Querying the prefers-reduced-motion media feature allows us to account for a user’s motion preferences. If the value is set to reduce , then we remove the transition-duration to eliminate unwanted motion.

Transitions can also produce poor user experiences on devices that render changes slowly, for example, ones with e-ink screens. We can extend our “no motion condition” media query to account for that with the update media feature. If its value is slow , then we remove the transition-duration .

Let’s try out what we have so far in the following demo. Notice that, to work around color-scheme ’s lack of transition support, I’ve explicitly styled the properties that should transition during theme changes.

See the Pen [CSS-only theme switcher (requires :has()) [forked]](https://codepen.io/smashingmag/pen/YzMVQja) by Henry .

Not bad! But what happens if the user refreshes the pages or navigates to another page? The reload effectively wipes out the user’s form selection, forcing the user to re-make the selection. That may be acceptable in some contexts, but it’s likely to go against user expectations. Let’s bring in JavaScript for a touch of progressive enhancement in the form of…

Persistence

Here’s a vanilla JavaScript implementation. It’s a naive starting point — the functions and variables aren’t encapsulated but are instead properties on window . You’ll want to adapt this in a way that fits your site’s conventions, framework, library, and so on.

When the user changes the color scheme from the <select> menu, we’ll store the selected <option> value in a new localStorage item called "preferredColorScheme" . On subsequent page loads, we’ll check localStorage for the "preferredColorScheme" item. If it exists, and if its value corresponds to one of the form control options, we restore the user’s preference by programmatically updating the menu selection.

Let’s try that out. Open this demo (perhaps in a new window), use the menu to change the color scheme, and then refresh the page to see your preference persist:

See the Pen [CSS-only theme switcher (requires :has()) with JS persistence [forked]](https://codepen.io/smashingmag/pen/GRLmEXX) by Henry .

If your system color scheme preference is “light” and you set the demo’s color scheme to “dark,” you may get the light mode styles for a moment immediately after reloading the page before the dark mode styles kick in. That’s because CodePen loads its own JavaScript before the demo’s scripts. That is out of my control, but you can take care to improve this persistence on your projects.

Persistence Performance Considerations

Where things can get tricky is restoring the user’s preference immediately after the page loads. If the color scheme preference in localStorage is different from the user’s system-level color scheme preference, it’s possible the user will see the system preference color scheme before the page-level preference is restored. (Users who have selected the “System” option will never get that flash; neither will those whose system settings match their selected option in the form control.)

If your implementation is showing a “flash of inaccurate color theme” , where is the problem happening? Generally speaking, the earlier the scripts appear on the page, the lower the risk. The “best option” for you will depend on your specific stack, of course.

What About Browsers That Don’t Support :has() ?

All major browsers support :has() today Lean into modern platforms if you can. But if you do need to consider legacy browsers, like Internet Explorer, there are two directions you can go: either hide or remove the color scheme picker for those browsers or make heavier use of JavaScript.

If you consider color scheme support itself a progressive enhancement, you can entirely hide the selection UI in browsers that don’t support :has() :

Otherwise, you’ll need to rely on a JavaScript solution not only for persistence but for the core functionality. Go back to that traditional event listener toggling a class or attribute.

The CSS-Tricks “ Complete Guide to Dark Mode ” details several alternative approaches that you might consider as well when working on the legacy side of things.

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Minimalist Dark Mode Solution – NocturneShift.js

Description:

NocturneShift is an ultra-light (~1.6kb uncompressed) JS library that implements Dark Mode on your web app with just one HTML element and a single line of JavaScript.

That’s right, no more complex setups or messing around with cookies. The library uses sessionStorage, which is faster and more secure, to store user preferences for Dark Mode during their browsing session.

NocturneShift instantly casts the entire webpage into Dark Mode by applying an invert(1) filter. This transition is not just for the background and text colors but extends to images and icons as well, thanks to predefined classes that maintain the integrity and aesthetic of your website.

How to use it:

1. Download and import the NocturneShift.js script into your document.

2. Create a toggle element to switch between Dark Mode and Light Mode on your page. That’s it.

You Might Be Interested In:

Leave a reply cancel reply.