How to change custom image of button.

[cureblame]

With my past developers we were able to create a button that switches from light mode to dark mode. I now want to change the image of the button. I've looked through base css and theme liquid to see if there was any "img src" that I could just change the url, but I haven't found it. Please help me change this candle image on the button

URL: https://cureblame.com/collections/all#

password:shhhbequiet

[suyash1]

@cureblame - it is announcement bar section, so go to your theme files and check if you have separate section file like announcement-bar.liquid or announcement.liquid etc, you can search by name

[cureblame]

I don't see the img src or way to change the img on announcement-bar-liquid, here's the code

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
          <div class="page-width">
          <a href="#" class="darkmode-button" id="dmbutton"></a> 
        
            
              <p class="announcement-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "textarea",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.all.colors.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

[suyash1]

@cureblame - this line -  <a href="#" class="darkmode-button" id="dmbutton"></a> 

it gets image and since image code is not directly present in file, it must have been fetched from some javascript file, I recommend you to ask to theme developers about this, also check theme settings in customize settings

[cureblame]

I don't work with the old theme developers anymore, so I can't contact them. Is there anyway to change it manually? 

[suyash1]

@cureblame - then need to go through code and check from where the image is been fetched

[cureblame]

Which files do you recommend me to check?

[suyash1]

@cureblame - javascript files , this will not be easy, but you can check them

[theycallmemakka · Accepted solution]

Hi @cureblame ,

The code needs to be updated on global.js

Thank you