Apply user's system color-scheme preference as the default site theme

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.

https://editor.p5js.org

GNU Lesser General Public License v2.1

1.37k stars 1.32k forks source link

Apply user's system color-scheme preference as the default site theme #3061

Open nickcombs32 opened 6 months ago

nickcombs32 commented 6 months ago

Increasing access

Brings site up to modern CSS accessibility standards by reducing eye strain.

Most appropriate sub-area of p5.js?

[X] Accessibility
[X] 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 enhancement details

CSS media feature is available to detect user's preference: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

If feasible, apply to both the editor and the resource pages. Changing the theme in options overrides the default.

welcome[bot] commented 6 months ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

welcome[bot] commented 6 months ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

rohanjadhav05 commented 3 months ago

Hi @raclim, @lindapaiste, @nickcombs32 we can get the system's mode and initialise the mode with the reducer we are using to set the theme.

Which will help us to get the system mode by default and when user select the mode from the option we will change the mode. below I have added the dummy code for it, also will be raising a PR for this issue.

// will get system mode from this function const getSystemTheme = () => { const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)') .matches; return prefersDarkMode ? 'dark' : 'light'; };

// system mode is present in variable systemTheme const systemTheme = getSystemTheme();

// initialising the theme variable with the system's mode theme: systemTheme

Please do let me know if there is anything to improve...

Thanks