1. Install the plugin

#

Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside scripts that are needed for its full functioning:

      import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
      import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
      import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';

      Vue.use(KThemePlugin);

      trackInputModality();
      trackMediaType();
    

• Makes theme values available in two forms: as reactive objects on every Vue instance ($themeBrand, $themeTokens, $themePalette, $computedClass) for use in JavaScript, and as CSS variables (--tokens-*, --brand-*, --palette-*) emitted to a <style> tag with #k-theme-css-variables in the document head for use in style blocks. Both stay in sync when the theme changes via setBrandColors() or setTokenMapping(). See Colors .
• Provides $coreOutline, $inputModality, $mediaType, and $isPrint computed properties as well as $print method to all Vue instances.
• Globally registers all KDS Vue components.
• Inserts assertive and polite ARIA live regions #k-live-region to an application's document body (see useKLiveRegion ).
• Inserts the overlay container element #k-overlay to an application's document body (see KOverlay or search for appendToOverlay prop on components).

2. Register global styles

#

Import KDS styles in the main application stylesheet:

      @import '~kolibri-design-system/lib/styles/common';
    

3. Initialize theme

#

Until this section is better documented, refer to Kolibri's initializeTheme.js.