p5.js-web-editor
p5.js-web-editor copied to clipboard
processing
Set default iframe background color to white
Nature of issue?
- Found a bug
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:
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.
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!
Hi, I'm new to open source contributions i'll give this a shot as my first issue!
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:
Kindly confirm if you want exactly this or something else?
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;
}
Hi. I have incorporated the changes mentioned by @nsmarino here. I have created the pull request for the same. Would appreciate the feedback.
Hello p5.js developers. I'm new to open source and would love to fix this issue.
