Developer Dark Mode: Firefox DevTools, GitHub, MDN, and NightOwl Extension

When you're coding late at night, eye strain from bright browser content is a real problem. Here's a look at the dark mode options for developers who spend hours looking at documentation, GitHub, MDN, and developer tools.

The Developer's Dark Mode Problem

Developers deal with multiple bright surfaces:

1. The editor/IDE (easily handled with a dark theme)
2. Browser content — documentation sites, GitHub, Stack Overflow, issue trackers
3. Firefox DevTools itself

These three need different solutions.

Firefox DevTools Dark Theme

Firefox DevTools respects your OS dark mode setting. If you've set your OS to dark mode, DevTools automatically uses a dark theme.

To manually force DevTools dark theme:

• Settings → Themes → Dark (or manually toggle in DevTools settings ⚙️)

The dark theme applies to: Inspector, Console, Debugger, Network, Performance, Memory, and all other DevTools panels.

Browser Content Dark Mode

For web content, you have two approaches:

Option 1: prefers-color-scheme Media Query

Many documentation sites (MDN, GitHub, various developer docs) support the CSS prefers-color-scheme: dark media query. If your OS is in dark mode, Firefox passes this preference to sites that implement it.

Sites with good dark mode:

• GitHub.com ✓ (full dark mode)
• MDN Web Docs ✓
• dev.to ✓ (this site)
• VS Code docs ✓
• Many modern documentation sites ✓

Sites that don't implement prefers-color-scheme still appear bright. This is the gap that extensions fill.

Option 2: Extension-Based Dark Mode

For sites that don't implement dark mode, or for comprehensive coverage:

Dark Reader: The most popular option. Rewrites every site's CSS to apply dark colors. Works everywhere, highly configurable, but has noticeable performance overhead on complex pages.

NightOwl: Lightweight CSS-based dark mode extension. Available at https://addons.mozilla.org/en-US/firefox/addon/nightowl-dark-mode/. Lower overhead than Dark Reader — good for reading-heavy browsing (documentation, articles).

Dark Background and Light Text: Simpler inversion approach. Less processing overhead.

Which to Use

For a development workflow with a mix of browser activities:

• Dark Reader: Best for comprehensive coverage across all sites. Performance overhead is acceptable on modern hardware.
• NightOwl: Better when you mainly want dark mode for text-heavy reading (docs, articles) and care about minimal browser overhead.

Both extensions toggle off per-site easily when a site's own dark mode looks better.

GitHub Dark Mode (Without Extension)

GitHub has native dark mode:
Profile picture → Settings → Appearance → Select theme (Dark default, Dark high contrast, etc.)

You can also set it to sync with system dark mode: "Sync with system" option.

Once set in GitHub account settings, it applies regardless of which browser you use, and persists across sessions.

MDN Dark Mode

MDN (developer.mozilla.org) has a dark mode toggle (sun/moon icon in the header). Alternatively, respects OS dark mode via prefers-color-scheme.

Stack Overflow Dark Mode

Account → Settings → Preferences → Theme: Dark

Stack Overflow also respects OS dark mode if set to "System" preference.

DevTools and prefers-color-scheme Testing

A DevTools feature directly relevant to dark mode development:

In Firefox DevTools Inspector toolbar, there's a toggle to simulate prefers-color-scheme: dark and prefers-color-scheme: light. This is useful when implementing dark mode:

1. Build your dark mode CSS using @media (prefers-color-scheme: dark)
2. Toggle the simulator in DevTools to see the dark/light version instantly
3. No need to change OS dark mode settings for testing

Configuring Terminal Emulator and Editor

While not Firefox-specific, the complete developer dark mode setup includes:

• Terminal: Most modern terminals (Alacritty, kitty, GNOME Terminal) support themes. Use a dark theme that matches your editor for consistency.
• Editor: VS Code, JetBrains — both have extensive dark theme ecosystems. VS Code comes with "Dark Modern" by default.
• Firefox + extension: Handles the web content gap

With these three layers, the experience of switching between editor, terminal, and browser at 11pm is much easier on the eyes.

The color-scheme CSS Property

If you're a developer implementing dark mode:

/* Tell the browser to use dark mode for scrollbars, inputs, etc. */
:root {
  color-scheme: dark;
}

/* Or support both */
:root {
  color-scheme: light dark;
}

The color-scheme property also affects browser-native form elements (checkboxes, selects, inputs) — they'll render in dark style instead of the default light.

NightOwl and Dark Reader handle this automatically when applied to a site — but for your own projects, setting color-scheme gives native elements the right appearance without custom CSS for every form element.