Styling FastTrack Widgets with ThemeBuilder

ThemeBuilder is a cloud-based tool that allows developers to customize the visual appearance of their KendoReact applications through CSS-based themes. It enables users to modify colors, typography, borders, and other elements without writing CSS/Sass, offering live previews before exporting ready-to-use theme files.

Most FastTrack widgets are pre-styled using Kendo theme variables and will automatically adapt to whichever KendoReact theme is active in your application. Important: Widgets will not display any default styling until a Kendo theme is installed.

While this guide primarily describes using ThemeBuilder for styling FastTrack Widgets, some widgets — like the NetworkGraph and Timeline — have styling options that are applied independently. See Styling Styling NetworkGraph and Timeline Widgets for details.

Using ThemeBuilder with FastTrack

Installing a Theme

To apply styling to FastTrack widgets, install a KendoReact theme package (e.g. “kendo-theme-default”):

  npm install @progress/kendo-theme-default

Then import it in your application's entry point (e.g., App.jsx or index.js):

import '@progress/kendo-theme-default/dist/all.css';

Example Before a Theme is Installed

Example After a Theme is Installed (Kendo Default Theme)

Customizing Themes

You can choose to customize widget colors, typography, borders and more by also creating your own theme using the ThemeBuilder:

Step One: Create Your Custom Theme

1. Go to ThemeBuilder:

2. Use ThemeBuilder to customize Kendo theme variables. (colors, fonts, spacing, etc.)

3. Export your theme - this will download as a ZIP file. (e.g., my-custom-theme.zip)

Step Two: Add Theme to Your Application

1. Unzip the downloaded theme folder.

2. Copy the unzipped folder to your application directory. (e.g., ./my-custom-theme)

3. Run npm install once from within the unzipped custom theme folder.

   Your project structure should look like:

   Copy

   your-app/
   ├── src/
   ├── public/
   ├── my-custom-theme/    ← Your custom theme folder
   │   ├── dist/
   │   ├── scss/
   │   └── package.json
   └── package.json
   

4. Install the custom theme as a dependency.

   Copy

   {
     "dependencies": {
       "my-custom-theme": "file:./my-custom-theme",
       // ...other dependencies
     }
   }
   

5. Import your custom theme in your application entry point. (e.g., App.jsx or index.js):

   Copy

     import 'my-custom-theme/dist/all.css'; 
   

All FastTrack widgets should automatically reflect your custom theme colors.

Fine-Tuning Widget Variable Colors

If a specific widget's color doesn't match your desired design after applying a theme, you have two options. Before visiting the below options, first check the widget documentation for any dedicated styling props. For instance, certain widgets (e.g. Avatar, Button, DataGrid and more) come with a style prop that takes in a CSS object which would override any existing theme styling to that component.

Option 1: Adjust Theme Variables

1. Inspect the widget element in your browser to identify which Kendo variable it uses. (e.g., var(--kendo-color-primary))

2. Open your theme in ThemeBuilder (this should be available from the ThemeBuilder Dashboard as soon as you login). For more info on getting a ThemeBuilder project started, see the following: First Steps with ThemeBuilder

3. Modify the corresponding variable to use a different color value. (e.g., $kendo-color-primary)

4. Export and reinstall the updated theme.

Option 2: CSS Override

Add specific overrides in your application's stylesheet using !important:

.my-widget-class {
  background-color: #your-color !important;
}

Styling NetworkGraph and Timeline Widgets

The NetworkGraph and Timeline widgets are built on third-party components that do not automatically inherit KendoReact themes. These widgets require separate styling through their own props and color configuration options.

Styling the NetworkGraph

While individual nodes and links can be styled (see the Interactive Node Gallery in FastTrack Storybook for details), the NetworkGraph canvas itself is customizable through the options prop.

Canvas Styling: Use the backgroundColor property to set the canvas background color. For example, to create a dark theme, set backgroundColor to a dark color value.

Navigation Controls: The controlTheme property styles the navigation controls and overview window. You can either:

• Use a preset theme by setting controlTheme to light or dark

• Provide a custom color value to the controlColor property

Example night mode configuration:

options: {
  backgroundColor: '#3d4852',
  controlTheme: 'dark',
  overview: true
}

Styling the Timeline

Individual attributes of the Timeline can be customized through the options prop to match your application’s theme. Below are examples of light/dark theme configurations for the Timeline, beginning with style options for various elements such as general appearance (background, focus, highlights), scales/scaleGuide (time axes and guide lines), entities, events etc.

Light Theme Example:

options: {
    backgroundColor: '#FFFFFF',
    focus: {
      backgroundColor: '#E5EDFF',
    },
    scales: {
      borderColor: '#aaaaaa',
      textColor: '#000000',
    },
    highlightColor: '#888888',
    scaleGuide: {
      lineColor: '#000000',
      textColor: '#000000',
    },
    controls: {
      deleteAnnotation: {
        backgroundColor: '#dddddd',
        color: '#000000',
        hoverBackgroundColor: '#E5EDFF',
        hoverColor: '#0035BD',
      },
      editAnnotation: {
        backgroundColor: '#dddddd',
        color: '#000000',
        hoverBackgroundColor: '#E5EDFF',
        hoverColor: '#0035BD',
      },
      lens: {
        color: '#0035BD',
      },
    },
    entities: {
      labelBackgroundColor: '#FFFFFF',
    },
    events: {
      heatmapColor: '#8747A9',
    },
  },
  entityTypes: {
    default: {
      color: '#888888',
      labelColor: '#000000',
    },
  },
  eventTypes: {
    default: {
      color: '#8747A9',
    },
  },
  charts: {
    color: '#8747A9',
    labelColor: '#000000',
  },
  annotations: {
    borderColor: '#eeeeee',
    fillColor: '#eeeeee',
    labelColor: '#000000',
    borderWidth: 2,
    connectorStyle: {
      color: '#000000',
    },
  },

Dark Theme Example:

options: {
    backgroundColor: '#0a0a0a',
    focus: {
      backgroundColor: '#421900',
    },
    scales: {
      borderColor: '#777777',
      textColor: '#ffffff',
    },
    highlightColor: '#ffffff',
    scaleGuide: {
      lineColor: '#ffffff',
      textColor: '#ffffff',
    },
    entities: {
      labelBackgroundColor: '#0a0a0a',
    },
    events: {
      heatmapColor: '#E6C700',
    },
    controls: {
      deleteAnnotation: {
        backgroundColor: '#2f2f2f',
        color: '#ffffff',
        hoverBackgroundColor: '#421900',
        hoverColor: '#D15000',
      },
      editAnnotation: {
        backgroundColor: '#2f2f2f',
        color: '#ffffff',
        hoverBackgroundColor: '#421900',
        hoverColor: '#D15000',
      },
      lens: {
        color: '#D15000',
      },
    },
    entityTypes: {
      default: {
        color: '#aaaaaa',
        labelColor: '#ffffff',
      },
    },
    eventTypes: {
      default: {
        color: '#E6C700',
      },
    },
    charts: {
      color: '#FFDD00',
      labelColor: '#ffffff',
    },
    annotations: {
      borderColor: '#1f1f1f',
      fillColor: '#1f1f1f',
      labelColor: '#FFFFFF',
      borderWidth: 2,
      connectorStyle: {
        color: '#FFFFFF',
      },
    }
  };