New to Kendo UI for Vue? Start a free 30-day trial

Fluent Theme Overview

The Kendo UI for Vue Fluent theme is part of the Kendo UI for Vue library of UI components. It is distributed through NPM under the kendo-theme-fluent package.

Installation

  1. Download and install the Kendo UI Fluent theme package.

    npm install --save @progress/kendo-theme-fluent
  2. For the next steps that include alternative approaches for theme installation, refer to the instructions in the article on styling in Kendo UI.

Dependencies

For the Kendo UI Fluent theme to closely implement the Fluent Design System, provide the Segoe UI font family.

By default, the Fluent theme uses the Segoe UI font family but the font itself is not included in the theme package.

To include the Segoe UI font in your project, follow these steps:

  1. Download the Segoe UI font from Microsoft. The download includes the Segoe UI Regular, Segoe UI Italic, Segoe UI Bold, and Segoe UI Bold Italic font files.
  2. Add the downloaded font files to your project's assets folder.

For Vue, make sure that the folder is included in the public directory.

  1. In your HTML file or global style sheet, add the following code to include the font:
<style>
  @font-face {
    font-family: 'Segoe UI';
    src: url('/src/assets/segoeui.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
</style>

Make sure to replace the path in the url property with the actual path to the downloaded font file in your project.

  1. Finally, update the CSS code in your file to use the Segoe UI font:
<style>
  body { font-family: "Segoe UI", sans-serif; }
</style>

That's it! The Segoe UI font will now be applied to your project.

Dynamic customization

The Kendo UI Fluent theme utilizes CSS custom properties (variables) which allows for dynamic customization without needing to recompile the theme.

The Kendo UI Fluent theme exposes root variables that are globally available:

<style>
  :root { --kendo-font-size: 20px; }
</style>

As well as variables targeting specific components:

<style>
  .k-button { --kendo-button-bg: hotpink; }
</style>

All of the custom properties available with the Kendo UI Fluent theme are prefixed with --kendo to avoid conflicts with third party libraries.

Preview

To apply the Fluent theme to any of the examples on this website, use the theme chooser drop-down at the top-right corner of the example. The Material theme styling is loaded by default.

To simultaneously preview multiple components from different packages, to build your own theme, or to customize any of the available Kendo UI ones, use the capabilities of the Kendo UI Theme Builder web application.