Support for Dark Theme

[Prateek93a]

Currently the website only has a default theme. I am not sure but I believe it would be nice to have support for dark theme as well.

[niemenjoki]

I'd be happy to work on this feature.

[micuat]

I'm just thinking out loud, but if it's going to be implemented what about adding high contrast mode too to be consistent with the web editor? https://github.com/processing/p5.js-web-editor/issues/1263

[montoyamoraga]

thanks everyone! i assigned @jnsjknn for this issue

[niemenjoki]

I have now created new dark and high contrast themes. I did my best to match the colors in the web editor for consistency. Currently, the theme can only be changed by editing the classList of the body element:

document.body.classList = "light"
document.body.classList = "dark"
document.body.classList = "contrast"

It may be a good idea for someone more experienced to see if my implementation is ok. Can someone check it by cloning my fork or how should we proceed @montoyamoraga?

TODO / thoughts:

• The color p5.js logo doesn't match the yellow color of the high contrast theme. Should we
  • add a new asset
  • use CSS filters to change the color
  • leave it as it is
  • something else?
• The asterisk svg on the page has the same problem as mentioned above about the logo
• How should the theme change?
  • Automatically based on prefers-color-scheme
  • Allowing users to manually change it with a toggle somewhere on the site
  • Initially changing the theme automatically but allowing user to override it
• Should we store the preferred theme in localStorage or sessionStorage to preserve the user's selection?

[ace-johnny]

Are there any further details on the availability of the website's dark theme? This thread seems to indicate that one was attempted, but no affordance was made for selecting it.

Is there any place to download the work already completed? The fork previously linked is dead.

One would think that an explicitly accommodating project such as this would have made accessibility a first priority, so it's absolutely astounding that the readability of the website is so blindingly poor.

[niemenjoki]

@ace-johnny No details. I don't think my work was ever reviewed by anyone and eventually I forgot about it. Later I ended up deleting the fork without realizing that it had the dark mode code in it.

[limzykenneth]

I'm happy to review a PR for this if there are existing work already done or if a new attempt is made.

[akshatnema]

@limzykenneth Is this feature of Dark mode still needed in the p5 website? I can work on this.

[ace-johnny]

@akshatnema I don't know if the p5 team still needs it, but I sure do. My CSS skills just aren't up to the task of redesigning the entire site; let me know if you make an attempt.

[akshatnema]

@ace-johnny, will you please confirm once from p5 team, regarding this. I know it's a huge task to design the website in Dark mode. I will try my best to handle it. Just waiting for approval from the team.