Loading Themes Without Internet Access

19 Aug 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 that references Material styles with local system fonts, ensuring components render properly without internet connectivity.

Material Theme Package

The @syncfusion/ej2-material-theme package includes an offline-theme option that eliminates online font dependencies. Follow these steps to implement this offline theme in your application:

  1. Install the material theme package:
npm i @syncfusion/ej2-material-theme

For the Material dark theme, install the appropriate package:

npm i @syncfusion/ej2-material-dark-theme
  1. Import the offline theme styles in your application’s global styles file:
@import '../node_modules/@syncfusion/ej2-material-theme/styles/offline-theme/material.css';

Tailwind Theme Package

Similar to the Material theme, Syncfusion provides an offline version of the @syncfusion/ej2-tailwind-theme that works without Google Font references.

  1. Install the Tailwind theme package:
npm install @syncfusion/ej2-tailwind-theme

For the Tailwind dark theme, use:

npm install @syncfusion/ej2-tailwind-dark-theme
  1. Import the offline Tailwind theme styles in your application’s global styles file:
@import '../node_modules/@syncfusion/ej2-tailwind-theme/styles/offline-theme/tailwind.css';

Syncfusion® provides these offline-theme options to ensure a consistent user experience across all deployment environments. The offline themes use system fonts that closely match the aesthetic of the online versions, making components visually appealing even in environments with limited or no internet access.