The inverted scroll widget icons

Configuration Help & General Discussion
1

The scroll widget icons for the menubar (brightness and volume) are inverted. But I'm using a light grey menu bar and dark grey icons. I try to adjust the invert filter on those icons but I literally can't. They adjust but the moment I use the widget they go back to white. Where can I actually change the filter and have it save.

I'm having similar issues across the board with the changes not saving. I had to save backup css files on my desktop for when my changes inevitably reset.

2

the notchbar is really deprecated, it should not be used in new setups :-/
There are too many issues on current macOS versions with the approaches used there. I'm currently finalizing the floating menu widgets that will allow to achieve similar/same things as the notchbar did.

If you still want to try, the function BTT uses to add a new status item is called

"addOrUpdateStatusBarItem" in the BTTNotchBar.js and looks like this:


function addOrUpdateStatusBarItem(
  containerID,
  base64,
  x,
  y,
  elementID,
  sourceNotch
) {
  const containerElement = document.getElementById(containerID);
  if (!containerElement) {
    return;
  }

  let dataXChanged = false;

  let div = document.getElementById(elementID + containerID);
  if (!div) {
    div = document.createElement("div");
    div.alt = "status icon";
    div.id = elementID + containerID;
    div.setAttribute("data-use-for-highlight", "true");
    div.classList.add("statusbar-item");
    containerElement.appendChild(div);
    div.onmouseup = function () {
      callBTT("click_status_item", { id: elementID });
    };
  }

  let img = document.getElementById(elementID + containerID + "img");

  // create html image tag using js
  if (!img) {
    img = document.createElement("img");
    img.alt = "status icon";
    img.id = elementID + containerID + "img";
    img.setAttribute("x-apple-data-detectors", "false");
    img.classList.add("statusbar-item-image");

    div.appendChild(img);
  }

  if (+div.getAttribute("data-x") !== x) {
    div.setAttribute("data-x", x);
    img.setAttribute("data-x", x);

    dataXChanged = true;
  }

  if (sourceNotch === 1) {
    div.classList.add("source-notch");

    img.classList.add("source-notch");
    div.classList.remove("source-standard");
    img.classList.remove("source-standard");
  } else {
    div.classList.add("source-standard");
    img.classList.add("source-standard");

    div.classList.remove("source-notch");
    img.classList.remove("source-notch");
  }

  let children = Array.prototype.slice.call(containerElement.children, 0);

  children.sort(function (a, b) {
    var aord = +a.getAttribute("data-x");
    var bord = +b.getAttribute("data-x");
    return aord - bord;
  });

  if (dataXChanged === true) {
    removeAllChildrenForElement(containerElement);
    for (var i = 0, l = children.length; i < l; i++) {
      containerElement.appendChild(children[i]);
    }
  }

  if (base64 && base64.length > 0) {
    img.src = `data:image/png;base64,${base64}`;
  }
}
3

I must be confused. I was under the impression that in the wake of the Bartender fiasco you were updating the notchbar functionality to be compatible with modern setups. I certainly noticed that the 4.6 update had notchbar items like widget mode and menubar mode already active. Am I missing something? Maybe I'm not using the right terminology?