---
title: "Upgrading from the Legacy CSS files"
framework: angular
version: "36.1.0"
---

# Upgrading from the Legacy CSS files

The Legacy CSS files are deprecated and will be removed from the Grid in a future major release. The new CSS files are 100% backwards compatible and upgrading should be as simple as changing an import path.

> **Warning**
>
> If you upgrade an app from v27 to v29+ without changing the import paths for CSS and Sass (.scss) files then the paths will be invalid and the themes won't work.
>
> Follow the instructions in this document to upgrade.

## Updating the CSS import paths

There are many ways to import CSS, but however you are doing this in your app you need to delete the `/dist` part from the path. For example if you're using the jsdelivr CDN:

```html
<!-- old path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community@36.1.0/dist/styles/ag-grid.css" />
```

```html
<!-- new path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community@36.1.0/styles/ag-grid.css" />
```

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AG Grid</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
    <div id="myGrid" class="ag-theme-alpine"></div>
    <script src="//https://cdn.jsdelivr.net/npm/browse/ag-grid-community@36.1.0/dist/ag-grid-community.min.js"></script>
    <!-- Style added after AG Grid bundle -->
    <style>
        .ag-theme-alpine {
            --ag-foreground-color: deeppink;
            --ag-header-column-separator-color: orange;
         }
    </style>
    <script src="main.js"></script>
    </body>
</html>
```

## Dark themes

In v27 there were separate CSS files for the light and dark versions of provided themes, e.g. `ag-theme-alpine.css` and `ag-theme-alpine-dark.css`.

In v28 both light and dark versions of themes are included in one file, so if you were previously including `ag-theme-alpine-dark.css`, change it to `ag-theme-alpine.css`. If you were previously including both files, remove the dark file.
