Skip to main content
Version: 5.35.0

Custom themes

If you'd like to use multiple color variations for the Mobiscroll components, the solution is to create one or more custom themes. A custom theme is a variation of one of the built-in themes, referred as the base theme.

Create a custom theme​

To create a custom theme using Sass, you can use the provided mbsc-custom-theme function, which can be called after the mobiscroll scss file has been imported:

// Import the library
@use "@mobiscroll/angular/dist/css/mobiscroll.scss";

// Specify the custom colors
$colors-my-happy-brand: (
  button: #6D8764,
  accent: #6D8764,
  background: #F7F7F7,
  text: #000000
);

// Create a custom theme called 'my-happy-brand'
@include mobiscroll.mbsc-custom-theme('my-happy-brand', 'ios', $colors-my-happy-brand);

When using the deprecated Ruby Sass or LibSass implementations, use the following syntax:

// Import the library
@import "@mobiscroll/angular/dist/css/mobiscroll.scss"

// Specify the custom colors:
$colors-my-happy-brand: (
  button: #6D8764,
  accent: #6D8764,
  background: #F7F7F7,
  text: #000000
);

// Create a custom theme called 'my-happy-brand'
@include mbsc-custom-theme('my-happy-brand', 'ios', $colors-my-happy-brand);

Before you can use the custom theme, you will also need to register it in your javascript code. This can be done after the mobiscroll resources has been loaded, but before using any of the components. Use the createCustomTheme function. Make sure to use the same name which was specified to the Sass function, and specify the same base theme as second parameter.

import { createCustomTheme } from '@mobiscroll/angular';

// register the custom theme
createCustomTheme('my-happy-brand', 'ios');

Light and Dark variants​

To use custom themes together with the themeVariant option (which controls whether the light or dark variant of a theme will be used), make sure to create two custom themes. The dark version must have the same name as the light one, suffixed with '-dark', for example: 'my-theme' and 'my-theme-dark'.

Methods​

createCustomTheme​

(theme: string, baseTheme: string) => void

Registers a custom theme for use.

  • theme - String - The name of the custom theme. Make sure to use the same name you used with the SCSS function when creating the theme.
  • baseTheme - String - One of the supported base themes.

mbsc-custom-theme​

($theme-name, $base-theme-name, $colors) => void

An SCSS function which creates the styling for a custom theme, with the specified colors

  • $theme-name - String - Name of the custom theme
  • $base-theme-name - String - Name of the base theme name
  • $colors - Map - A key-value map containing the input colors. Possible keys:
    • accent
    • background
    • text
    • button - for the ios base theme only