HTML output has a dark blue background with black text by default

[nshahan]

Playing with the HTML library is hindered by the default color scheme in the output area. The text is black and the background color is dark enough that it is very difficult to read and bad for accessibility.

To repro run this in dartpad:

import 'dart:html';

main() {
  document.body.setInnerHtml('Hello World');
}

The output looks like this. If you squint or turn up the brightness on your screen you might be able to read the text:

Dragging the mouse to highlight it makes it easier to read.

[sperochon]

Hi,

I'm facing the same problem with the flutter code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
  );
}

The output on Android emulator or on real Android device is not the same as the one in dartpad since the text is displayed in light grey as following:

[RedBrogdon]

Interesting. For the first bit, this has definitely come up before. We'd have a bit of an issue changing it at this point, since so many of the pads we've created since the redesign was launched assume a dark background. Could we solve this by adding a color:white to the CSS that's included with new HTML pads? Right now it's there for h1, but no other tags:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

For the second question (Android behavior), I'm not sure if Flutter actually guarantees a text color if no text style is given to a Text widget. @hansmuller do you happen to know?

[nshahan]

Good observation! I didn't realize that some elements already set a readable color scheme. I tried a few more and it seems that other tags do appear white. All the headings I tried and paragraphs already have white text. Lists, tables, or generic divs don't. It would probably be easier to set the text color at the body and allow it to be inherited by as many tags as possible.

[RedBrogdon]

Got it -- thanks for the additional research!

@johnpryan, when you get a chance, could you take a look at whether changing the default CSS for new pads to use white text for everything is feasible/advisable? I think it's probably a good solution here, but it's your call.

[johnpryan]

That sounds good to me

[parlough]

I think that solution makes sense. Would solve some issues on dart.dev HTML codelabs I worked around with specific, extra styles. Thanks :)

[RedBrogdon]

Cool. @johnpryan, I'll leave this assigned to you, but I have a feeling you could kick it over to @parlough if you've got too much on your plate. 😄