Add support for a dark mode on modelviewer.dev documentation
- Dominant language
- TypeScript
- Stars
- 8.2k
- Forks
- 947
- PR merge metrics
- No merged PRs in 30d
Description
Hi! I'd like to contribute a dark mode for the documentation site (modelviewer.dev) and wanted to get feedback before opening a PR.
I think it is high time that model viewer doc gets a dark mode, as long reading on white mode hurts my eyes at least.
I have a working prototype that:
- Supports both prefers-color-scheme and a manual theme toggle.
- Persists the user's preference using localStorage.
- Adds a theme toggle button to the docs.
At the moment this is just a prototype to demonstrate the feature. I've only handled the main model-viewer logo so far; the remaining icons (check, warning, etc.) and other UI polish would be completed before submitting the PR.
Would a dark mode be a welcome addition to the documentation? Also, is the current toggle/button placement acceptable, or would you prefer a different UI or implementation approach? @diegoteran
I'd be happy to refine it based on your feedback before opening the PR.
Demo :
https://github.com/user-attachments/assets/12fba520-322f-43f2-bdf5-e39aa17db7a6
Contributor guide
Research direction
Review the prototype linked in the issue, then locate the modelviewer.dev documentation site's styling and theme entry points. Confirm how the existing prefers-color-scheme support, manual toggle, localStorage preference, remaining icons, and UI polish should be integrated; done means the documentation has a complete, approved dark-mode experience.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, documentation, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 45/100