@mr-scroll/css-theming

The best custom scroll for the web.

This is the css-theming support package. Check here (root of this repo) for an overview on mr-scroll.

This package styles the scroll (thumb, etc) according to the active theme when using css-theming.

Install

Assuming we're using angular (if not, install the respective wrapper package instead of @mr-scroll/angular):

npm i @mr-scroll/core @mr-scroll/angular @mr-scroll/css-theming

Usage

You only need to import the SCSS file that this package includes in your global SCSS file, and call the mixin it provides:

// For example, in styles.scss

// From css-theming
@import 'css-theming/src/scss/css-theming';
// From @mr-scroll/css-theming
@import '@mr-scroll/css-theming/src/scss/css-theming';

// You can optionally provide values here.
@include msct-apply();

If you're using the SCSS module system instead:

// For example, in styles.scss

// From css-theming
@use 'css-theming/src/scss/css-theming';
// From @mr-scroll/css-theming
@use '@mr-scroll/css-theming/src/scss/css-theming' as msct;

// You can optionally provide values here.
@include msct.apply();

Example from sample here.

That's it. If you have css-theming set up properly, you'll see that the scroll's thumb changes colors as the user switches between light and dark themes.