Add Dark/Light Mode Toggle in p5.js Web Editor Compiler #8276
Description
Increasing access
Adding a dark/light mode toggle directly into the p5.js Web Editor will make the platform more accessible for everyone, especially users with visual sensitivity and those who code for long hours. A dark mode helps reduce eye strain in low-light conditions, and a light mode supports visibility in bright environments. Providing instant theme switching gives all users better control over their coding environment and removes barriers for people with visual preferences or needs. This aligns with p5.js accessibility goals, making coding more comfortable and inclusive for a wider community
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
Feature request details
I am requesting the addition of a dark/light mode toggle in the p5.js Web Editor’s compiler/editor panel. The goal is to allow users to switch instantly between dark and light modes using a simple button or icon, improving usability, accessibility, and comfort for all users, especially those who spend long hours coding or have visual sensitivities.
Key points this feature should address:
One-click toggle for switching themes in the editor/toolbar.
The background, sidebar, and code panel colors should change accordingly.
User’s preference should be saved for future visits.
Should work smoothly for anonymous as well as logged-in users.
Design should not block or slow down other parts of the editor interface.
This feature aligns well with other modern code editors and improves the overall user experience for the p5.js community. Previous discussions (like Issue #2513) highlight demand for this enhancement, but the editor/compiler has not yet received a direct toggle option.