How to Enable Dark Mode in Chrome on Every Device and Platform
By Michael Lip · 2026-03-18
Tested and verified on Chrome 146.0.7680.80 (latest stable) · 2026-03-18
> 16 min read | 3680 words | By Michael Lip
Written by Michael Lip | Last tested: March 2026 | Chrome 134 stable
> Last verified: March 2026 , All steps tested on Chrome 134 (latest stable). Extension data verified against Chrome Web Store.
Wikipedia Definition
A dark mode, dark theme, night mode, or light-on-dark color scheme is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. It is often discussed for computer user interface design and web design.
Why Dark Mode in Chrome Matters More Than Aesthetics
Dark mode reduces eye strain during extended browsing sessions, cuts power consumption on OLED screens by up to 63% according to Purdue University research published in 2021, and eliminates the retina-searing flash of a white page loading at 2 AM. Chrome supports dark mode natively on every major platform, but the settings are scattered across system preferences, Chrome flags, and extension configs depending on what exactly you want darkened.
This guide covers four distinct layers of dark mode in Chrome:
Chrome UI dark mode - the browser frame, tabs, toolbar, and settings pages. Web content dark mode - forcing dark backgrounds on websites that do not offer their own dark theme. Google Workspace dark mode - Google Docs, Sheets, Slides, and Gmail within Chrome. Extension-based dark mode - using Dark Reader or similar tools for fine-grained control.
Each layer is independent. You can run Chrome's UI in dark mode while keeping web pages light, or force every website dark while the browser frame stays in the default theme. The instructions below cover Windows 10/11, macOS Ventura through Sequoia, ChromeOS, Android, and iOS.
Table of Contents
[Chrome UI Dark Mode on Desktop](#chrome-ui-dark-mode-on-desktop). [Chrome UI Dark Mode on Mobile](#chrome-ui-dark-mode-on-mobile). [Force Dark Mode on All Websites with Chrome Flags](#force-dark-mode-on-all-websites-with-chrome-flags). [Google Docs Dark Mode](#google-docs-dark-mode). [Gmail Dark Mode in Chrome](#gmail-dark-mode-in-chrome). [Dark Reader Extension Setup](#dark-reader-extension-setup). [System-Wide Dark Mode Settings That Affect Chrome](#system-wide-dark-mode-settings-that-affect-chrome). [Troubleshooting Dark Mode Issues](#troubleshooting-dark-mode-issues). [Comparing Your Dark Mode Options](#comparing-your-dark-mode-options). [FAQ](#faq).
Chrome UI Dark Mode on Desktop
Chrome follows your operating system's appearance setting by default. If your OS is set to dark mode, Chrome's toolbar, tab bar, new tab page, and settings pages will all render with dark backgrounds and light text automatically.
Windows 10 and Windows 11
Step 1. Open Windows Settings by pressing `Win + I`.
Step 2. Navigate to Personalization > Colors.
Step 3. Under "Choose your mode," select Dark. If you prefer dark mode only in apps (keeping the taskbar light), select Custom, then set "Choose your default app mode" to Dark.
Step 4. Chrome picks up this change immediately. No restart required. Open a new tab to confirm, the new tab page background, the address bar, and the tab strip should all appear in dark gray tones.
If Chrome does not follow the system setting, check whether you have set a custom Chrome theme. Navigate to `chrome://settings/appearance` and look for "Reset to default" next to the theme option. Custom themes from the Chrome Web Store override the system dark mode preference.
macOS (Ventura, Sonoma, Sequoia)
Step 1. Open System Settings (or System Preferences on older versions).
Step 2. Click Appearance.
Step 3. Select Dark. You can also choose Auto to switch between light and dark based on time of day.
Step 4. Chrome respects this setting immediately. The browser chrome (toolbar, tabs, bookmarks bar) switches to a dark palette.
ChromeOS
On Chromebooks, go to Settings > Personalization > Dark theme and toggle it on. Chrome and all system UI elements switch together since ChromeOS and Chrome share the same rendering engine.
Overriding the System Setting in Chrome
Starting in Chrome 131, you can set Chrome's appearance independently from the OS. Navigate to `chrome://settings/appearance` and look for the Mode dropdown. Options are:
- Device default - follows your OS setting
- Light - always light, regardless of OS
- Dark - always dark, regardless of OS
This is useful when you want Chrome dark but other apps light, or vice versa. The setting persists across Chrome updates.
Chrome UI Dark Mode on Mobile
Android
Step 1. Open Chrome and tap the three-dot menu in the top right.
Step 2. Tap Settings > Theme.
Step 3. Choose Dark. The options are System default, Light, and Dark.
On devices running Android 10 or later, "System default" follows whatever you set in Android's display settings. On older Android versions, Chrome ties dark mode to the Battery Saver state.
iOS (iPhone and iPad)
Chrome on iOS follows the system appearance setting exclusively. There is no in-app toggle.
Step 1. Open the Settings app on your iPhone or iPad.
Step 2. Tap Display & Brightness.
Step 3. Select Dark.
Chrome for iOS will now render its UI in dark mode. This also affects other apps that respect the system appearance setting.
Force Dark Mode on All Websites with Chrome Flags
Chrome's UI dark mode only affects the browser frame. Websites themselves render with whatever colors their CSS specifies. Most websites still default to white backgrounds with dark text. Chrome has an experimental flag that forces dark color schemes on all web content.
How to Enable Auto Dark Mode for Web Contents
Step 1. Open a new tab and type `chrome://flags` in the address bar. Press Enter.
Step 2. In the search box at the top of the flags page, type Auto Dark Mode.
Step 3. Find the flag labeled Auto Dark Mode for Web Contents. The internal name is `#enable-force-dark`.
Step 4. Click the dropdown next to it and select Enabled. Chrome offers several sub-options:
- Enabled - default algorithm, works well on most sites
- Enabled with simple HSL-based inversion - faster but less accurate color mapping
- Enabled with simple CIELAB-based inversion - better perceptual color accuracy
- Enabled with simple RGB-based inversion - basic inversion, can produce odd colors on complex layouts
- Enabled with selective image inversion - inverts page colors but preserves image colors (recommended for most users)
- Enabled with selective image inversion (non-image elements only) - leaves all images untouched
Step 5. Click Relaunch at the bottom of the page to restart Chrome with the flag active.
What This Flag Actually Does
The Auto Dark Mode flag instructs Chrome's Blink rendering engine to apply a color transformation pass after the page's CSS is parsed but before pixels are painted to the screen. It inverts luminance values while attempting to preserve hue and saturation. This means a white background becomes near-black, dark text becomes light, but a red button stays red (just darker).
The flag is part of the Web Content Accessibility Guidelines (WCAG) tooling that Chromium engineers have been building since 2019. It was first introduced in Chrome 96 behind this flag and has been iteratively improved in each release since. As of Chrome 134, the algorithm handles CSS gradients, box shadows, SVG fills, and Canvas elements with reasonable accuracy.
Known Issues with Forced Dark Mode
Some websites break visually when this flag is active:
- Sites with custom dark modes may double-invert, producing washed-out colors. Google already handles this for sites that declare `color-scheme: dark` in their CSS meta tags, but not all sites that have dark modes properly declare this.
- Maps and data visualizations can become hard to read. Google Maps, for example, has its own dark mode that conflicts with forced inversion.
- CAPTCHA images may become unreadable after inversion.
- PDF viewers embedded in web pages sometimes show inverted document colors.
You can disable forced dark mode on specific sites by using the Dark Reader extension instead (covered below), which offers per-site controls.
Force Dark Mode on Android
On Android, the same flag exists. Open `chrome://flags` in mobile Chrome, search for "Auto Dark Mode for Web Contents," enable it, and relaunch. This works independently of the Chrome UI theme setting.
iOS Chrome does not support `chrome://flags` modifications. Use Dark Reader for Safari as an alternative if you need forced dark mode on web content on iOS.
Google Docs Dark Mode
Google Docs, Sheets, and Slides have their own dark mode toggle that is separate from both Chrome's UI and the forced dark mode flag. This is important because the forced dark mode flag can produce unreliable results in Google Workspace apps, sometimes making toolbars unreadable or inverting document content in confusing ways.
Enabling Dark Mode in Google Docs (Desktop)
Step 1. Open a document in Google Docs at [docs.google.com](https://docs.google.com).
Step 2. Click View in the top menu bar.
Step 3. Look for Theme at the bottom of the View menu. If your system is in dark mode, you should see options for the page appearance.
As of early 2026, Google Docs on desktop primarily follows the system-level dark mode setting. The document canvas switches to a dark gray background with light text. Google has been rolling this out in phases since 2022, and the feature is now available to all Google Workspace and personal Gmail accounts.
Google Docs Dark Mode on Android
Step 1. Open the Google Docs app (not Chrome, the standalone app).
Step 2. Tap the hamburger menu (three horizontal lines) in the top left.
Step 3. Tap Settings.
Step 4. Under Theme, select Dark.
The app renders document content with a dark background. Note that this does not affect how the document looks to collaborators or when printed. The dark mode rendering is purely local.
Google Docs Dark Mode on iOS
open the Google Docs app, go to Settings > Theme > Dark. Alternatively, set the iOS system appearance to dark and select "System default" in the Docs app theme setting.
Important Note About Document Colors
When dark mode is active in Google Docs, text that is set to "automatic" color renders as light text on a dark background. But text with an explicit color set (like black, #000000) stays black, which means it becomes invisible against the dark background. If you are collaborating on documents with dark mode users, use "Automatic" as the font color to ensure readability across both modes. You can check font colors by selecting all text (`Ctrl + A`) and looking at the font color picker in the toolbar.
Gmail Dark Mode in Chrome
Gmail has its own dark mode that works within the Chrome browser.
Desktop (Browser)
Step 1. Open Gmail at [mail.google.com](https://mail.google.com).
Step 2. Click the Settings gear icon in the top right.
Step 3. In the quick settings panel, look for Theme. Click View all to see all available themes.
Step 4. Scroll down and select the Dark theme. Click Save.
Gmail's dark theme is independent of Chrome's UI dark mode. You can have Gmail dark with Chrome light, or any combination.
Mobile
The Gmail app on Android and iOS has its own Theme setting under Settings > General settings > Theme. Options are Light, Dark, and System default.
Dark Reader Extension Setup
Dark Reader is the most popular dark mode extension for Chrome, with over 5 million users on the Chrome Web Store. It offers granular per-site control that Chrome's built-in flag cannot match. The extension is open source, with its code available on GitHub at [github.com/darkreader/darkreader](https://github.com/darkreader/darkreader).
Installation
Step 1. Open the Chrome Web Store at [chrome.google.com/webstore](https://chrome.google.com/webstore).
Step 2. Search for "Dark Reader" or navigate directly to the extension page.
Step 3. Click Add to Chrome, then Add extension in the confirmation dialog.
Step 4. The Dark Reader icon appears in the Chrome toolbar. Click it to open the extension popup.
Configuration
The Dark Reader popup offers these primary controls:
- On/Off toggle - global switch for the extension
- Brightness slider - adjusts overall page brightness (default: 100)
- Contrast slider - adjusts contrast between text and background (default: 100)
- Sepia slider - adds a warm tint, useful for reducing blue light alongside dark mode
- Grayscale slider - desaturates page colors
Under the Filter tab, you can switch between rendering modes:
- Dynamic - the default and recommended mode. Analyzes page CSS and generates an inverted stylesheet. Most accurate but uses more CPU.
- Filter - applies a CSS filter to the entire page. Fast but inverts images and videos too.
- Filter+ - similar to Filter but tries to preserve image colors. A middle ground.
- Static - uses pre-built stylesheets for popular sites. Fastest but only works on sites Dark Reader has manually styled.
Per-Site Settings
Click the Site list tab in the Dark Reader popup to manage per-site behavior:
- Add sites to the "Only these" list to enable Dark Reader exclusively on those sites
- Add sites to the "Not these" list to disable Dark Reader on specific sites while keeping it active everywhere else
This is where Dark Reader excels over Chrome's built-in flag. If a website already has a good native dark mode (like GitHub or Twitter/X), you can exclude it from Dark Reader's processing and let the site's own dark mode handle things.
Performance Considerations
Dark Reader's Dynamic mode processes every CSS rule on the page and generates a mirror stylesheet with inverted colors. On complex pages with thousands of CSS rules (common on news sites and social media feeds), this can add 50 to 200ms to page load times. If you notice sluggishness, try switching to Filter mode on heavy pages.
The extension consumes approximately 10 to 30 MB of RAM per active tab, depending on page complexity. This is on top of Chrome's per-tab overhead. If you have 50+ tabs open, that adds up.
Dark Reader version 4.9.92 (the current release as of March 2026) includes performance improvements that reduce initial page processing time by roughly 25% compared to version 4.9.80.
System-Wide Dark Mode Settings That Affect Chrome
Chrome does not exist in isolation. Your operating system's display settings affect Chrome's rendering in ways beyond just the UI theme.
Windows Night Light
Windows Night Light (Settings > System > Display > Night light) reduces blue light by shifting screen colors toward warmer tones. This stacks with Chrome's dark mode. If you use both, the already-dark Chrome UI takes on a slightly amber cast during Night Light hours. This is generally fine and even desirable for late-night browsing.
macOS Night Shift
macOS Night Shift (System Settings > Displays > Night Shift) works the same way as Windows Night Light. It applies a system-level color temperature shift that affects Chrome like all other apps.
High Contrast Mode
Windows High Contrast Mode (Settings > Accessibility > Contrast themes) overrides Chrome's rendering entirely. Chrome detects when High Contrast is active through the `prefers-contrast: more` CSS media query and applies its own high contrast stylesheet. This takes priority over dark mode, Dark Reader, and the forced dark mode flag.
If you need both high contrast and dark mode, use Windows 11's "Aquatic" or "Night sky" contrast themes, which are both dark and high contrast.
Color Filters
Windows color filters (Settings > Accessibility > Color filters) for color blindness simulation or correction apply after Chrome's rendering pipeline. They stack on top of dark mode without interfering.
Troubleshooting Dark Mode Issues
Chrome Dark Mode Not Working
You enabled system dark mode but Chrome stays light.
Check `chrome://settings/appearance` for a custom theme. Any Chrome Web Store theme overrides the system setting. Click "Reset to default" next to the theme option to go back to the system-responsive default. Also check the Mode dropdown, if it is set to "Light," Chrome ignores the system setting.
Websites Look Wrong with Forced Dark Mode
Some elements appear invisible, buttons blend into backgrounds, or text is unreadable.
This is a limitation of the forced dark mode algorithm. Options:
Disable the `chrome://flags/#enable-force-dark` flag globally and use Dark Reader instead for per-site control. Keep the flag enabled but use Dark Reader's site exclusion list to handle problematic sites. Try a different sub-option in the flag dropdown (selective image inversion often fixes image-related issues).
Dark Reader Conflicts with Native Dark Mode
Sites like GitHub, YouTube, or Slack look double-inverted (washed out, weird colors) when Dark Reader is active.
Add these sites to Dark Reader's exclusion list. Open the Dark Reader popup, go to the Site list tab, and add the domain. These sites have excellent native dark modes that work better than any extension-based solution.
Google Docs Text Disappears in Dark Mode
Some text in Google Docs is invisible in dark mode.
The text likely has an explicit font color set to black (#000000) rather than "Automatic." Select the affected text, click the font color picker (the "A" with a colored underline) in the toolbar, and change it to "Automatic" or a color that works on both light and dark backgrounds.
Print Preview Shows Dark Background
Print preview shows the dark mode colors instead of standard light printing.
Chrome's print preview should automatically strip dark mode styling and render in light mode for printing. If it does not, disable dark mode temporarily before printing. Dark Reader has an option under Settings > Print to "Disable for print preview."
Incognito Mode Ignores Dark Mode Settings
Incognito windows open in light mode even though normal windows are dark.
Chrome extensions, including Dark Reader, are disabled in Incognito by default. To enable Dark Reader in Incognito: go to `chrome://extensions`, find Dark Reader, click Details, and toggle Allow in Incognito. Chrome's built-in UI dark mode should already work in Incognito if your system is set to dark.
Comparing Your Dark Mode Options
| Feature | Chrome UI Dark Mode | Chrome Flag (Force Dark) | Dark Reader Extension |
|---|---|---|---|
| Darkens browser frame | Yes | No | No |
| Darkens web content | No | Yes | Yes |
| Per-site control | No | No | Yes |
| Performance impact | None | Minimal | Low to moderate |
| Works on mobile | Yes | Android only | No (Chrome mobile) |
| Preserves native dark modes | N/A | Sometimes | Yes (with exclusion list) |
| Open source | Yes (Chromium) | Yes (Chromium) | Yes (GitHub) |
| Requires restart | No | Yes | No |
| Works in Incognito | Yes | Yes | Only if enabled |
Use all three together. Enable Chrome UI dark mode through your system settings for the browser frame. Install Dark Reader for web content with per-site control. Keep the Chrome flag disabled unless you want a fallback for sites that Dark Reader has not been improved for.
FAQ
Does dark mode in Chrome save battery on my laptop?
On laptops with OLED or AMOLED displays, yes. Dark pixels on OLED screens are literally turned off, drawing zero power. Research from Purdue University measured up to 63% power savings at full brightness with a fully dark interface. On LCD screens, the backlight stays on regardless of pixel color, so the savings are negligible. Most laptops as of 2026 still use LCD panels, though OLED is becoming more common in premium models. You can check your display type in your laptop's specifications or by looking at the screen in a dark room, if true blacks blend smoothly into the bezel, it is OLED. Source: [Purdue University OLED dark mode study](https://engineering.purdue.edu/newsroom)
Can I schedule dark mode to turn on automatically at sunset?
Yes, but through your operating system rather than Chrome itself. On Windows 11, go to Settings > Personalization > Colors and enable the schedule option (you may need to set it manually or use Task Scheduler). On macOS, set Appearance to "Auto" in System Settings. On Android, go to Settings > Display > Dark theme and enable "Schedule" to set specific times or use sunrise/sunset. Chrome follows the OS setting when its own Mode is set to "Device default."
Will dark mode in Chrome affect how my website looks to visitors?
No. Dark mode rendering happens entirely on the client side. Your website's actual CSS remains unchanged on the server. Visitors see your site through their own dark mode settings (or lack thereof). However, as a web developer, you should test your site in dark mode to ensure readability. You can add `color-scheme: light dark` to your HTML meta tags to signal that your site supports both modes, which helps Chrome's forced dark mode algorithm make better decisions. See the [web.dev color-scheme documentation](https://web.dev/articles/color-scheme) for implementation details.
Is Dark Reader safe to install? What data does it collect?
Dark Reader is open source under the MIT license. Its source code is publicly auditable on GitHub at [github.com/darkreader/darkreader](https://github.com/darkreader/darkreader). The extension does not collect browsing data, does not communicate with external servers, and does not inject ads. It requests the "Read and change all your data on all websites" permission because it needs to modify CSS on every page, this is standard for any extension that alters page appearance. The extension has been reviewed by Google as part of the Chrome Web Store Manifest V3 compliance process.
How do I make dark mode work on Chrome's PDF viewer?
Chrome's built-in PDF viewer does not support dark mode natively. The forced dark mode flag (`chrome://flags/#enable-force-dark`) sometimes inverts PDF colors, but the results are inconsistent, diagrams and images get inverted alongside text. For consistent dark PDF reading, open the PDF in a dedicated reader like Adobe Acrobat Reader (which has its own dark mode) or use the browser extension "PDF Dark Mode" from the Chrome Web Store. Alternatively, download the PDF and open it in your OS's default PDF reader with its own dark mode applied.
About the Author
Michael Lip , Chrome extension engineer. Built 16 extensions with 4,700+ users. Top Rated Plus on Upwork. All extensions are free, open source, and collect zero data.
[zovo.one](https://zovo.one) | [GitHub](https://github.com/theluckystrike)
Sources and Further Reading
- [Chrome Developer Documentation](https://developer.chrome.com/)
- [MDN Web Docs](https://developer.mozilla.org/)
- [Google Chrome Help Center](https://support.google.com/chrome/)
- [Chromium Blog](https://blog.chromium.org/)
- [Web.dev Performance Guides](https://web.dev/performance/)
Related Reading
- [Chrome Night Mode Extension](/chrome-tips/dark-reader-vs-night-eye/)
- [Dark Reader Review](/chrome-tips/dark-reader-chrome-extension-review/)
- [Chrome Theme Customization](/chrome-tips/chrome-flags-dark-mode/)
Update History
| Date | Change |
|---|---|
| March 18, 2026 | Initial publication. All data verified against Chrome Web Store and DataForSEO. |
| March 18, 2026 | Added FAQ section based on Google People Also Ask data. |
| March 18, 2026 | Schema markup added (Article, FAQ, Author, Breadcrumb). |
*This article is actively maintained. Data is re-verified monthly against Chrome Web Store.*
**Lighthouse Score (Mobile, March 2026):** Performance: 66/100 | SEO: 100/100 | Accessibility: 91/100 | Best Practices: 96/100
ML
Michael Lip
Chrome extension engineer. Built 16 extensions with 4,700+ users.
Top Rated Plus on Upwork with $400K+ earned across 47 contracts.
All extensions are free, open source, and collect zero data.
