Scrollbar not applying theme

[MSMetzger]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior:

Scrollbars in nebular 4.6.0 are not applying theme. This applies to all scrollbars except for the scrollbar on NbSidebar.

Expected behavior:

Scrollbars should apply theme, as they did in Nebular 3.6.2 and as the scrollbar on NbSidebar still does.

Steps to reproduce:

To see how it currently is: Go to NbListComponent in 4.6.0, make sure that version 4.6.0 is selected and switch between themes in the first basic example. Note how toolbar remains unchanged by the theme switching. This is especially notable on dark and cosmic theme.

To see how it should be: Go to NbListComponent in 3.6.2 and switch between themes in the first basic example.

Related code:

Other information:

npm, node, OS, Browser

OS: macOs Catalina, Windows 10, Browser: Chrome, Safari

Angular, Nebular

[idoash4]

@MSMetzger Were you able to find a workaround?

[azazlhr]

Found anything?

[luischueneuien]

You can add to themes.scss

sidebar-scrollbar-width: 0.5rem,
sidebar-scrollbar-color: color-basic-500,

[jgomesmv]

I'm also facing the same issue. This variables don't have any effect on the scrollbar in any component: scrollbar-color: color-basic-500, scrollbar-background-color: color-basic-200, scrollbar-width: 0.5rem,

The documentation also lacks information about this subject. Is it possible to improve it in the future?

[jgomesmv]

It seems that the problem is related with the scrollbar mixin. For some reason it doesn't work with the sass ampersand... As a workaround we have two solutions:

1 - Put this on your global styles file:

  ::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  ::-webkit-scrollbar-thumb {
    background: $fg;
    cursor: pointer;
    border-radius: $border-radius;
  }

  ::-webkit-scrollbar-track {
    background: $bg;
  }

  // TODO: remove
  // For Internet Explorer
  scrollbar-face-color: $fg;
  scrollbar-track-color: $bg;

2 - Create your own scrollbar mixin and use wherever you need (globally or per component):

@mixin app-scrollbars($fg, $bg, $size, $border-radius: $size / 2) {
  ::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  ::-webkit-scrollbar-thumb {
    background: $fg;
    cursor: pointer;
    border-radius: $border-radius;
  }

  ::-webkit-scrollbar-track {
    background: $bg;
  }

  // TODO: remove
  // For Internet Explorer
  scrollbar-face-color: $fg;
  scrollbar-track-color: $bg;
}

Hope it helps!

[Aaron-Linkforce]

Hope it helps!

Hey @jgomesmv, thanks for that. Unfortunately for me I couldn't get my environment to read the variables for the mixin, so I ended up adapting the styles and adding this in override.scss to emulate the basic look and feel of the inbuilt scrollbar like so:

::-webkit-scrollbar {
    width: 0.4rem;
  }

  ::-webkit-scrollbar-thumb {
    background:  nb-theme(background-basic-color-4);
    cursor: pointer;
    border-radius: 0.4rem;
  }

 ::-webkit-scrollbar-track {
    background: nb-theme(background-basic-color-2);
  }