# 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.
