setElementScrollColors function

String? setElementScrollColors(Element element, int scrollWidth, String scrollButtonColor, [ String? scrollBgColor, ])

Sets element scroll colors, using standard CSS property scrollbar-color and webkit pseudo element ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track

Implementation

String? setElementScrollColors(
    Element element, int scrollWidth, String scrollButtonColor,
    [String? scrollBgColor]) {
  scrollBgColor ??= '';

  scrollButtonColor = scrollButtonColor.trim();
  scrollBgColor = scrollBgColor.trim();

  if (scrollButtonColor.isEmpty && scrollBgColor.isEmpty) return null;

  if (scrollWidth < 0) scrollWidth = 0;

  removeElementScrollColors(element);

  element.style.setProperty('scrollbar-width', '${scrollWidth}px');
  element.style.setProperty(
      'scrollbar-color', '$scrollButtonColor $scrollBgColor'.trim());

  var regExpNonWord = RegExp(r'\W+');

  var buttonColorID = scrollButtonColor.replaceAll(regExpNonWord, '_');
  var bgColorID = scrollButtonColor.replaceAll(regExpNonWord, '_');

  var scrollColorClassID =
      '__scroll_color__${scrollWidth}__${buttonColorID}__$bgColorID';

  var webkitScrollColorsCSS =
      '.$scrollColorClassID::-webkit-scrollbar { width: ${scrollWidth}px;}\n';

  if (scrollButtonColor.isNotEmpty) {
    var radius = scrollWidth * 2;
    var border = scrollWidth > 1 ? Math.max(1, scrollWidth ~/ 4) : 0;

    webkitScrollColorsCSS +=
        '.$scrollColorClassID::-webkit-scrollbar-thumb { background-color: $scrollButtonColor ; border-radius: ${radius}px; border: ${border}px solid $scrollBgColor;}\n';
  }

  if (scrollBgColor.isNotEmpty) {
    webkitScrollColorsCSS +=
        '.$scrollColorClassID::-webkit-scrollbar-track { background: $scrollBgColor ;}\n';
    webkitScrollColorsCSS +=
        '.$scrollColorClassID::-webkit-scrollbar-track-piece { background: $scrollBgColor ;}\n';
  }

  addCSSCode(webkitScrollColorsCSS);

  if (!element.classes.contains(scrollColorClassID)) {
    element.classes.add(scrollColorClassID);
  }

  return scrollColorClassID;
}