# 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);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wproofreader.com/integrations/how-tos/how-to-customize-the-look-and-feel-of-wproofreader.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.