AdapTable Version:

Framework:

Providing Custom Themes

Summary

Users can create custom themes to complement the Shipped Themes provided by AdapTable
Custom Themes primarily consist of sets of CSS Variables
These build on the base Theme provided by AdapTable
Typically you will want to override just a few of these values (primarily colours or spacing) to create a new Theme

AdapTable provides 2 System Themes - light and dark.

If neither of these Themes are to your liking it is straightforward write a Custom Theme.

Hint

It is also possible to customize a System AdapTable Theme by overriding the CSS variables
Just a few CSS variable changes can create a distinctive look without needing to provide a custom theme

Providing a Custom Theme

Fork Fork

This demo contains a Custom Theme called GrayDay which includes changes to some of the key colours to provide a Grayish Theme
The demo also contains changes to AG Grid row and header css to ensure everything matches

Defining Custom Themes

When AdapTable applies a theme, it creates the ab--theme-<THEME_NAME> css className.

This is set on the document's HTML element.

Caution

This means that only one theme can be applied at any given time

Developer Guide

Defining a Custom Theme

For defining a custom theme, make sure you follow the steps below:

In this example we are creating a new theme called 'blue'.

/* Set the blue theme */
html.ab--theme-blue {
  --ab-theme-loaded: blue;
}

1

Create the ab--theme selector

Create html.ab--theme-<THEME_NAME> selector

This is where you will add your CSS variables

The value for THEME_NAME is that of the Theme's name

html.ab--theme-blue {
  --ab-theme-loaded: blue;
  --ab-color-primary: #062444;
  --ab-color-accent: #797979;
  --ab-color-primarylight: white;
}

2

Override base CSS Variables as required

Override any CSS variable default values as required, so you can create your desired look and feel.

Important

Relatively few CSS Variables need to be provided to create a new Theme
For instance, AdapTable's Dark Theme contains just 25 variables, all of which are colour overrides

// Create a Custom Theme called 'blue'
// Use the Light Theme as the Variant
const initialState: InitialState = {
  Theme: {
    UserThemes: [
      {
        Name: 'blue',
        Description: 'Blue Theme',
        Variant: 'light',
      },
    ],
  },
};

3

Add details of the Theme to Theme Initial Adaptable State

Add the User Theme to Theme Initial State.

Provide 3 properties:

Name - a familiar string which can be used as a css className (cannot contain whitespace characters)
Description - a small description of the Theme
Variant - optional prop to say which of AdapTable's System Themes (light or dark) to use to inherit non-overriden css variables

Note

If a Variant is provided, the AG Grid theme will be set to match the System Theme

// Set User Theme be the Current Theme
const initialState: InitialState = {
  Theme: {
    UserThemes: [
      {
        Name: 'blue',
        Description: 'Blue Theme',
        Variant: 'light',
      },
    ],
    CurrentTheme: 'blue',
  },
};

4

(Optionally) Set the User Theme to be Current Theme

Set User Theme to be Current Theme if you wish it to be applied at Start-Up

Key Theme Variables

There are hundreds of CSS variables available in AdapTable.

However, typically, only a few important variables, usually regarding colours and fonts, are required when creating a new Theme.

Hint

Generally you will only need to override a few CSS variables to change colours and spacing
Start incrementally, and work your way up as needed

Theme Colours

Below are the most important colours that are used to create a theme.

We show the values AdapTable uses for them in the Light and Dark Themes.

Variable	Where Used	Light	Dark
--ab-color-defaultbackground	Colours most UI controls
--ab-color-text-on-defaultbackground	Font colour used in most UI controls
--ab-color-primary	Colour of Toolbars and Toolpanels
--ab-color-primarydark	Border colour for most UI Controls
--ab-color-primarylight	Colours Dashboard and most Panels
--ab-color-text-on-primary	Main AdapTable font colour
--ab-color-primary-foreground	Used in Editors and Wizards
--ab-color-text-on-primarydark	Used (sparingly) in some tables
--ab-color-shadow	Colours backdrop behind popups
--ab-color-filtered-columns	Font colour for Filtered Columns Headers
--ab-color-filtered-columns-background	Back colour for Filtered Columns Headers

Other Colours

There are a number of other core, colour-related variables that can be used when setting a theme.

Note

All these variables have the same value in both AdapTable's light and dark themes

Variable	Description	Value
--ab-color-accent	Back Colour in Dashboard and Panel Headers
--ab-color-accent-foreground	Font Colour in Dashboard and Panel Headers
--ab-color-accentlight	Shadow for Toggle Buttons
--ab-color-focus	Sets focus for Checkboxes
--ab-color-inputborder	Border Colour for many UI controls
--ab-color-inputcolor	Colour for many inputs
--ab-color-error	Used in Error Messages & Notifications
--ab-color-text-on-error	Font colour for Error Messages
--ab-color-warn	Used in Warning Messages & Notifications
--ab-color-text-on-warn	Font colour for Warning Messages
--ab-color-info	Used in Info Messages & Notifications
--ab-color-text-on-info	Font colour for Info Messages
--ab-color-success	Used in Success Messages & Notifications
--ab-color-text-on-success	Font colour for Success Messages
--ab-color-action-edit	Colour of Edit Button
--ab-color-text-on-edit	Font Colour for Edit Button
--ab-color-action-share	Colour of Share Button
--ab-color-text-on-share	Font Colour for Share Button
--ab-color-action-delete	Colour of Delete Button
--ab-color-text-on-delete	Font Colour for Delete Button
--ab-color-action-clone	Colour of Clone Button
--ab-color-text-on-clone	Font Colour for Clone Button

Spacing

All spacing in AdapTable is based on the --ab-base-space variable.

This defaults to 4px.

Spacing in the application is derived from this value using calc() (e.g. calc(var(--ab-base-space) * 2)).

Hint

You can uniformly adjust all spacing by overriding the value of --ab-base-space

Font Sizes

AdapTable also supports a scale for font size, providing 8 different font sizes.

These are derived from --ab-base-font-size (which defaults to 1rem) and are used as follows:

Font Size	Calculation	Rem Equivalent
--ab-font-size-0	calc(var(--ab-base-font-size) * 0.5)	0.5 rem
--ab-font-size-1	calc(var(--ab-base-font-size) * 0.625)	0.625 rem
--ab-font-size-2	calc(var(--ab-base-font-size) * 0.75)	0.75 rem
--ab-font-size-3	calc(var(--ab-base-font-size) * 0.875)	0.875 rem
--ab-font-size-4	var(--ab-base-font-size)	1 rem
--ab-font-size-5	calc(var(--ab-base-font-size) * 1.25)	1.25 rem
--ab-font-size-6	calc(var(--ab-base-font-size) * 1.5)	1.5 rem
--ab-font-size-7	calc(var(--ab-base-font-size) * 2.25)	2.25 rem

Hint

In practice only are --ab-font-size-2 and --ab-font-size-3 are used
So these are the ones you may need to adjust for your use-case

Font Family

By default AdapTable inherits the Font it will use.

This is done using the --ab__font-family CSS Variable which defaults to inherit.

Hint

Override this variable if you wish to specify a font to be used

PreviousTheming the UI NextCSS Variables