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 you can configure to provide a custom UI look.

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

Custom CSS Variables

Fork Fork

In this demo the following CSS variables have been changed in the light Theme:
- 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 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

Expand to see the CSS Variables provided

:root.ab--theme-light {
  --primary-color: rgb(79, 3, 187);
  /* Dashboard colours */
  --ab-dashboard-header__background: var(--primary-color);
  --ab-dashboard__background: #e4efff;
  --ab-dashboard-gap__background: #d5e7ff;
  /* Settings Panel */
  --ab-color-defaultbackground: #fff;
}
.ab-Dashboard__title {
  font-style: italic;
}
.ab-Dashboard__toolbar-title {
  text-decoration: overline;
}
.ab-Dashboard__container--Layout button[data-name='clone'] {
  display: none;
}
.ab-Dashboard__container--Layout button[data-name='new'] {
  display: none;
}
.ab-Dashboard__container--Export button[data-name='close'] {
  display: none;
}
.ab-Dashboard__container--Export button[data-name='configure'] {
  display: none;
}
.ab-Dialog .ab-WizardDialog__footer {
  flex-direction: row-reverse;
}

CSS Variables can be referenced elsewhere in AdapTable e.g. when providing the name of a colour in an Adaptable Style.

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, and then reference them in Column Formatting.

Expand to see the CSS Variables changed in the Dark Theme and used in Format Columns

These are the 4 CSS variables that were overridden:

/* Overriding only the dark theme variables, so light theme is not broken */
:root.ab--theme-dark {
  --ab-color-success: lime;
  --ab-color-error: salmon;
  --ab-color-info: cyan;
  --ab-color-text-on-success: black;
}

These are the Format Columns provided in Initial Adaptable State:

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-all-263',
      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-264',
      Scope: {
        ColumnIds: ['week_issue_change'],
      },
      Style: {
        ForeColor: 'var(--ab-color-error)',
      },
      Rule: {
        Predicates: [{
          PredicateId: 'Negative',
        }],
      },
    },
    {
      Name: 'FormatColumn-week_issue_change-265',
      Scope: {
        ColumnIds: ['week_issue_change'],
      },
      Style: {
        ForeColor: 'var(--ab-color-success)',
      },
      Rule: {
        Predicates: [{
          PredicateId: 'Positive',
        }],
      },
    },
  ],
},

Try It Out

Switch between dark and light Themes and note how the CSS Variables which are referenced are displayed differently

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

CSS Variables Reference

In this section we provide some of the most commonly-used variables, together with their default value.

Base Variables

Listed here are the root CSS Variables.

They are generally the most popular properties to override when defining a Custom AdapTable Theme.

:root {

  /* Base units for calculations */
  --ab-base-space: 4px;
  --ab-base-font-size: 1rem;

  /* Font Sizes - calculated from the base unit */
  --ab-font-size-0: calc(var(--ab-base-font-size) * 0.5); /* 0.5rem */
  --ab-font-size-1: calc(var(--ab-base-font-size) * 0.625); /* 0.625rem */
  --ab-font-size-2: calc(var(--ab-base-font-size) * 0.75); /* 0.75rem */
  --ab-font-size-3: calc(var(--ab-base-font-size) * 0.875); /* 0.875rem */
  --ab-font-size-4: var(--ab-base-font-size); /* 1rem */
  --ab-font-size-5: calc(var(--ab-base-font-size) * 1.25); /* 1.25rem */
  --ab-font-size-6: calc(var(--ab-base-font-size) * 1.5); /* 1.5rem */
  --ab-font-size-7: calc(var(--ab-base-font-size) * 2.25); /* 2.25rem */

  /* Font Family - inherit by default */
  --ab__font-family: inherit;

  --ab-input-height: 36px;

  /* Border Radius */
  --ab__border-radius: var(--ab-base-space);

  /* Colour Variables */
  --ab-color-inputborder: var(--ab-color-primarydark);
  --ab-color-inputcolor: var(--ab-color-text-on-primary);

  --ab-color-error: #dc3545;
  --ab-color-errorlight: #ffd3d2;
  --ab-color-warn: #eb9316;
  --ab-color-info: #17a2b8;
  --ab-color-success: #419641;
  --ab-color-accent: #07c;
  --ab-color-accent-foreground: #e2e2e2;
  --ab-color-accentlight: #dbf0ff;

  --ab-color-text-on-success: white;
  --ab-color-text-on-error: white;
  --ab-color-text-on-info: white;
  --ab-color-text-on-warn: white;

  --ab-color-action-add: #2966A8;
  --ab-color-action-edit: #17a2b8;
  --ab-color-action-share: #eb9316;
  --ab-color-action-delete: #dc3545;
  --ab-color-action-clone: #419641;

  --ab-color-text-on-add: white;
  --ab-color-text-on-edit: white;
  --ab-color-text-on-share: white;
  --ab-color-text-on-delete: white;
  --ab-color-text-on-clone: white;

  --ab-color-defaultbackground: white;
  --ab-color-text-on-defaultbackground: var(--ab-color-text-on-primary);

  --ab-color-primary: #e9e9e9;
  --ab-color-primarydark: #b7b7b7;
  --ab-color-primarylight: #f5f5f5;
  --ab-color-text-on-primary: #656565;
  --ab-color-text-on-primarydark: var(--ab-color-text-on-primary);
  --ab-color-primary-foreground: var(--ab-color-text-on-primary);

  --ab-color-focus: var(--ab-color-accent);
  --ab-gridheader--filtered__background: var(--ab-color-primary);

  --ab-color-shadow: rgb(0 0 0 / 0.2);
  --ab-shadow-sm: 0 0px 3px 0 var(--ab-color-shadow), 0 1px 2px -1px var(--ab-color-shadow);
  --ab-shadow-md: 0 -2px 6px -1px var(--ab-color-shadow), 0 2px 4px -2px var(--ab-color-shadow);

  /* Focus-related */
  --ab-focus__box-shadow: 0 0px 5px 0 var(--ab-color-accent), 0 1px 2px -1px var(--ab-color-accent);
  --ab-focus-light__box-shadow: 0 0px 5px 0 var(--ab-color-accentlight), 0 1px 2px -1px var(--ab-color-accentlight);
  --ab-focus-within__box-shadow: 0 0 5px 1px var(--ab-color-text-on-primary);
  --ab-focus__outline: none;

  /* Miscellaneous */
  --ab-icon-fill: currentColor;
  --ab-custom-scrollbar-size: 10px;

  /* size of rows in virtualized list */
  --ab-grid-row-height: 35px;

  /* required for checking styles have been loaded - do not remove! */
  --ab-loaded: 777;
}

Variable Scales

AdapTable CSS uses two scales of variables (for spacing and font sizes):

Spacing is based on --ab-base-space (default 4px). All spacing in AdapTable is derived from this value using calc() (e.g. calc(var(--ab-base-space) * 2)). Override --ab-base-space to uniformly adjust all spacing.
Font sizes use --ab-font-size-0 through to --ab-font-size-7, derived from --ab-base-font-size (which defaults to 1rem). Mostly --ab-font-size-2 and --ab-font-size-3 are used and may need adjustment in your use-case.

In addition to these 2 scales of variables, we have a number of base colors, as listed above.

You will probably want to override these colour to match the colour palette of your application.

Those base colours are then reused as default values for other component-specific CSS variables.

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 ! */
}

PreviousCustom Themes NextAG Grid Themes