IONIC 4 ion-content inner-scroll scrollbar color/theme w/ Electron app

Question

The following is my attempt to theme the scrollbars:

/* width */
::-webkit-scrollbar {
  width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333 !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #111 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #111 !important;
}

However, this has not made any impact and I'm still getting the same default windows/chrome scrollbars.

Can someone please advise.

Answer 1

1. create a scrollbar directive

   import { NgModule, Directive, ElementRef } from '@angular/core';
   @Directive({
     selector: '[appScrollbarTheme]'
   })
   export class ScrollbarThemeDirective {
     constructor(el: ElementRef) {
       const stylesheet = `
         ::-webkit-scrollbar {
         width: 10px;
         }
         ::-webkit-scrollbar-track {
         background: #0f0f0f;
         }
         ::-webkit-scrollbar-thumb {
         border-radius: 1rem;
         background: linear-gradient(var(--ion-color-light-tint), var(--ion-color-light));
         border: 4px solid #020202;
         }
         ::-webkit-scrollbar-thumb:hover {
         }
       `;
   
       const styleElmt = el.nativeElement.shadowRoot.querySelector('style');
   
       if (styleElmt) {
         styleElmt.append(stylesheet);
       } else {
         const barStyle = document.createElement('style');
         barStyle.append(stylesheet);
         el.nativeElement.shadowRoot.appendChild(barStyle);
       }
   
     }
   }
   
   
   @NgModule({
     declarations: [ ScrollbarThemeDirective ],
     exports: [ ScrollbarThemeDirective ]
   })
   export class ScrollbarThemeModule {}
   

2. add this to app.module

   import { ScrollbarThemeModule } from './scrollbar-theme.directive'; @NgModule({ imports: [ScrollbarThemeModule] })

3. in your html

   <ion-content appScrollbarTheme>

Answer 2

There is an open issue for this in the Ionic GitHub repository, as of now, it is unresolved (not known to be possible): https://github.com/ionic-team/ionic/issues/17685