AG Grid Themes

Summary

AdapTable supports all AG Grid built-in themes - both in dark and light mode
It works out of the box with both the AG Grid Theming API and Legacy Theming

AdapTable works naturally with any AG Grid theme, and there is nothing extra that is required.

Theming API

AdapTable (since Version 20) fully supports AG Grid's Theming API (introduced in AG Grid 33):

import { GridOptions, themeQuartz } from 'ag-grid-community';

const options: GridOptions = {
    // ...
    theme: themeQuartz,
};

AdapTable additionally continues to support AG Grid's "legacy theming" (which was the default until v.32):

const options: GridOptions = {
    // ...
    theme: 'legacy',
};

AG Grid Built-in Themes

AdapTable works seamlessly with all built-in AG Grid themes - Quartz, Balham, Material and Alpine.

For each theme, AdapTable automatically switches between AG Grid's light and dark theme modes, to keep them in sync with AdapTable's own Light and Dark Themes.

AG Grid Themes

Fork Fork

This example shows how all AG Grid themes work seamlessly with AdapTable: switching between AdapTable's Light and Dark themes automatically switches the AG Grid theme as well.

Try It Out

Switch between Dark and Light Themes in AdapTable (or pick the OS Theme) and note that the AG Grid theme changes accordingly

import {
  AdaptableApi,
  AdaptableOptions,
  ButtonStyle,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {Theme, themeAlpine, themeBalham, themeQuartz} from 'ag-grid-enterprise';

let currentAgThemeName = 'Quartz';

const setAgGridTheme = (
  adaptableApi: AdaptableApi,
  agTheme: Theme,
  themeName: string
) => {
  adaptableApi.agGridApi.setGridOption('theme', agTheme);
  currentAgThemeName = themeName;
};

const getButtonStyle = (themeName: string): ButtonStyle => ({
  variant: currentAgThemeName === themeName ? 'raised' : 'outlined',
  tone: currentAgThemeName === themeName ? 'success' : 'neutral',
});

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adaptable Demo',

  dashboardOptions: {
    customToolbars: [
      {
        name: 'Adaptable Theme',
        title: 'Adaptable',
        toolbarButtons: [
          {
            label: 'Light',
            onClick: (_, context) =>
              context.adaptableApi.themeApi.loadLightTheme(),
            buttonStyle: (_, context) => {
              const currentThemeName =
                context.adaptableApi.themeApi.getCurrentTheme();
              return {
                variant: currentThemeName === 'light' ? 'raised' : 'outlined',
                tone: currentThemeName === 'light' ? 'info' : 'neutral',
              };
            },
          },
          {
            label: 'Dark',
            onClick: (_, context) =>
              context.adaptableApi.themeApi.loadDarkTheme(),
            buttonStyle: (_, context) => {
              const currentThemeName =
                context.adaptableApi.themeApi.getCurrentTheme();
              return {
                variant: currentThemeName === 'dark' ? 'raised' : 'outlined',
                tone: currentThemeName === 'dark' ? 'info' : 'neutral',
              };
            },
          },
        ],
      },
      {
        name: 'AG Grid Theme',
        title: 'AG Grid',
        toolbarButtons: [
          {
            label: 'Quartz',
            onClick: (_, context) =>
              setAgGridTheme(context.adaptableApi, themeQuartz, 'Quartz'),
            buttonStyle: (_, context) => getButtonStyle('Quartz'),
          },
          {
            label: 'Alpine',
            onClick: (_, context) => {
              setAgGridTheme(context.adaptableApi, themeAlpine, 'Alpine');
            },
            buttonStyle: (_, context) => getButtonStyle('Alpine'),
          },
          {
            label: 'Balham',
            onClick: (_, context) => {
              setAgGridTheme(context.adaptableApi, themeBalham, 'Balham');
            },
            buttonStyle: (_, context) => getButtonStyle('Balham'),
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {
      CurrentTheme: 'dark',
    },
    Dashboard: {
      Tabs: [
        {
          Name: 'Themes',
          Toolbars: ['Adaptable Theme', 'AG Grid Theme'],
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'description',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
        },
      ],
    },
  },
};

Custom AG Grid Theme

AdapTable also supports custom AG Grid themes. You can create your own custom theme by following the AG Grid documentation. You can then pair the custom AG Grid theme with one of AdapTable's themes using the AdaptableTheme.AgThemeMode property.

Hint

AdapTable themes automatically sync with AG Grid themes using the following default mapping:

AdapTable Light theme → AG Grid light mode
AdapTable Dark theme → AG Grid dark mode

For available theme modes, see the AG Grid documentation.

AG Grid Custom Theme

Fork Fork

This example shows how to create a custom AG Grid theme (dark-red) and pair it with AdapTable's Dark theme.

Try It Out

Switch between Dark and Light Themes in AdapTable and note that the AG Grid theme changes accordingly, applying the custom dark-red theme when AdapTable is in Dark mode.

PreviousCSS Variables NextTechnical Reference