'How to change background color of input form according to theme

I'm using a vuexy template where they have a dark mode in build. It's working properly with react select inputs but not with ReactGoogleAutocomplete

Here's the difference in light mode vs dark.

light: enter image description here

dark: enter image description here

This is the related code :

<Col lg={4} md={6} sm={6} xs={12} className="pb-3">
  <Label check className="py-1">
    IncoTerms
  </Label>
  <Select
    isClearable={false}
    id="IncoTerms"
    name="IncoTerms"
    options={IncoTerms}
    className={classnames('react-select')}
    defaultValue={IncoTerms[0]}
    classNamePrefix="select"
    theme={selectThemeColors}
    onChange={(choice) => setIncotermsChoice(choice.value)}
  />
</Col>
<Col lg={4} md={6} sm={6} xs={12}>
  <Label className="py-1" check>
    Port of origin
  </Label>
  <FormGroup>
    <Autocomplete
      apiKey={GOOGLE_PLACES_API_KEY}
      placeholder=" Origin"
      style={{
        width: '100%',
        borderRadius: '3px',
        padding: '8px',
        color: colors.secondary.main,
        border: `1px solid ${colors.secondary.main}`
      }}
      onPlaceSelected={(place) => {
        setPortoforigin(place.formatted_address)
      }}
      options={{
        types: ['(cities)']
      }}
      defaultValue=""
    />
  </FormGroup>
</Col>

I also tried to add theme={selectThemeColors} in the Autocomplete but this dosnt change anything. any idea to fix this ?

javascriptcssreactjsstyles


Solution 1:[1]

Add backgroundColor class in Autocomplete input to transparent as below.

backgroundColor: 'transparent',

This will make it transparent in the dark mode as well, instead of giving white background.

Upodate your code like this:

<Autocomplete
  apiKey={GOOGLE_PLACES_API_KEY}
  placeholder=" Origin"
  style={{
    width: '100%',
    borderRadius: '3px',
    padding: '8px',
    backgroundColor: 'transparent', // New 
    color: colors.secondary.main,
    border: `1px solid ${colors.secondary.main}`
  }}
  onPlaceSelected={(place) => {
    setPortoforigin(place.formatted_address)
  }}
  options={{
    types: ['(cities)']
  }}
  defaultValue=""
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faisal Nazik

Related Questions