Input with dark theme blends with background

[bryceg]

Bug Report

Using dark theme on an input causes it to use the same color as the body background, and it blends in becoming invisible.

Steps

1. go to: https://stardust-ui.github.io/react/components/input/definition
2. Change theme to teams dark

Expected Result

Input should have a more gray background, similar to dropdown component

Actual Result

Becomes invisible

Version

0.37.0

[codepretty]

We addressed this issue by adding an inverted prop in #1684

[codepretty]

We have a task to do the same thing for Dropdown.

[levithomason]

Hm, shouldn't the default input and dropdown styles just work in dark mode? No other component requires adding inverted when in dark mode.

Note, I don't think the OP is saying that they put in on a random background, but that they put it in dark mode:

[bryceg]

@levithomason correct, I have made no other styling changes except setting the theme to dark mode.

[codepretty]

There are Teams Design needs to support 2 different color backgrounds for Input in each theme depending on the background the component sits on. The inverted prop was added to account for support for both scenarios. @bryceg is there a certain scenario you are trying to support that isn't working? Have you tried using the inverted prop? If it's just in the component playground viewers, perhaps the background color of container should be swapped. Because the same problem happens in Teams default theme when inverted is selected.

[bryceg]

@codepretty I don't think I want to use the inverted prop, as then the input is hidden on the light theme.

I'm not setting any styling on my page background or the input component, just swapping the theme to "dark" based on the users Teams theme setting using the Provider component <Provider={theme}>....
I would not expect to need to set inverted to true on this one component type, based on the state of the theme being dark or light. The others seem to handle this just fine (Dropdown, Checkbox, etc.)

[codepretty]

We shouldn't update the background of the Input. The update should to be the background of the playground area.

[wictorwilen]

It seems like the default background for the dark theme is invalid and not the actual inputs. Here's two examples:
From the stardust-ui site:

And from a custom component in a Teams configuration dialog:

And the light version:

[levithomason]

We shouldn't update the background of the Input. The update should to be the background of the playground area.

@codepretty, note that the background of the playground area is the dark mode body background color.

[codepretty]

Yep. Creating a PR to address #1478 which should fix this issue as well.