Add Dark Mode to npm Documentation Site UI

[DENNIS-CODES]

Add Dark Mode to npm Documentation Site UI

Summary

Many developers prefer dark mode for better comfort and reduced eye strain during extended use. This issue proposes the addition of a dark mode feature to the npm documentation site, providing a more developer-friendly interface. This enhancement would align with current industry standards, as dark mode is now widely implemented across developer tools and documentation platforms.

Motivation

As developers, we often work late hours and prefer dark themes to minimize eye strain and avoid disrupting our circadian rhythms. With a substantial number of developers using npm regularly, adding dark mode to the npm documentation website would enhance usability and make the site more accessible.

Reasons for Implementing Dark Mode:

• Reduced Eye Strain: Dark mode reduces the intensity of light entering the eyes, which helps in long coding sessions.
• Battery Efficiency: On OLED screens, dark backgrounds consume less power, making it a more battery-friendly option.
• Aesthetic Consistency: Many developer tools and environments (e.g., VSCode, GitHub) already offer dark mode, allowing a seamless experience for developers switching between tools.

Expected Outcome

The npm documentation site should provide users with the option to switch between light and dark modes. Ideally, the dark mode would:

• Be accessible via a toggle button in the UI
• Respect user preferences by defaulting to dark mode if the user has enabled dark mode in their operating system or browser settings
• Be designed with accessibility in mind, ensuring sufficient contrast for readability

Proposed Solution

1. CSS Variables: Define a set of CSS variables (e.g., --bg-color, --text-color) that can be adjusted based on the selected theme.
2. Theme Toggle: Add a theme toggle switch in a prominent location (e.g., the top-right corner of the page).
3. Media Queries for System Preferences: Use CSS media queries (e.g., @media (prefers-color-scheme: dark)) to automatically enable dark mode based on the user’s system preference.

Example

Below is a quick mock-up to illustrate the dark mode implementation. CSS variables would adjust the color scheme across the entire documentation site:

/* Define color variables for light and dark mode */
:root {
  --bg-color-light: #ffffff;
  --text-color-light: #000000;
  --bg-color-dark: #121212;
  --text-color-dark: #e0e0e0;
}

body {
  background-color: var(--bg-color-light);
  color: var(--text-color-light);
}

body.dark-mode {
  background-color: var(--bg-color-dark);
  color: var(--text-color-dark);
}

/* Automatically detect user preference */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
  }
}