My Colors Changed in my share-buttons.liquid file

[DarkHorse]

I changed the link color in my theme setting and so my icons that are usually white for the  share buttons are now green/teal like my theme.

I've tried to figure out how to make them white, but so far nothing.

Here's the theme code.

{% comment %}
  @Anonymous social_url {String}
    URL to share
 
  @Anonymous social_title {Object}
    If sending data to a service, description or title to share

  @Anonymous social_image {String|Boolean}
    If sending data to a service, URL of image to share, or false for no image
{% endcomment %}

{% assign share_url = social_url | url_param_escape %}
{% assign share_title = social_title | url_param_escape %}
{% assign share_image = false %}
{% if social_image %}
  {% assign share_image = social_image | url_param_escape %}
{% endif %}

<aside class="share-buttons" aria-label="{{ snippet_title | t }}">

  <span class="share-buttons--title">
    {{ snippet_title | t }}
  </span>


  
  <div class="share-buttons--list">
    <a
      class="share-buttons--button share-buttons--facebook"
      target="_blank"
      href="//www.facebook.com/sharer.php?u={{ share_url }}">
      {%-
        render 'social-icon',
        id: 'facebook'
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_facebook' | t }}</span>
    </a>
    <a
      class="
        share-buttons--button
        share-buttons--x
      "
      target="_blank"
      href="//x.com/intent/tweet?url={{ share_url }}">
      {%-
        render 'social-icon',
        id: 'x',
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_x' | t }}</span>
    </a>

    <a
      class="share-buttons--button share-buttons--linkedin"
      target="_blank"
      href="//www.linkedin.com/shareArticle?mini=true&url={{ share_url }}&title={{ share_title }}">
      {%-
        render 'social-icon',
        id: 'linkedin'
      -%}
      <span class="visually-hidden">{{ 'general.accessibility.share_on_linkedin' | t }}</span>
    </a>

    {% if share_image %}
      <a
        class="share-buttons--button share-buttons--pinterest"
        target="_blank"
        href="//pinterest.com/pin/create/button/?url={{ share_url }}&amp;media={{ share_image }}&amp;description={{ share_title }}">
        {%-
          render 'social-icon',
          id: 'pinterest'
        -%}
        <span class="visually-hidden">{{ 'general.accessibility.share_on_pinterest' | t }}</span>
      </a>
    {% endif %}
  </div>
</aside>

[ThePrimeWeb]

Hey @DarkHorse,

Can I have the store link?

[DarkHorse]

https://darkhorseworkshop.com/collections/bag-patterns/products/leather-satchel2

You can see the 4 icons are odd coloring.

Like Facebok, X, Pinterest, whatever.

[ThePrimeWeb · Accepted solution]

Add this to the CSS and it should be fine

.product-share path {
    color: #fff !important;
}

[DarkHorse]

To that same file?

[DarkHorse]

Added it to theme.css.liquid and it worked.

Appreciate it. 🙂

[ThePrimeWeb]

Yeah sorry, couldn't reply you on time, glad you figured that part 😊