Freecodecamp: Learn Preview background should be white

[RandellDawson]

I did not see anyone raising this issue, but I don't think the background of the preview in default or night mode should be anything other than white unless the coding exercise specifically changes the background to something else. The preview should be exactly what you would see in a browser. In almost all the challenges, the background would be white.

[ahmadabdolsaheb]

I share your concerns @RandellDawson.

The reason we changed the color of the display is that a white display is discomforting to the eye on night mode when everything else is dark. so we injected some styles to harmonize the view in general.

That convention was carried over to light mode.

[ojeytonwilliams]

It might be better to default to white in light mode, same as the editor.

As for night mode, some of the css challenges might need some changes to look reasonable in both modes. For instance, in night mode, https://www.freecodecamp.dev/learn/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element looks like this:

If we change the seed code to

.silver-background {
  background-color: silver;
  color: black;
}

it would become

It would have to be case-by-case, though.

[ahmadabdolsaheb]

That is a very good point.
I will defer this to @QuincyLarson.

[moT01]

Logically, I have to agree with @RandellDawson - displaying anything other than what the code in the editor would produce might confuse campers.

But it is a little rough on the eyes to have the white background on night mode. And the current theme looks a lot better - so it's a tough call.

I scrolled through a number of challenges, and there's quite a few that don't look right with the blue background. So there might be a decent amount of work to go through and fix all of them.

[RandellDawson]

I really like the new theme, but a preview should be a true preview. We want to make this like the real world. Developers working in some kind of night mode on their favorite local editors, still expect to check the "real" result of the code they have written on a browser or in a preview mode in their local editors. The night mode should only apply to the editor or the non-preview part of the FCC site. Anything else is just not realistic.

[raisedadead]

The preview should be white.

[QuincyLarson]

I agree with everyone here on this thread. The preview should remain white.

Note that soon the preview won't always be there on the right side "brightening up" the user interface and ruining people's night mode experience. Soon we will have a single column layout where you the preview only shows up when you click a button to show it, or it loads in a separate tab.

@ahmadabdolsaheb - could you update the styling on this so that the preview area is unaffected by our styling?

[ahmadabdolsaheb]

Definitely.