Porsche Design System

Theme

Table of Contents

Usage
Example

We provide a custom theme for the AG Grid library for cases where a more sophisticated table is required beyond the capabilities of our p-table component. This theme is aligned with the Porsche Design System's visual language and ensures consistency across your application.

The Porsche Design System AG Grid theme is based on the default AG Grid theme, ag-theme-quartz, and is available in both light (default) and dark mode controlled by CSS color-scheme.

For more information on AG Grid's base themes, you can refer to the official AG Grid Themes documentation.

Usage#

1. Import the Theme

First, import the Porsche Design System AG Grid theme into your application:

import { pdsTheme } from '@porsche-design-system/components-{js|angular|react|vue}/ag-grid';

2. Apply the Theme

You can apply the theme using one of the following methods:

Global Grid Options (Applies to all grid instances)

Use global grid options to set the theme globally:

import { provideGlobalGridOptions } from 'ag-grid-community';

provideGlobalGridOptions({ theme: pdsTheme });

Individual Grid Options (Overrides global options):

Set the theme for a specific grid instance:

const gridOptions = { theme: pdsTheme };

Component Prop Assignment

Pass the theme directly as a prop:

<AgGridReact theme={pdsTheme} />

3. Change the Theme Mode

By default, the Porsche Design System AG Grid theme uses a light color scheme. You can control the color scheme by setting CSS color-scheme: light;, color-scheme: dark; or color-scheme: light dark; on any parent element of the grid, such as the <html> or <body> tag.

Available Modes:

Light Mode (default) → Set color-scheme: light; (optionally).

Dark Mode → Set color-scheme: dark;.

Auto Dark Mode → Set color-scheme: light dark;.

<body style="color-scheme: light;"></body>

Example#

This example is currently in development and will be added soon.

Example Coming Soon