image not displayed in color after using templateImage

[shinepixel]

I have a black icon, which is displayed correctly with templateImage=. Under certain conditions I want to display a colored icon with image=. This does not work after templateImage= has been used. Even though using image=, it is treated as templateImage and hence displayed black (or white).

This gist demonstrates it: https://gist.github.com/shinepixel/8c16501b70de3acf4d3d314df71e449f When opening this plugin, the colored icon is displayed correctly, but not subsequent refreshes.

xbar v2.1.6-beta on macOS 12.0 Beta (21A5543b)

[cerico]

Try something like this

#!/usr/bin/env bash

# black icon, up arrow

ICON_UP="iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjM2IgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzYiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzNiIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzYiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjE0NC4wIgogICB0aWZmOllSZXNvbHV0aW9uPSIxNDQuMCIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0xMC0xN1QwODo1NzoxNSswMjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0xMC0xN1QwODo1NzoxNSswMjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMTdUMDg6NTc6MTUrMDI6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PpbskVUAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRzytEURTHP2b8itEQCwuLSVgI+VETG2UmoSSNUQabN8+bGTU/Xu+NNNkq2ylKbPxa8BewVdZKESnZKWtiw/ScNzM1kjm3c8/nfu89p3vPBUcwribMyn5IJNNGYMLnWQgtempeqKOJaoboVlRTH5udnaasfd5TYcfbXrtW+XP/Wv2KZqpQUSs8qupGWnhSeHo9rdu8I9yixpQV4TPhHkMuKHxn6+ECv9ocLfC3zUYw4AdHo7An+ovDv1iNGQlheTkdifiaWryP/RKXlpyfk9gu3oZJgAl8eJhiHD9eBhiR2Usvg/TJijL5/fn8GVKSq8qsk8FglSgx0vSIuibVNYkR0TUZcTJ2///21YwMDRaqu3xQ9WxZ751Qsw25rGV9HVlW7hicT3CZLOWnDmH4Q/RsSes4APcmnF+VtPAuXGxB66OuGEpecoo7IhF4O4WGEDTfQN1SoWfFfU4eILghX3UNe/vQJefdyz+KvWf2S7bLagAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAhdJREFUWIXtljtoFGEQgL+YSGzXB0JEdApBFA4LsRFCQMVqLLRQG0GwESxUEEmlYBoLC7GJ9VVBCOqAig80iI9OEe0kk0KCNmF9IKciZ3F/8Lzs7d7unRcN9zXDzsw/990+f+jxn9Hf7gARGYqiaDKKotVxHD9fVCERWQ88ArYDe6MoIo7jqUUREhEJMkPAAFABdkdRNBjH8YOic5cVlNkETAFrgKMhfRMoA6MicqlrQiKyuU5GgRehtCLITQKnReRKV4SAc8Aq4IC7P+T3Ze9395/AYeAOcEJESt0QOgNsc/dbSUV3/w7sA4aB13mHD+Rd4O7vWuj5ATzOO7slIVUdAUrAWqAvpD+a2cWUNSXgUF3qG+DAfTObLSSkqoOAAXsSyrNAUyFgKzCakP+iqsfMbCK3EHAqyMwB14CnQDXUvqasA3gGHKk7Xgnsp3ZfjavqPTObyys0f2ZOmlk5Q+APzGwGmGlIX1bVN8AWam/2u0lr056yDSHeyCOTwfUQNzZrSBNaHuLnTtkAnxpmL6DQp+Nv0hPKYkkKVRpiW7Qt5O7TwHHgfNs2FPi4JuHu452YA0v0HuooPaEs0oSqLfQU/b1qVkMSH0Ic7pgOjIT4vllD2mP/EtgBXFDVMeAJKf8sg/kN2q4w41URoTHgILATuF1QJImrZva2WbGvWQFAVdcBZ1m4yc9LBZimtkErm1nRM93j3+MXnkSHUkh+QccAAAAASUVORK5CYII="

# green icon, down arrow
ICON_DOWN="iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjM2IgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzYiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzNiIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzYiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjE0NC4wIgogICB0aWZmOllSZXNvbHV0aW9uPSIxNDQuMCIKICAgcGhvdG9zaG9wOkNvbG9
yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0xMC0xN1QwODo1OTo0MSswMjowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0xMC0xN1QwODo1OTo0MSswMjowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMTdUMDg6NTk6NDErMDI6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PhBYxiMAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRzytEURTHP2b8itEQCwuLSVgI+VETG2UmoSSNUQabN8+bGTU/Xu+NNNkq2ylKbPxa8BewVdZKESnZKWtiw/ScNzM1kjm3c8/nfu89p3vPBUcwribMyn5IJNNGYMLnWQgtempeqKOJaoboVlRTH5udnaasfd5TYcfbXrtW+XP/Wv2KZqpQUSs8qupGWnhSeHo9rdu8I9yixpQV4TPhHkMuKHxn6+ECv9ocLfC3zUYw4AdHo7An+ovDv1iNGQlheTkdifiaWryP/RKXlpyfk9gu3oZJgAl8eJhiHD9eBhiR2Usvg/TJijL5/fn8GVKSq8qsk8FglSgx0vSIuibVNYkR0TUZcTJ2///21YwMDRaqu3xQ9WxZ751Qsw25rGV9HVlW7hicT3CZLOWnDmH4Q/RsSes4APcmnF+VtPAuXGxB66OuGEpecoo7IhF4O4WGEDTfQN1SoWfFfU4eILghX3UNe/vQJefdyz+KvWf2S7bLagAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAihJREFUWIXtl79rVEEQxz8bFTWgoKWSaYJCYBQsrSyiqJVFQBC0srCwUDtFTcCAVxktbPMXCP6qtBREFCGCbGXEYiXRJt7hjyQiYSzeBo5j37t7dy+S4H2bYXd2Zz88Zmf2QV//o9TkkZo8qyKWqyKImiwDW4EB74L1EmugCqAq1Qdqpz5QO20ucqrJIHAK2AfsbnL98i5cb7N3vGVPA5gFnnoXfpQGUpNDwBNgKOGuA4VAwHlAEvPzajLmXXjdMZCaOGA6wiwADwHftGS5DQzABLCzaTwCjAF7gGk1OehdWGndlCyMajIEhDgc9i58Kjq508KoJnuBz/Hc/d6F2dY1eUk9HO1MO5gy8i7MAa9azugIaFu0X6uCadKXaLennOvu2pcGUpMxNbnUwbqLanJ6zYGAM8A9NZkqgKkB94Gz/wLoAvAOuKImt+LcH2DFu2BqcgO4Crwnq0WlVFipU/IuLKjJKPAcuKkmi8ASgJpcBiaBGeCYd+Fb2fhdJbV3oQ4cJbvCNbIWMQjcBd4Ao93AdA0Uob4Dx4EXwKYY6yXZl2l0G7ena+9d+AmcBB4Aj4ETRY2zE5XOoQTUElD6eudp4xfGtdaGAVp9QvScYwmtxkw+U/KA5qM9rCbJrtyN1GQLcCQO58oAfQQWgR3AlJocqABmBLgD7AJ+Ax9S63J/pdXkGnC7V5AcTXoXxlOO3KT2LtSAc2StoF4BRAN4S9ZwJyqI19f60F/gmpzWtShsjQAAAABJRU5ErkJggg=="

STATUS_FILE=/tmp/color_image_demo.tmp
first="yes"
if [ "$first" == true ] ; then
    echo "demo | templateImage=$ICON_UP"
    $first = false
fi
if [[ -f "$STATUS_FILE" ]]; then
        rm -f "$STATUS_FILE"
        echo "demo | color=blue | image=$ICON_UP"
else
        touch $STATUS_FILE
        echo "demo | color=orange | image=$ICON_DOWN"
fi

[shinepixel]

I am not sure, what you want to achieve with this.

With first="yes" it does not evaluate the first if-statement at all and setting first="true" it only displays the line from the first if-statement and nothing else. Setting $first = false is useless, because with every refresh the entire script is restarted.

[cerico]

Sorry about that! I was on the bus and got it working and just answered before tidying it up.

This was my first look at xbar and was just messing around trying to fix your issue, the above script changes the icons colours correctly on subsequent refreshses.

I'm at my desk now and had a bit more of a look and yes, the $first stuff isn't needed. You just need to change templateImage to image in your gist and that will work too (the above works because the templateImage is never evaluated, so yes the whole block can be removed)

[shinepixel]

Thanks for clarifying.

I guess I have to elaborate a little bit more what I wanted to achieve.

If I use only image=, then the up icon is shown in black and the down icon is shown in green. But I want the up icon to be black if menubar is in lightmode and white if menubar is in darkmode, that is what templateImage= is for (AFAIK). I do not refer to system dark/light-mode as I am using Spaces, switching from one Space to another the menubar can be either light or dark.

Adding comments to the code:

if [[ -f "$STATUS_FILE" ]]; then
    rm -f "$STATUS_FILE"
    # image should be black or white depending whether menubar is in lightmode or darkmode
    echo "demo | templateImage=$ICON_UP"
else
    touch "$STATUS_FILE"
    # image should be green independent whether menubar is in lightmode or darkmode
    echo "demo | color=green | image=$ICON_DOWN"
fi

[cerico]

ohh I didn't realize this was a darkmode light mode thing. I'll have another look later today

[shinepixel]

I stumbled across SwiftBar. It does handle image= and templateImage= correctly. It even has support for SF Symbols "natively" and hence no need for me to use Base64 icons at all :-D For me this issue is solved by switching to SwiftBar.