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();
    

• Installs $themeBrand, $themeTokens $themePalette, and $computedClass helpers on all Vue instances (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.
• Emits theme values as CSS variables (--tokens-*, --brand-*, and --palette-*) to a <style> tag #k-theme-css-variables in an application's document head so that styles can reference them directly, for example var(--tokens-primary). The variables are updated whenever the theme changes via setBrandColors() or setTokenMapping().
• 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.