> For the complete documentation index, see [llms.txt](https://docs.wproofreader.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wproofreader.com/v6.12.0/integrations/how-tos/how-to-customize-the-look-and-feel-of-wproofreader.md).

# How to customize the look and feel of WProofreader?

Besides using the already available **default** and **gray** themes, with the release v5.5.8 (March 26, 2020) we added an option for our customers to create a **custom** theme for WProofreader. You will be able to overwrite the default styles and adjust the look and feel of WProofreader to the style of your product.

1\. Add **theme** option to the config and specify **custom** as a value.

```javascript
<script>
    window.WEBSPELLCHECKER_CONFIG = {
        ...
        theme: 'custom',
        ...
    }
</script>
```

2\. Create you custom CSS styles to overwrite the default theme of WProofreader.

```javascript
<style>
    .wsc-theme-custom .wsc-badge__label-button {
        background-color: blue !important;
    }
</style>
```

#### Examples of current styles for main UI elements <a href="#howtocustomizethelookandfeelofwproofreader-examplesofcurrentstylesformainuielements" id="howtocustomizethelookandfeelofwproofreader-examplesofcurrentstylesformainuielements"></a>

Below are examples of current CSS styles for UI elements that you might want to overwrite with your custom styles.

**Spinner inside badge**

```javascript
.wsc-badge--checking .wsc-badge__label-button {
    ...
    background-image: url(svg/spinner.svg) !important;
    ...
}
```

**Underlines for spelling and grammar type suggestions**

```javascript
.wsc-spelling-problem {
    ...
    border-bottom: 2px solid rgba(234,28,35,.65)!important;
    ...
}

.wsc-grammar-problem {
    ...
    border-bottom: 2px solid rgba(0,98,231,.65)!important;
    ...
}
```

**Hovered state of spelling and grammar type suggestions**

```javascript
.wsc-spelling-problem.wsc-problem-text--active {
    background-color: rgba(234,28,35,.15);
}

.wsc-grammar-problem.wsc-problem-text--active {
    background-color: rgba(0,98,231,.15);
}
```