Make sure edited text in input field is visible and legible when editing in modes other than standard light mode

[Zishan-Rahman]

No description provided.

[tracygardner]

Hi @Zishan-Rahman, I'm seeing this:

Have I misunderstood what this fixes?

[Zishan-Rahman]

@tracygardner Hopefully my latest commit fixed it 🙏

[tracygardner]

@Zishan-Rahman I still see the same. What are you seeing?

I searched and found the value in the HTML and then targetted it:

body[data-theme="dark-contrast"] .blocklyWidgetDiv input.blocklyHtmlInput {
  background-color: #ffffff !important;
  color: #000000 !important;
}

Which seems to work for me. There's an html overlay.

[Zishan-Rahman]

@Zishan-Rahman I still see the same. What are you seeing?

I searched and found the value in the HTML and then targetted it:

body[data-theme="dark-contrast"] .blocklyWidgetDiv input.blocklyHtmlInput {
  background-color: #ffffff !important;
  color: #000000 !important;
}

Which seems to work for me. There's an html overlay.

@tracygardner I thought I got it to work before I opened the PR? I could've sworn it did, but what's meant to happen is that the text itself is supposed to be white on a grey-ish background while you edit the text:

It's meant to stay white while I edit the text, but for some reason that's not what's happening now as I'm able to reproduce the same issue you have:

I thought the white-on-black text would look nicer and be an easy way to resolve this, but perhaps I should've consulted you and Becky on that particular colour choice first. Your original black-on-white solution (as discussed privately) is a better way out of this. I'll implement that now.

[tracygardner]

@Zishan-Rahman As I understood it from Becky, this wasn't something that needed changing at this stage, so all I was doing was making it consistent. The change to black background looks like an unintended side effect of another change. If we were going to change this for dark mode then it would be consistently throughout, not just for editing.

[Zishan-Rahman]

@tracygardner I implemented your fix, but the only thing is that the background doesn't change to red anymore if you enter an invalid input as you'd expect it to (it still rejects it when you press Enter, it just doesn't show it's invalid while you edit it):

[tracygardner]

@Zishan-Rahman It was just a hint to help you get unstuck. You probably need to target more carefully.

[Zishan-Rahman]

Good point. I'll keep digging. Thanks.