Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mr-scroll/css-theming) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.