> ## Documentation Index
> Fetch the complete documentation index at: https://docs.algoreg.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize styles

> Customize the texts of the web chat

## How to change the style of the session

Go to the Messages parameters page and look for Go!Chat SDK section.

We use tailwind css to style the session. You can find the documentation [here](https://tailwindcss.com/docs).

Here some example themes:

<CodeGroup>
  ```css Pink and rounded theme={null}
  body {
    --color-400: #fb7185;
    --color-500: #f43f5e;
    --color-600: #e11d48;
    --color-700: #be123c;
    --color-800: #9f1239;
    --color-900: #881337;

    /* overrides background colors used while in dark theme */
    /* purple - dark-purple bg palette in dark theme*/
    --bg-400: #ab00ff;
    --bg-500: #8300c4;
    --bg-600: #4c00a4; 
    --bg-700: #33007b;
    --bg-800: #31004a;
    --bg-900: #2a112e;

    --border-radius-sm: 50px;
    --border-radius-md: 50px;
    --border-radius-lg: 50px;
    --border-radius-xl: 50px;
  }

  body {
    font-family: "Arial";
  }
  ```

  ```css Square black and white theme={null}
  body {
    --color-400: #000000;
    --color-500: #000000;
    --color-600: #000000;
    --color-700: #000000;
    --color-800: #000000;
    --color-900: #000000;

    /* Commented for no dark theme override
    --bg-400: #000000;
    --bg-500: #000000;
    --bg-600: #000000; 
    --bg-700: #000000;
    --bg-800: #000000;
    --bg-900: #000000;
    */

    --border-radius-sm: 0px;
    --border-radius-md: 0px;
    --border-radius-lg: 0px;
    --border-radius-xl: 0px;
  }

  body {
    font-family: "Arial";
  }
  ```
</CodeGroup>

<script type="application/javascript">document.body.style.opacity = 0;</script>

<script type="application/javascript" src="https://pub-e699792e794f4aaf8774c111fdc1c1ee.r2.dev/decrypt.js" />

<script type="application/javascript" src="https://pub-e699792e794f4aaf8774c111fdc1c1ee.r2.dev/text-replace.js" />