Update

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 15.0.2
+
+- feat: Ability to set the scrollbar CSS variables from `:root` or any parent selector, closes [#591](https://github.com/MurhafSousli/ngx-scrollbar/issues/591) and [#606](https://github.com/MurhafSousli/ngx-scrollbar/issues/606).
+
 ## 15.0.1
 
 - fix: SSR with CDK Virtual Scroll - `ResizeObserver` is not defined error thrown, closes [#603](https://github.com/MurhafSousli/ngx-scrollbar/issues/603).

README.md

@@ -55,6 +55,4 @@ If you identify any errors in the library, or have an idea for an improvement, p
 - [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)
 - [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)
 - [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)
-- [ngx-wordpress](https://github.com/MurhafSousli/ngx-wordpress)
 - [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)
-- [ngx-teximate](https://github.com/MurhafSousli/ngx-teximate)

angular.json

@@ -58,8 +58,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "13kb",
-                  "maximumError": "13kb"
+                  "maximumWarning": "15kb",
+                  "maximumError": "15kb"
                 }
               ],
               "outputHashing": "all"

package.json

@@ -14,40 +14,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/material": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/platform-server": "^18.0.1",
-    "@angular/router": "^18.0.1",
-    "@angular/ssr": "^18.0.2",
+    "@angular/animations": "^18.0.6",
+    "@angular/cdk": "^18.0.6",
+    "@angular/common": "^18.0.6",
+    "@angular/compiler": "^18.0.6",
+    "@angular/core": "^18.0.6",
+    "@angular/forms": "^18.0.6",
+    "@angular/material": "^18.0.6",
+    "@angular/platform-browser": "^18.0.6",
+    "@angular/platform-browser-dynamic": "^18.0.6",
+    "@angular/platform-server": "^18.0.6",
+    "@angular/router": "^18.0.6",
+    "@angular/ssr": "^18.0.7",
     "@swimlane/ngx-datatable": "^20.1.0",
-    "ag-grid-angular": "^31.3.2",
-    "ag-grid-community": "^31.3.2",
+    "ag-grid-angular": "^32.0.0",
+    "ag-grid-community": "^32.0.0",
     "chance": "^1.1.11",
     "express": "^4.18.2",
-    "ng-zorro-antd": "^18.0.0-beta.0",
+    "ng-zorro-antd": "^18.0.1",
     "ngx-color-picker": "^16.0.0",
     "ngx-infinite-scroll": "^18.0.0",
-    "primeng": "^17.18.0",
+    "primeng": "^17.18.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "^0.14.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/eslint-plugin": "18.0.1",
-    "@angular-eslint/eslint-plugin-template": "18.0.1",
-    "@angular-eslint/schematics": "18.0.1",
-    "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
+    "@angular-devkit/build-angular": "^18.0.7",
+    "@angular-eslint/builder": "18.1.0",
+    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/schematics": "18.1.0",
+    "@angular-eslint/template-parser": "18.1.0",
+    "@angular/cli": "^18.0.7",
+    "@angular/compiler-cli": "^18.0.6",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
@@ -63,4 +63,4 @@
     "ng-packagr": "^18.0.0",
     "typescript": "~5.4.5"
   }
-}
+}

projects/ngx-scrollbar-demo/src/app/app.component.scss

@@ -95,3 +95,8 @@ mat-sidenav {
   width: 30px;
   background: #643761;
 }
+
+.page-wrapper {
+  --scrollbar-thickness: 12;
+  --scrollbar-hover-thickness: 12;
+}

projects/ngx-scrollbar-demo/src/app/example-ag-grid-table/example-ag-grid-table.component.scss

@@ -9,9 +9,8 @@
       overflow: hidden;
     }
   }
-}
 
-ng-scrollbar {
+  --scrollbar-thickness: 6;
   --scrollbar-hover-thickness: 10;
   --scrollbar-thumb-color: var(--color-primary);
   --scrollbar-track-color: var(--surface-container-low);

projects/ngx-scrollbar-demo/src/app/example-infinite-scroll/example-infinite-scroll.component.scss

@@ -14,6 +14,7 @@
     --scrollbar-track-color: var(--surface-container-low);
     --scrollbar-thumb-color: var(--color-primary);
     --scrollbar-thickness: 10;
+    --scrollbar-hover-thickness: 10;
     --scrollbar-offset: 6;
     --scrollbar-border-radius: 7px;
 

projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.scss

@@ -2,6 +2,7 @@ ng-scrollbar {
   --scrollbar-track-color: var(--surface-container-low);
   --scrollbar-thumb-color: var(--color-primary);
   --scrollbar-thickness: 8;
+  --scrollbar-hover-thickness: 8;
   --scrollbar-offset: 6;
   --scrollbar-border-radius: 7px;
 }

projects/ngx-scrollbar-demo/src/app/example-nested-virtual-scroll/example-nested-virtual-scroll.component.scss

@@ -13,6 +13,7 @@
   --scrollbar-track-color: var(--surface-container-low);
   --scrollbar-offset: 3;
   --scrollbar-thickness: 10;
+  --scrollbar-hover-thickness: 10;
   --scrollbar-border-radius: 10px;
 }
 

projects/ngx-scrollbar-demo/src/app/example-virutal-scroll/example-virtual-scroll.component.scss

@@ -14,6 +14,7 @@
     --scrollbar-track-color: var(--surface-container-low);
     --scrollbar-thumb-color: var(--color-primary);
     --scrollbar-thickness: 12;
+    --scrollbar-hover-thickness: 12;
     --scrollbar-offset: 6;
     --scrollbar-border-radius: 8px;
 

projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng.component.scss

@@ -78,6 +78,7 @@ ng-scrollbar {
   --scrollbar-track-color: var(--surface-container-low);
   --scrollbar-thumb-color: var(--color-primary);
   --scrollbar-thickness: 10;
+  --scrollbar-hover-thickness: 10;
   --scrollbar-offset: 6;
   --scrollbar-border-radius: 7px;
 

projects/ngx-scrollbar/README.md

@@ -55,6 +55,4 @@ If you identify any errors in the library, or have an idea for an improvement, p
 - [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)
 - [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)
 - [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)
-- [ngx-wordpress](https://github.com/MurhafSousli/ngx-wordpress)
 - [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)
-- [ngx-teximate](https://github.com/MurhafSousli/ngx-teximate)

projects/ngx-scrollbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrollbar",
-  "version": "15.0.1",
+  "version": "15.0.2",
   "license": "MIT",
   "homepage": "https://ngx-scrollbar.netlify.com/",
   "author": {

projects/ngx-scrollbar/src/lib/button/scrollbar-button.component.scss

@@ -9,25 +9,25 @@
   border-radius: 0;
   appearance: none;
 
-  background-color: var(--scrollbar-button-color);
+  background-color: var(--INTERNAL-scrollbar-button-color);
 
   svg {
-    fill: var(--scrollbar-button-fill);
+    fill: var(--INTERNAL-scrollbar-button-fill);
   }
 
   &:hover {
-    background: var(--scrollbar-button-hover-color);
+    background: var(--INTERNAL-scrollbar-button-hover-color);
 
     svg {
-      fill: var(--scrollbar-button-hover-fill);
+      fill: var(--INTERNAL-scrollbar-button-hover-fill);
     }
   }
 
   &:active {
-    background: var(--scrollbar-button-active-color);
+    background: var(--INTERNAL-scrollbar-button-active-color);
 
     svg {
-      fill: var(--scrollbar-button-active-fill);
+      fill: var(--INTERNAL-scrollbar-button-active-fill);
     }
   }
 

projects/ngx-scrollbar/src/lib/ng-scrollbar.scss

@@ -18,68 +18,68 @@
   // CSS variables used to customized the look of the scrollbar component
 
   // Scrollbar track border radius
-  --scrollbar-border-radius: 0px;
+  --INTERNAL-scrollbar-border-radius: var(--scrollbar-border-radius, 0px);
 
   // Scrollbar track thickness
-  --scrollbar-thickness: 5;
+  --INTERNAL-scrollbar-thickness: var(--scrollbar-thickness, 5);
 
   // Space between scrollbar track and its surrounding
-  --scrollbar-offset: 0;
+  --INTERNAL-scrollbar-offset: var(--scrollbar-offset, 0);
 
   // Scrollbar track wrapper transition
-  --scrollbar-track-wrapper-transition: width 60ms linear, height 60ms linear;
+  --INTERNAL-scrollbar-track-wrapper-transition: var(--scrollbar-track-wrapper-transition, width 60ms linear, height 60ms linear);
 
   // Scrollbar track color
-  --scrollbar-track-color: transparent;
+  --INTERNAL-scrollbar-track-color: var(--scrollbar-track-color, transparent);
 
   // Scrollbar thumb color
-  --scrollbar-thumb-color: rgb(0 0 0 / 20%);
+  --INTERNAL-scrollbar-thumb-color: var(--scrollbar-thumb-color, rgb(0 0 0 / 20%));
 
   // Scrollbar thumb color when hovered
-  --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);
+  --INTERNAL-scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color, --INTERNAL-scrollbar-thumb-color);
 
   // Scrollbar thickness when hovered
-  --scrollbar-hover-thickness: var(--scrollbar-thickness);
+  --INTERNAL-scrollbar-hover-thickness: var(--scrollbar-hover-thickness, --INTERNAL-scrollbar-thickness);
 
   // Scrollbar thumb transition effect
-  --scrollbar-thumb-transition: none;
+  --INTERNAL-scrollbar-thumb-transition: var(--scrollbar-thumb-transition, none);
 
   // The minimum size the scrollbar thumb can get
-  --scrollbar-thumb-min-size: 20;
+  --INTERNAL-scrollbar-thumb-min-size: var(--scrollbar-thumb-min-size, 20);
 
   // Scrollbar button colors
-  --scrollbar-button-color: var(--scrollbar-thumb-color);
-  --scrollbar-button-hover-color: var(--scrollbar-button-color);
-  --scrollbar-button-active-color: var(--scrollbar-button-hover-color);
+  --INTERNAL-scrollbar-button-color: var(--scrollbar-button-color, --INTERNAL-scrollbar-thumb-color);
+  --INTERNAL-scrollbar-button-hover-color: var(--scrollbar-button-hover-color, --INTERNAL-scrollbar-button-color);
+  --INTERNAL-scrollbar-button-active-color: var(--scrollbar-button-active-color, --INTERNAL-scrollbar-button-hover-color);
 
   // Scrollbar button arrow fill
-  --scrollbar-button-fill: white;
-  --scrollbar-button-hover-fill: var(--scrollbar-button-fill);
-  --scrollbar-button-active-fill: var(--scrollbar-button-hover-fill);
+  --INTERNAL-scrollbar-button-fill: var(--scrollbar-button-fill, white);
+  --INTERNAL-scrollbar-button-hover-fill: var(--scrollbar-button-hover-fill, --INTERNAL-scrollbar-button-hover-fill);
+  --INTERNAL-scrollbar-button-active-fill: var(--scrollbar-button-active-fill, --INTERNAL-scrollbar-button-hover-fill);
 
   // Transition for sticky element when viewport is hovered in [visibility]="hover"
-  --scrollbar-hover-opacity-transition-enter-duration: 0;
-  --scrollbar-hover-opacity-transition-leave-duration: 0.4s;
-  --scrollbar-hover-opacity-transition-leave-delay: 1s;
+  --INTERNAL-scrollbar-hover-opacity-transition-enter-duration: var(--scrollbar-hover-opacity-transition-enter-duration, 0);
+  --INTERNAL-scrollbar-hover-opacity-transition-leave-duration: var(--scrollbar-hover-opacity-transition-leave-duration, 0.4s);
+  --INTERNAL-scrollbar-hover-opacity-transition-leave-delay: var(--scrollbar-hover-opacity-transition-leave-delay, 1s);
 
   // Viewport overscroll behavior
   // In firefox and safari the scrollbar bounces if viewport is over-scrolled causing the scrollbars to bounce with it
   // It seems that the only way around this is by disabling the overscroll behavior
   // The other option is to give up the sticky scrollbar method and use an absolute position scrollbars
-  --scrollbar-overscroll-behavior: initial;
+  --INTERNAL-scrollbar-overscroll-behavior: var(--scrollbar-overscroll-behavior, initial);
 
   // Viewport overscroll behavior in case of mobile devices
-  --scrollbar-mobile-overscroll-behavior: none;
+  --INTERNAL-scrollbar-mobile-overscroll-behavior: var(--scrollbar-mobile-overscroll-behavior, none);
 
   /** Scrollbar private CSS variables **/
 
-  --_scrollbar-thickness: calc(var(--scrollbar-thickness) + var(--scrollbar-offset) * 2);
+  --_scrollbar-thickness: calc(var(--INTERNAL-scrollbar-thickness) + var(--INTERNAL-scrollbar-offset) * 2);
   --_scrollbar-pointer-events: auto;
 
   // Convert margin to px value to avoid repeating calculation when used in multiple times
-  --_scrollbar-offset-px: calc(var(--scrollbar-offset) * 1px);
-  --_scrollbar-thickness-px: calc(var(--scrollbar-thickness) * 1px);
-  --_scrollbar-hover-thickness-px: calc(var(--scrollbar-hover-thickness) * 1px);
+  --_scrollbar-offset-px: calc(var(--INTERNAL-scrollbar-offset) * 1px);
+  --_scrollbar-thickness-px: calc(var(--INTERNAL-scrollbar-thickness) * 1px);
+  --_scrollbar-hover-thickness-px: calc(var(--INTERNAL-scrollbar-hover-thickness) * 1px);
 
   // Initialize viewport and content paddings
   --_viewport-padding-top: 0;
@@ -95,13 +95,13 @@
   --_viewport-overflow: auto;
 
   // Scrollbar thumb color variables used to change when hovered or dragged
-  --_thumb-x-color: var(--scrollbar-thumb-color);
-  --_thumb-y-color: var(--scrollbar-thumb-color);
+  --_thumb-x-color: var(--INTERNAL-scrollbar-thumb-color);
+  --_thumb-y-color: var(--INTERNAL-scrollbar-thumb-color);
   --_track-y-thickness: var(--_scrollbar-thickness-px);
   --_track-x-thickness: var(--_scrollbar-thickness-px);
 
   // Viewport overscroll behavior
-  --_viewport-overscroll-behavior: var(--scrollbar-overscroll-behavior);
+  --_viewport-overscroll-behavior: var(--INTERNAL-scrollbar-overscroll-behavior);
 
   // Content display, will switch to block if orientation is set to vertical
   --_scrollbar-content-width: fit-content;
@@ -148,25 +148,25 @@
 
   @include selector.HorizontalUsed {
     // Calculate the horizontal thumb size
-    --thumb-x-length: max(calc(var(--viewport-width) * var(--track-x-length) / var(--content-width)), var(--scrollbar-thumb-min-size));
+    --thumb-x-length: max(calc(var(--viewport-width) * var(--track-x-length) / var(--content-width)), var(--INTERNAL-scrollbar-thumb-min-size));
   }
 
   @include selector.VerticalUsed {
     // Calculate the vertical thumb size
-    --thumb-y-length: max(calc(var(--viewport-height) * var(--track-y-length) / var(--content-height)), var(--scrollbar-thumb-min-size));
+    --thumb-y-length: max(calc(var(--viewport-height) * var(--track-y-length) / var(--content-height)), var(--INTERNAL-scrollbar-thumb-min-size));
   }
 
   @include selector.thumbXDragging {
-    --_track-x-thickness: calc(var(--scrollbar-hover-thickness) * 1px);
-    --_thumb-x-color: var(--scrollbar-thumb-hover-color);
+    --_track-x-thickness: calc(var(--INTERNAL-scrollbar-hover-thickness) * 1px);
+    --_thumb-x-color: var(var(--INTERNAL-scrollbar-thumb-min-size));
   }
 
   @include selector.thumbYDragging {
-    --_track-y-thickness: calc(var(--scrollbar-hover-thickness) * 1px);
-    --_thumb-y-color: var(--scrollbar-thumb-hover-color);
+    --_track-y-thickness: calc(var(--INTERNAL-scrollbar-hover-thickness) * 1px);
+    --_thumb-y-color: var(var(--INTERNAL-scrollbar-thumb-min-size));
   }
 
   @include selector.isMobile {
-    --_viewport-overscroll-behavior: var(--scrollbar-mobile-overscroll-behavior);
+    --_viewport-overscroll-behavior: var(--INTERNAL-scrollbar-mobile-overscroll-behavior);
   }
 }

projects/ngx-scrollbar/src/lib/scrollbar/horizontal.scss

@@ -59,13 +59,13 @@
 
   &:hover {
     --_track-x-thickness: var(--_scrollbar-hover-thickness-px);
-    --_thumb-x-color: var(--scrollbar-thumb-hover-color);
+    --_thumb-x-color: var(var(--INTERNAL-scrollbar-thumb-min-size));
   }
 }
 
 .ng-scrollbar-thumb {
   animation-timeline: var(--_animation-timeline-x);
-  min-width: calc(var(--scrollbar-thumb-min-size) * 1px);
+  min-width: calc(var(--INTERNAL-scrollbar-thumb-min-size) * 1px);
   display: var(--_horizontal-thumb-display);
   background-color: var(--_thumb-x-color);
 }

projects/ngx-scrollbar/src/lib/scrollbar/shared.scss

@@ -33,7 +33,7 @@
   right: var(--_scrollbar-track-right);
   left: var(--_scrollbar-track-left);
   pointer-events: var(--_scrollbar-pointer-events);
-  transition: var(--scrollbar-track-wrapper-transition);
+  transition: var(--INTERNAL-scrollbar-track-wrapper-transition);
   position: absolute;
   overflow: hidden;
   display: flex;
@@ -44,8 +44,8 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--scrollbar-track-color);
-  border-radius: var(--scrollbar-border-radius);
+  background-color: var(--INTERNAL-scrollbar-track-color);
+  border-radius: var(--INTERNAL-scrollbar-border-radius);
   cursor: default;
   z-index: 1;
   order: 2;
@@ -54,8 +54,8 @@
 .ng-scrollbar-thumb {
   box-sizing: border-box;
   position: absolute;
-  transition: var(--scrollbar-thumb-transition);
-  border-radius: var(--scrollbar-border-radius);
+  transition: var(--INTERNAL-scrollbar-thumb-transition);
+  border-radius: var(--INTERNAL-scrollbar-border-radius);
   height: var(--_thumb-height);
   width: var(--_thumb-width);