@syncfusion/blazor-themes
Version:
This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.
61 lines (38 loc) • 4.18 kB
Markdown
# blazor-themes
The Blazor Themes package contains SCSS files for all themes supported by Syncfusion Blazor components. These SCSS files customize theme variables using a web compiler. The package includes component SCSS files and single SCSS files.
## Setup
Use the following command to install.
```sh
npm install @syncfusion/blazor-themes
```
## Usage
You can reference themes or customize themes for Syncfusion Blazor components in Blazor applications. Follow these steps to customize a theme:
1. After installing the package, create a SCSS file in the Static Web Assets folder (e.g., `~/wwwroot/styles/custom.scss`). Next, define the [theme variables](https://blazor.syncfusion.com/documentation/appearance/theme-studio#common-variables) to override and import the theme as shown in the following.
In the following code, the primary theme variable color is changed.
For all components:
```scss
$primary: blue !default;
@import 'blazor-themes/SCSS-Themes/fluent.scss';
```
For the Calendar (individual) component:
```scss
$primary: blue !default;
@import 'blazor-themes/SCSS-Themes/calendars/calendar/fluent.scss';
```
2. Compile the SCSS file to a CSS file using [Visual Studio Web Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler) or any other extension and add the compiled CSS file to the `<head>` element of the Host page.
```cshtml
<head>
...
...
<link href="~/styles/custom.css" rel="stylesheet" />
</head>
```
3. Run the application to see the customized Fluent theme applied.
Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn more about the Blazor Themes in Syncfusion Components.
## [License](LICENSE)
This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/eula/es/). You can purchase a license [here](https://www.syncfusion.com/sales/products/) or start a free 30-day trial [here](https://www.syncfusion.com/sales/products/).
A free [community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
© Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
## About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 26,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today, we provide 1600+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components/), [ASP.NET Core](https://www.syncfusion.com/blazor-components/), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/), [Angular](https://www.syncfusion.com/angular-ui-components/), [React](https://www.syncfusion.com/react-ui-components/), [Vue](https://www.syncfusion.com/react-ui-components), and [Flutter](https://www.syncfusion.com/flutter-widgets/)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls/), [Flutter](https://www.syncfusion.com/xamarin-ui-controls/), [UWP](https://www.syncfusion.com/uwp-ui-controls/), and [JavaScript](https://www.syncfusion.com/uwp-ui-controls/)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls/), [WPF](https://www.syncfusion.com/wpf-controls/), [WinUI](https://www.syncfusion.com/wpf-controls/), [Flutter](https://www.syncfusion.com/flutter-widgets/) and [UWP](https://www.syncfusion.com/uwp-ui-controls/)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.