Skip to content

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

@KhanjarSingh

Description

@KhanjarSingh

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!

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