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 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',
};

Built-in AG Grid 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 built-in themes work seamlessly with AdapTable
Switching between AdapTable's Light and Dark themes automatically switches the AG Grid theme mode as well.

Try It Out

Use the AdapTable Custom Toolbar to switch between Dark and Light (and note that the AG Grid theme mode changes accordingly)
Use the AG Grid Custom Toolbar to switch between Quartz, Alpine, Balham and Material

import {
  AdaptableApi,
  AdaptableOptions,
  ButtonStyle,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {
  Theme,
  themeAlpine,
  themeBalham,
  themeMaterial,
  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'),
          },
          {
            label: 'Material',
            onClick: (_, context) => {
              setAgGridTheme(context.adaptableApi, themeMaterial, 'Material');
            },
            buttonStyle: (_, context) => getButtonStyle('Material'),
          },
        ],
      },
    ],
  },
  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 Themes

AdapTable also supports custom AG Grid themes

Hint

Use SystemThemeOptions.AgThemeMode in SystemThemes to pair your custom AG Grid theme with a shipped AdapTable theme

AdapTable's Light and Dark themes automatically sync with AG Grid's light and dark modes.

Find Out More

See the AG Grid documentation for full information on theme modes

AG Grid Custom Theme

Fork Fork

This example registers two custom AG Grid theme modes on themeQuartz — light-red and dark-red
It pairs these themes with AdapTable's system themes via AgThemeMode

Try It Out

Switch between Light and Dark Theme in the toolbar to see the AG Grid Custom Theme change as well

PreviousReferencing Themes NextTechnical Reference