Styling Color and Font

Change the overall color scheme and appearance of data.

The grid exposes many CSS --ag-*-color variables that affect the color of elements. --ag-font-size
and <code>‑‑ag-font-family<code> control the default font for the grid.

Example

.ag-theme-alpine {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}

The above code would apply to every grid with the ag-theme-alpine. In this example, we also add a .color-font class
so that it will only apply to this example.

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

Example with grid and font colors

Key Color Variables

Some of the most important color variables are listed below. For the full list check the
full CSS variables reference,
every color variable is ends with .-color.
These variables take CSS Color as value, like red, #fff or rgb(126, 46, 132)

CSS Variable Description
<p>--ag-alpine-active-color<p> (Alpine theme only) accent color used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme.
<p>--ag-balham-active-color<p> (Balham theme only) accent color used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme.
<p>--ag-material-primary-color<p> (Material theme only) the primary color as defined in the Material Design color system. Currently this is used on buttons, range selections and selected tab underlines in the Material theme.
<p>--ag-material-accent-color<p> (Material theme only) the accent color as defined in the Material Design color system. Currently this is used on checked checkboxes in the Material theme.
<p>--ag-foreground-color<p> Color of text and icons in primary UI elements like menus.
<p>--ag-background-color<p> Background color of the grid.
<p><code>‑‑ag‑secondary‑foreground‑color<code><p> Color of text and icons in UI elements that need to be slightly less emphasized to avoid distracting attention from data.
<p>--ag-data-color<p> Color of text in grid cells.
<p>--ag-header-foreground-color<p> Color of text and icons in the header.
<p>--ag-header-background-color<p> Background color for all headers, including the grid header, panels etc.
<p>--ag-disabled-foreground-color<p> Color of elements that can’t be interacted with because they are in a disabled state.
<p>--ag-odd-row-background-color<p> Background color applied to every other row.
<p>--ag-row-hover-color<p> Background color when hovering over rows in the grid and in dropdown menus. Set to transparent to disable the hover effect. Note: if you want a rollover on one but not the other, use CSS selectors instead of this property.
<p>--ag-border-color<p> Color for border around major UI components like the grid itself, headers, footers and tool panels.
<p>--ag-row-border-color<p> Color of the border between grid rows, or transparent to display no border.

There are a lot of color variables - the easiest way to find the variable that colors a specific element is often to
inspect the element in your browser’s developer tools and check the value of its color or background-color properties.

Color Blending, Sass and CSS

The Sass
API Color Blending
feature will automatically generate a few default values for color variables based on the ones that you define. If
you’re using CSS you may want to set these values yourself for a consistent color scheme:

Generating Semi-Transparent Colors

To make a semi-transparent version of a color, you can use one of these techniques. If your color is defined as a
6-digit hex value (#RRGGBB) convert it to an 8-digit hex value (#RRGGBBAA). If your color is defined as a rgb
value (rgb(R,G,B)) add a fourth value to specify opacity (rgb(R,G,B,A)).

So for example, the color deeppink is hex #FF1493 or rgb rgb(255, 20, 147).
- 10% opaque: #8800EE1A or rgb(255, 20, 147, 0.1)
- 20% opaque: #8800EE33 or rgb(255, 20, 147, 0.2)
- 30% opaque: #8800EE4D or rgb(255, 20, 147, 0.3)
- 40% opaque: #8800EE66 or rgb(255, 20, 147, 0.4)
- 50% opaque: #8800EE80 or rgb(255, 20, 147, 0.5)