Shopify Theme: Supply - Search Bar Text in Mobile is hard to see.

Shopify Partner
21 0 3

We use the Supply theme.  My Search Box looks like this when viewed in desktop size and you can see that the colors in the search box originate from Header section-> Text and links, and in Cart button and search field.

ShopifySearchBoxDesktopSize.JPG

 

Theme Settings Colors are:

SupplyHeaderColors.JPG

and in Chrome, inspecting the CSS shows

ChromeDevSearchBoxCSS.JPG

Making entered text almost invisible against the background color

 

 

The problem is with entering text into the search box in mobile view as it shows as too dark. 

It is getting its color from theme.sccs.liquid (approx. ~line 1729):

 

themeSCCSsnip01.JPG

which I believe is set by this particular Theme Color setting.  Text->Body

You can barely make out the search term of "tap wrench" against the blue background.

 

SupplyBodyColors.JPGShopifySearchMobileSize.JPG

0 Likes
Shopify Partner
21 0 3

Fixed this myself.  ~ line 3160

 

/* 20190507 FMP fixed search text color as too dark on mobile */
  input[type="search"] {
    color: color-control($headerButtonAndSearch);
  }
/* 20190507 END */
1 Like
Tourist
15 0 0

Thank you!

0 Likes