search

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.4k stars 1.34k forks source link

Set default iframe background color to white #1852

Open catarak opened 3 years ago

catarak commented 3 years ago

Nature of issue?

Details about the bug:

Hi @catarak I have run into this as well, here is a screenshot of how text looks in the Preview window in Dark mode, but in High Contrast mode it is similar, defaulting to black text on a very dark background: image Here's an example of a sketch that displays this issue: https://editor.p5js.org/ml5/sketches/XCFPKqIKrt

Originally posted by @leemark in https://github.com/processing/p5.js-web-editor/issues/1400#issuecomment-803752647

@catarak: I think the issue here is that the iframe should have a default background color of white, as is the norm for websites.

nsmarino commented 3 years ago

Hello,

I am currently working on a pull request to fix this issue, but I would like some advice. I added a default background color of white to the iframe in the PreviewFrame component by adding background-color: white to the .preview-frame class in client/styles/components/_preview-frame.scss. However, this has the possibly undesired effect of making the entire preview pane white even when no sketch is running, resulting in a confusing user experience. An alternative solution I would like to propose is to simply make the default style.css file for a new sketch contain the following:

body {
  background-color: white;
}

In this way, the iframe would only turn white when the sketch was running, making for a better user experience. The user would receive visual feedback on whether or not the sketch is running, and could easily change the color of the document from the default stylesheet.

This change could easily be done by editing defaultCSS in client/modules/IDE/reducers/files.js.

I am welcome to any and all feedback!

shubhamkapoor01 commented 3 years ago

Hi, I'm new to open source contributions i'll give this a shot as my first issue!

akshatnema commented 2 years ago

Hey @catarak, I tested this bug on the editor and it's still there. I want to work on this issue and will give a PR soon for this. Here is a preview of the changes I will make: image

Kindly confirm if you want exactly this or something else?

chaudhary-99 commented 1 year ago

Is anyone working on this issue? i would like to work on this issue.

Ankush263 commented 1 year ago

The best way to tackle this issue is, by adding this line inside index.html <head></head> section

<link rel="stylesheet" href="style.css">

then apply the CSS in styles.css file

body {
  background-color: white;
}

OR

body {
  color: white;
}
cverma61 commented 1 year ago

Is this issue still open? if it is then please assign it to me :)

tayalvasu commented 1 year ago

Is anyone working on this issue? i would like to work on this issue.

Suhasshenoy commented 1 year ago

Hi. I have incorporated the changes mentioned by @nsmarino here. I have created the pull request for the same. Would appreciate the feedback.

PiyushChandra17 commented 1 year ago

Is this issue still open? I would like to work on this issue :)

unnati110302 commented 1 year ago

Hello p5.js developers. I'm new to open source and would love to fix this issue.

Madhav17777777 commented 1 year ago

this is my first issue ,i will try my best....

faizan-20 commented 10 months ago

hey @catarak if no one is working on this issue may i take it up?

shamvrueth commented 9 months ago

If the issue is still open, can I work on this?

Noorain464 commented 3 months ago

I am new to open source and I would like to work on this issue . Please reply