# Advanced theme style overrides

This section shows how to apply theme overrides to the MapStore theme (for example change button primary theme states).
This kind of overrides are considered advanced customizations and should be used only if the new CSS variable theme system is not covering your use case or for additional custom pages.

## Setup the theme dependencies

Navigate to the `src/my_geonode/static/` directory and edit the `package.json` file to include scripts and dependencies

```diff
{
  "name": "my_geonode",
  "version": "0.0.1",
  "author": "GeoNode Developers",
  "description": "Static code and assets for my_geonode",
  "contributors": [],
  "scripts": {
    "test": "jshint **.js",
+   "compile-less": "lessc -x ./less/site_base.less ./css/site_base.css",
+   "watch-less": "less-watch-compiler ./less/ ./css/ site_base.less"
  },
  "license": "BSD",
  "private": "false",
  "dependencies": {
+   "bootstrap": "3.4.1"
  },
  "devDependencies": {
    "del": "*",
    "gulp": "^3.9.0",
    "gulp-concat": "*",
    "gulp-less": "*",
    "gulp-util": "*",
+   "less": "4.1.2",
+   "less-watch-compiler": "1.16.3",
    "path": "*"
  }
}
```

Install npm dependencies inside the `static/` folder

```cmd
npm install
```

Verify that all the style previously added only in the `src/my_geonode/static/less/site_base.css` are also copied in the `src/my_geonode/static/less/site_base.less` file

To complete the setup we need also to add the compiled css to the custom_theme.html template

Create the `src/my_geonode/templates/geonode-mapstore-client/snippets/custom_theme.html` template file and include the link tag to the new style overrides

```django
{% extends "geonode-mapstore-client/snippets/custom_theme.html" %}
{% block content %}
<link href="{{ STATIC_URL }}css/site_base.css" rel="stylesheet"/>
<style>
    /* copy here the rules provided in dark theme variables file */
</style>
{% endblock %}
```

## Customize the theme

Run the watch command to listen to all the changes on the less file

```cmd
npm run watch-less
```

Add to the `src/my_geonode/static/less/site_base.less` file the following code to change the colors of primary and success buttons

```less
// import the utils/mixins from bootstrap without compile the whole style
@import (reference) "../node_modules/bootstrap/less/bootstrap.less";

// all the style for mapstore client should be wrapped inside the .msgapi class
.msgapi {
    // use the .button-variant function from bootstrap to apply the correct style to the primary and success style
    .btn-primary {
        .button-variant(#1b1b1b; #ffa632; #ac6f1f;);
    }
    .btn-success {
        .button-variant(#ffffff; #2ea372; #0f774c;);
    }
    // add other overrides if needed
}
```
Refresh the browser and verify that the buttons in the viewer has changed color

## Compile the final css file

Once we are ready with the customizations of the theme we can run the compile script to get the minified css file (`src/my_geonode/static/less/site_base.css`)

```cmd
npm run compile-less
```

**Warning**: the compile and watch scripts will replace all the content of the `css` file with the one compiled from the `less` file.


Note: if you are using docker you will need to open the django container terminal and run the collectstatic in the my_geonode directory to see the changes in the UI

#### [Next Section: Add a new plugin extension](005_EXTENSION.md)