Suggestion for global styling

[egorkel-altexsoft]

Feature Description

Usually, we want scrollbar styles to be consistent throughout the whole application. Of course, we can add style to each ng-scrollbar tag and then write something like this in our global styles

ng-scrollbar.custom-scrollbar {
  --scrollbar-thickness: 10;
  --scrollbar-thumb-color: grey;
  ...
}

But it requires adding a custom style to each tag.

<ng-scrollbar class="custom-scrollbar">...</ng-scrollbar>

You already have CSS vars. I suggest using them more flexibly.

  --ng-scrollbar-thickness: var(--scrollbar-thickness, 5);
  --ng-scrollbar-thumb-color: var(--scrollbar-thumb-color, rgb(0 0 0 / 20%));
  ...

The library uses prefixed vars with default fallbacks. And we can easily customize styles by defining required vars.

Use Case

In this case, we can define vars on root

:root {
  --scrollbar-thickness: 10;
  --scrollbar-thumb-color: grey;
  ...
}

and use scrollbars without additional classes

<ng-scrollbar>...</ng-scrollbar>