Set default iframe background color to white #1852
Description
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 #1400 (comment)
@catarak: I think the issue here is that the iframe should have a default background color of white, as is the norm for websites.
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
- Fixes #1852processing/p5.js-web-editor
- iframe background to whiteprocessing/p5.js-web-editor
- fixed preview background #1852processing/p5.js-web-editor
- Set default iframe background color to whiteprocessing/p5.js-web-editor
- fixed iframe background color to whiteprocessing/p5.js-web-editor
- Fix [#2785] text color not changing in dark/high contrast themeprocessing/p5.js-web-editor
- Set the default iframe background color to white.processing/p5.js-web-editor
Participants
Activity
nsmarino commentedon May 8, 2021
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: whiteto the.preview-frameclass 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 defaultstyle.cssfile for a new sketch contain the following: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
defaultCSSin client/modules/IDE/reducers/files.js.I am welcome to any and all feedback!
shubhamkapoor01 commentedon Aug 25, 2021
Hi, I'm new to open source contributions i'll give this a shot as my first issue!
Fixed processing#1852
Fixed processing#1852
akshatnema commentedon Dec 18, 2021
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?
chaudhary-99 commentedon Feb 1, 2023
Is anyone working on this issue? i would like to work on this issue.
Ankush263 commentedon Sep 8, 2023
The best way to tackle this issue is, by adding this line inside
index.html<head></head>sectionthen apply the CSS in styles.css file
OR
5 remaining items
unnati110302 commentedon Oct 13, 2023
Hello p5.js developers. I'm new to open source and would love to fix this issue.
Madhav17777777 commentedon Oct 18, 2023
this is my first issue ,i will try my best....
faizan-20 commentedon Dec 23, 2023
hey @catarak if no one is working on this issue may i take it up?
describe()#2785Fix [processing#2785] text color not changing in dark/high contrast t…
shamvrueth commentedon Jan 22, 2024
If the issue is still open, can I work on this?
Noorain464 commentedon Aug 1, 2024
I am new to open source and I would like to work on this issue .
Please reply
Harshit-7373 commentedon Mar 1, 2025
@raclim I think this issue is solved now.
I tried running the sketch provided in the description of this issue. But the background and everything is correct.