#511·theatre

Add theme toggle (light/dark mode switch) to the Theatre.js website

Author: KhanjarSinghCreated Nov 5, 2025Updated Nov 5, 2025

Feature Request

Is your feature request related to a problem? Please describe.
The current Theatre.js website only has a single default theme (dark).
While it looks great, it lacks a light mode option, which can affect readability or user comfort depending on ambient lighting and personal preference.


Describe the solution you'd like
Add a theme toggle button ( / ) that allows switching between light and dark modes.

  • Place the toggle in the top-right corner of the navigation bar.
  • Save user preference using localStorage so the theme persists on reload.
  • Default can remain dark mode for brand consistency.
  • Light mode would improve accessibility and offer a modern, polished feel.

Describe alternatives you've considered

  • Using the system preference via prefers-color-scheme.
    However, providing a visible toggle gives users direct control and better UX.

Teachability, Documentation, Adoption, Migration Strategy
This is a non-breaking enhancement for the documentation/landing site.
It can be implemented by toggling a CSS class or using CSS variables.
If the site uses Docusaurus, Next.js, or a similar framework, an existing light/dark theme switcher component can be integrated easily.


Additional context
Many major documentation sites (e.g., React, TailwindCSS, Vite) already offer light/dark theme toggles.
This addition would make the Theatre.js site more user-friendly and visually versatile.

I’d love to work on this enhancement and open a PR if approved!