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

If neither of the System Themes are to your liking it is easy write a Custom Theme.

Hint

If you only need to customize the appearance of the standard AdapTable themes (Light and Dark), you can achieve this by overriding the CSS variables in your own CSS file, without creating a new custom theme.

Custom Theme

Fork Fork

This demo contains a Custom Theme called HighContrast which includes a number of changes both to AdapTable and AG Grid including:
- Dashboard background
- Settings Panel background and Navigation colours
- Date Picker colours
- AG Grid row and header colours

Expand to see the Custom Theme that was provided

This is how the Theme is provided in Initial State:

initialState: {
  Theme: {
    UserThemes: [
      {
        Name: 'HighContrast',
        Description: 'High Contrast Theme',
        Variant: 'light'
      },
    ],
    CurrentTheme: 'HighContrast'
  },
},

and this is the css that was provided:

/*  Custom Variables */
html.ab--theme-HighContrast {
  --ab-theme-loaded: HighContrast;
  --high-contrast-background: #003767;

  /* Dashboard */
  --ab-dashboard-header__background: var(--high-contrast-background);
  --ab-dashboard-gap__background: var(--high-contrast-background);
  --ab-dashboard__background: #f4faff;

  /* Settings Panel */
  --ab-cmp-adaptable-popup__box-shadow: 2px 3px 9px 0px rgb(1 38 102 / 69%);

  /* Settings Panel Navigation */
  --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px dashed
    #000;

  /* General */
  --ab-color-text-on-primary: #000;

  /* Date picker */
  --ab-cmp-datepicker__background: #fff;
  --ab-cmp-datepicker__selected-color: #000;
  --ab-cmp-datepicker__selected-text-color: #fff;
  --ab-cmp-datepicker__selected-border-radius: 2px;
  --ab-cmp-datepicker__day-border-radius: 2px;
  --ab-cmp-datepicker__border: 1px solid #000;
  --ab-cmp-datepicker__cell-size: 25px;

  /* ag grid  */
  --ag-header-background-color: #fff;
  --ag-odd-row-background-color: #e4e4e4;
  --ag-row-border-color: #fff;
  --ag-border-color: #000;
  --ag-foreground-color: #000;
}

html.ab--theme-HighContrast .ab-Adaptable-Popup {
  border: 1px solid #000;
}

Find Out More

Technical Reference provides a a full list of CSS Variables in AdapTable

Defining Custom Themes

Note

When AdapTable applies a theme, it sets the ab--theme-<THEME_NAME> css className on document HTML element
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 3 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;
}

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

Override base CSS Variables as required

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

Hint

Generally you will only need to override a few CSS variables to change colours and spacing.

Note

Relatively few CSS Variables need to be provided to create a new Theme
For example, the dark theme AdapTable ships with is under 25 lines of CSS code, all of them being colour overrides
Start incrementally, and work your way up as needed - use dark theme code in DeepDive below as an example

// Create a Custom Theme called 'blue'
// And set it as the Current Theme
// And change AG Grid to a theme that matches
const initialState: InitialState = {
  Theme: {
    UserThemes: [
      {
        Name: 'blue',
        Description: 'Blue Theme',
        Variant: 'light',
      },
    ],
    CurrentTheme: 'blue',
  },
};

Add details of the Theme to Theme Initial Adaptable State

Provide the Name and Description properties in Theme Initial State.

The Name cannot contain whitespace characters and must be a string which can be used as a css className.

The Variant property is recommended to be set to one of AdapTable's System Themes (light or dark). By doing this:

the custom theme will inherit the base CSS variables from the System Theme
the AG Grid theme will be set to match the System Theme (light or dark)

Deep Dive

Anatomy of the Dark Theme

This is the code below which AdapTable itself uses to create the Dark Theme.

As can be seen, only a few variables need to be provided - though there are many more which can be used (see CSS Variables) for more information).

@layer adaptable.theme {
  .ab--theme-dark {
    --ab-theme-loaded: dark;

    --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */

    --ab-color-defaultbackground: #3e444c;
    --ab-color-text-on-defaultbackground: #e2e2e2;

    --ab-color-primary: #262d2f;
    --ab-color-primarylight: #3d3e3f;
    --ab-color-primarydark: #1c2021;
    --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */

    --ab-color-inputcolor: var(--ab-color-text-on-primary);
    --ab-cmp-input__color: var(--ab-color-inputcolor);
    --ab-cmp-input__background: var(--ab-color-defaultbackground);
    --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
    --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);

    --ab-color-shadow: rgb(255 255 255 / 0.45);
    --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);

    --ab-dashboard__border: #555;
    --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;

    --ab-gridheader--filtered__background: var(--ab-color-defaultbackground);

    --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
    --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);

    input[type='number'].ab-Input::-webkit-outer-spin-button,
    input[type='number'].ab-Input::-webkit-inner-spin-button {
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
        no-repeat center center;
    }
  }
}

That's all the css you have to write for defining a theme - in fact, you can choose which of the above colors/variables to define - you don't have to define them all.

PreviousTheming NextCSS Variables

Framework: