Theming using CSS Variables

Summary

All AdapTable components exposes CSS Variable
This can be configured by developers to provide a custom UI look or theme for the AdapTable instance
There are a huge number of css variables that are available
For easy identification purposes every CSS Variable starts with either --ab- or --ab__

Every UI element in AdapTable exposes a CSS Variable, that can be overriden or replaced as neeed.

Feedback

We aim for comprehensive CSS-variable coverage, where all elements can meet your bespoke requirements
If you find an element which cannot be configured as you wish, please contact Support and we will rectify

This allows developers to provide a custom UI look by configuring just a few lines of CSS, while still using one of the Themes ('light' or 'dark') provided by AdapTable.

Find Out More

It is also possible to provide an entirely new Theme to complement or replace the System Themes

Custom CSS Variables

Fork Fork

In this demo the following CSS variables have been changed in the light Theme (the dark theme is unchanged):
- Changes to the One Page Wizard
- Dashboard uses error color (Red) and the Title is italicised
- Active navigation item in the Settings Panel is blue with a yellow background
- The Finish and Cancel buttons in all Wizards have been reversed
The following CSS Variable changes have been made to the Toolbar in the Dashboard
- All Names have a line above them
- The Close and Configure buttons at bottom of Export Toolbar are not available
- The New and Clone buttons inside the Layout Toolbar is removed

Styling Objects

CSS Variables can be referenced elsewhere in AdapTable if required.

For instance they can by used when providing the name of a colour in an Adaptable Style.

Hint

This allows you to provide different implementations for the variable for each Theme you support

CSS Variables in Objects

Fork Fork

In this demo we override 4 CSS Variables in the dark Theme:
- --ab-color-success: lime;
- --ab-color-error: salmon;
- --ab-color-info: cyan;
- --ab-color-text-on-success: black;
We then reference these variables in 3 Column Format Style objects we create

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'CSS Variables in Objects',
  userInterfaceOptions: {
    colorPalette: (currentTheme: string) => {
      return currentTheme === 'light'
        ? [
            'var(--ab-color-success)',
            'var(--ab-color-info)',
            'var(--ab-color-error)',
            'purple',
            'pink',
          ]
        : [
            'var(--ab-color-success)',
            'var(--ab-color-info)',
            'var(--ab-color-error)',
            'yellow',
            'orange',
          ];
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['SettingsPanel', 'Theme'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Theme'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Theme'],
        },
      ],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'week_issue_change',
            'github_stars',
            'github_watchers',
            'topics',
            'license',
            'has_wiki',
            'created_at',
            'pushed_at',
            'updated_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-language-HTML',
          Scope: {
            All: true,
          },
          Style: {
            BackColor: 'var(--ab-color-info)',
            ForeColor: 'var(--ab-color-text-on-success)',
          },
          Rule: {
            BooleanExpression: "[language]='HTML'",
          },
        },
        {
          Name: 'formatColumn-week_issue_change-negative',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-error)',
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Negative',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-week_issue_change-positive',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-success)',
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Positive',
              },
            ],
          },
        },
      ],
    },
  },
};

Styling Icons

Adaptable uses inline SVG for icons, since that's very performant and doesn't require any additional download.

However, you might want to style icons differently - in this case, you can customize that through css.

Every icon has the ab-Icon css class, and also ab-Icon--NAME where NAME is the name of the icon.

So for example, if you want to use a background image, you can do the following:

.ab-Icon--build path {
  visibility: hidden; /* to hide the contents of the actual SVG */
}
.ab-Icon--build {
  background-image: url(...);
  background-size: cover;
}

Using SASS

When using sass, in order to use sass variables as values for css properties, you have to use interpolation:

$theme-color: #fea7ff;

html.ab--theme-light {
  --ab-cmp-dashboardpanel_header__background: #{$theme-color}; /* use interpolation ! */
}

Date Picker

One common UI element that is often themed in the AdapTable is the Date Picker.

This appears when you edit a cell, or create a Column Filter, in a Date Column.

CSS Variables for Date Picker

Fork Fork

In this demo we provide a set of custom CSS Variables for the Date Picker
We provide one set for each of the AdapTable System Themes: Light and Dark

PreviousCustom Themes NextAG Grid Themes