Loading Themes Without Internet Access

18 Jun 20251 minute to read

Syncfusion’s default Material theme incorporates Google fonts, which typically require internet access. For offline environments, Syncfusion® provides an offline-theme file to reference Material styles with local fonts, ensuring the components function seamlessly without internet connectivity.

Material Theme Package

The ej2-material-theme package offers a way to use styles without online font dependencies, through an offline-theme file available as an NPM package. Below are the steps to utilize this package.

Adding the Material Theme Package

Install the ej2-material-theme package in your application using the following command:

npm i @syncfusion/ej2-material-theme

To use the ej2-material-dark theme, run:

npm i @syncfusion/ej2-material-dark-theme

Importing Styles

After installation, import the styles into your application by specifying the link path to your styles folder, ensuring it excludes references to the Roboto font.

@import '../node_modules/@syncfusion/ej2-material-theme/styles/offline-theme/material.css';

Loading Offline Theme for Tailwind

Similar to the Material theme, an offline theme is also available for Tailwind users. This option lets you fully leverage the Tailwind theme’s benefits without requiring Google Font references.

Tailwind Theme Package

As with the material-theme package, the ej2-tailwind-theme allows for style referencing without the online font through an offline-theme file, available as an NPM package. Follow the steps below to use this package.

Adding the Tailwind Theme Package

Install the ej2-tailwind-theme package using:

npm install @syncfusion/ej2-tailwind-theme

To utilize the ej2-tailwind-dark theme, use:

npm install @syncfusion/ej2-tailwind-dark-theme

Importing Styles

Post-installation, import the styles into your application by including the style path in the styles folder, consciously avoiding Roboto font references.

@import '../node_modules/@syncfusion/ej2-tailwind-theme/styles/offline-theme/tailwind.css';

Syncfusion® understands the necessity for offline-capable applications and offers an offline-theme file referencing themes with local fonts. This strategy guarantees a smooth user experience, making components adaptability possible even in environments with limited or no internet access.