Skip to content

Add dark/light mode toggle for the documentation site #73

@MOHITKOURAV01

Description

@MOHITKOURAV01

The documentation site for Helmet.js (https://helmetjs.github.io/) currently uses a bright light theme only.
For users who prefer or work at night, or in low-light environments, a dark theme or a light/dark toggle would greatly improve readability and reduce eye strain.

Proposed Solution

  • Add support for dark mode (or a toggle between light and dark themes).
  • Use prefers-color-scheme media query to detect system preference by default.
  • Provide a toggle UI element (e.g., a switch / icon) on the site header/footer so users can manually switch.
  • Ensure documentation text, code blocks, backgrounds, links maintain contrast in both modes.
  • Optional: Save user preference in localStorage so site remembers their choice.

Why This Helps

  • Many developers use dark mode in their editors & system; having docs in dark mode aligns with their workflow.
  • Improves accessibility for users sensitive to bright backgrounds.
  • Enhances overall UX and shows attention to detail in the project.

Additional Info

  • Browser: Tested in Chrome/Firefox on Windows/macOS.
  • Site build: Uses static docs (check repo for details).
  • Happy to propose a PR (CSS + minimal JS) if this enhancement is accepted.

Checklist

  • [ ✅ ] I have read the Code of Conduct
  • [ ✅ ] I have reviewed the Contributing Guide
  • [ ✅ ] No existing issue requests this same feature (searched issues)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions