If you code at night or work late, browser eye strain is a real issue. Here's a complete setup for reducing it in Firefox — from OS-level settings to per-site dark mode.
The Problem: Bright Websites in Dark Environments
Even with your screen dimmed, a white-background website pumps light straight at you. Most developer docs, GitHub, and reference sites default to light mode regardless of your OS settings.
The solution is layered: OS dark mode at the system level, Firefox UI dark mode, and website-level dark mode.
Layer 1: OS Dark Mode
Enable dark mode in your OS. This sets the prefers-color-scheme: dark media query that sites can read.
- Linux (GNOME): Settings → Appearance → Dark
- Linux (KDE): System Settings → Global Theme → Dark
- macOS: System Preferences → General → Appearance → Dark
- Windows: Settings → Personalization → Colors → Dark
Sites that implement prefers-color-scheme will automatically switch to dark mode. Many major sites do this now: GitHub, Dev.to, MDN, VS Code docs.
Layer 2: Firefox UI Dark Theme
Even without OS dark mode, you can set Firefox's own interface to dark:
- Go to about:addons → Themes (or about:preferences → General → Language and Appearance)
- Select "Dark" theme
This affects Firefox's chrome (address bar, tabs, toolbar) but not web content.
Layer 3: about:config Override
To force prefers-color-scheme: dark regardless of OS setting:
about:config → ui.systemUsesDarkTheme = 1
This tricks websites into always seeing dark mode preference, even if your OS is in light mode. Useful if you want to keep your OS in light mode for other apps but have websites go dark.
Layer 4: Extension-Based Dark Mode for Stubborn Sites
Some sites ignore prefers-color-scheme. For those, an extension can force dark mode.
Dark Reader
Full-featured, configurable, works on virtually every site. Does JS injection to reprocess page styling. Options: grayscale, invert, filter adjustments. More powerful but heavier.
NightOwl
Simpler CSS inversion without JS injection. Less computational overhead. Good for text-heavy sites where you want minimal processing overhead.
NightOwl for Firefox — toggle with a click, works instantly via CSS.
The choice depends on how sophisticated you need the dark mode to be. For most dev docs and reference sites, CSS inversion is sufficient. For sites with complex images or graphics, Dark Reader's smarter processing handles them better.
Reader View for Long Articles
For long articles you're reading rather than scanning, Reader View is worth using:
-
F9to toggle Reader View (or click the icon in the address bar when available) - Click
Aato change the color scheme — set to Dark or Sepia - Increase font size if needed
Reader View strips away ads, navigation, and sidebars, leaving clean text. The dark mode in Reader View is independent of extensions.
Screen Brightness vs. Blue Light
Two different approaches to reducing eye strain:
Dimming (brightness): Reduce screen brightness. Reduces total light output. Most effective on OLED screens where dark areas produce no light.
Blue light filter: Reduce blue light spectrum. Relevant because blue light suppresses melatonin more than other wavelengths.
F.lux or OS night shift settings handle blue light at the system level. This works for everything on screen, not just the browser.
For night coding, the combination works best: dark mode (reduces bright whites), browser-level CSS dark, and an OS-level night shift/warm color filter.
about:config for Eye Comfort
A few more config tweaks:
// Reduce flash when loading pages (brief white flash)
browser.display.background_color = #1a1a1a
// Note: setting this may cause some pages to show dark background
// before content loads
This changes Firefox's default page background from white to dark gray — reduces the brief white flash when navigating between pages.
Tab Management at Night
When working late, you often end up with many research tabs open. At the end of a session, saving your work-in-progress tabs lets you close Firefox completely (important for sleep hygiene — closing work mentally) and pick back up the next day.
Tab Manager & Session Saver saves your current tabs as a named session. Close Firefox, then restore the exact session next morning. Better than leaving Firefox open overnight with a full tab load running.
Summary setup for night work:
- Enable OS dark mode or set
ui.systemUsesDarkTheme = 1 - Enable Firefox Dark theme
- Install NightOwl or Dark Reader for sites that don't honor dark mode
- Use OS night shift/warm color filter for system-wide blue light reduction
- Use F9 Reader View for long-form reading
- Save tab sessions before closing up for the night
Top comments (0)