Fluent Theme Overview
The Kendo UI for Angular Fluent theme is part of the Kendo UI for Angular library of UI components. It is distributed through NPM under the kendo-theme-fluent package.
Installation
-
Download and install the Kendo UI Fluent theme package.
npm install --save @progress/kendo-theme-fluent -
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.
You can download and add the font in the following way:
<style>
body { font-family: "Segoe UI", sans-serif; }
</style>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 Default 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.
