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.
shnpm 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.
To include the Segoe UI font in your project, follow these steps:
- 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.
- Add the downloaded font files to your project's assets folder. For Angular, make sure that the folder is included in the assets section of the
angular.json
file. - 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>
The @font-face
rule should be added to the styles.css
or style.scss
file in the src
folder of your Angular project.
Make sure to replace the path in the url
property with the actual path to the downloaded font file in your project.
- 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 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.