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

# Custom CSS

> Style the embedded comment section to match your site's design using the customCSS configuration field.

## Overview

The `customCSS` field in `window.theAnimeCommunityConfig` lets you inject CSS rules that are applied inside the embedded comment section iframe. This allows you to change fonts, spacing, border radii, and other visual properties beyond what the `colorScheme` options expose.

<Note>
  For simple color changes, the [`colorScheme`](/comment-section/customize) options are the easiest path and require no knowledge of internal class names. Use `customCSS` when you need finer-grained control that `colorScheme` does not cover.
</Note>

## Basic Usage

Add a `customCSS` string to your configuration object before loading the embed script:

```html theme={null}
<script>
  window.theAnimeCommunityConfig = {
    MAL_ID: '1',
    episodeChapterNumber: '1',
    customCSS: `
      .mantine-Avatar-root {
        border-radius: 4px;
      }
      .mantine-Paper-root {
        border-radius: 8px;
      }
    `
  };
</script>

<script
  src="https://theanimecommunity.com/embed.js"
  id="anime-community-script"
  defer
></script>

<div id="anime-community-comment-section"></div>
```

## How to Find Class Names

The comment section is built with [Mantine](https://mantine.dev/). Mantine components expose stable, predictable class names on their root elements. Open your browser's developer tools, click **Inspect** on any part of the embedded comment section, and look for `class` attributes beginning with `mantine-`.

Common examples:

| Class                      | Element                             |
| -------------------------- | ----------------------------------- |
| `.mantine-Avatar-root`     | User avatar image                   |
| `.mantine-Paper-root`      | Comment cards and section wrapper   |
| `.mantine-Button-root`     | Buttons (submit, sort, etc.)        |
| `.mantine-Textarea-root`   | Comment input area                  |
| `.mantine-Text-root`       | Text elements                       |
| `.mantine-ActionIcon-root` | Icon buttons (like, dislike, reply) |

<Warning>
  Mantine class names are stable within a major version but **may change between major version upgrades**. If your custom CSS stops working after an update, re-inspect the elements to find the new class names.
</Warning>

## What Is Allowed

All standard CSS property-value pairs are permitted unless the value contains a resource-loading function (see below).

<Warning>
  Hiding/obscuring the "The Anime Community" logo at the bottom right of the comment section is not allowed. Doing so will have your domain blocked.
</Warning>

## What Is Blocked

The following are silently stripped from your CSS before it is applied. Rules or declarations that are blocked are simply ignored; the rest of your CSS is still applied normally.

| Construct                                                                     |
| ----------------------------------------------------------------------------- |
| `url(...)` in any value                                                       |
| `@import`                                                                     |
| `@font-face`                                                                  |
| `image-set(...)`                                                              |
| `cross-fade(...)`                                                             |
| `element(...)`                                                                |
| `expression(...)`                                                             |
| `@counter-style`, `@namespace`, `@layer`, and all other unrecognised at-rules |

## Size Limit

The `customCSS` string is limited to **50,000 characters** (approximately 50 KB). Strings exceeding this limit are silently discarded in their entirety; no partial CSS is applied.

## Practical Examples

### Change the font

System fonts and generic font families work without needing to load any external files:

```css theme={null}
.mantine-Text-root,
.mantine-Textarea-input,
.mantine-Button-label {
  font-family: Georgia, 'Times New Roman', serif;
}
```

### Adjust comment card appearance

```css theme={null}
.mantine-Paper-root {
  border-radius: 0;
}
```

### Increase base font size

```css theme={null}
:root {
  font-size: 15px;
}
```

### Reduce spacing between comments

```css theme={null}
.mantine-Stack-root {
  gap: 8px;
}
```

### Responsive tweaks

```css theme={null}
@media (max-width: 600px) {
  .mantine-Avatar-root {
    width: 28px;
    height: 28px;
  }
}
```

### Combined with colorScheme

`customCSS` and `colorScheme` can be used together. `colorScheme` handles the high-level color tokens and `customCSS` handles everything else:

```html theme={null}
<script>
  window.theAnimeCommunityConfig = {
    MAL_ID: '1',
    episodeChapterNumber: '1',
    colorScheme: {
      backgroundColor: '#0f0f0f',
      primaryColor: '#e50914',
      primaryTextColor: '#f5f5f5',
    },
    customCSS: `
      .mantine-Paper-root {
        border-radius: 2px;
      }
      .mantine-Avatar-root {
        border-radius: 2px;
      }
    `
  };
</script>
```

## Loading a Custom Font

Because `url()` and `@import` are blocked in `customCSS`, you cannot load external fonts directly from a CSS string. Instead, use the `fontUrl` field to load a font from Google Fonts or Bunny Fonts.

```javascript theme={null}
window.theAnimeCommunityConfig = {
  MAL_ID: '1',
  episodeChapterNumber: '1',
  fontUrl: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
  customCSS: `
    * { font-family: 'Roboto', sans-serif; }
  `
};
```

The `fontUrl` is validated before use. Only URLs from the following origins are accepted; all others are silently ignored:

* `https://fonts.googleapis.com`
* `https://fonts.bunny.net`

***

## What customCSS Cannot Do

| Goal                                                        | Why it is not possible                                                        | Alternative                                                          |
| ----------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Load a font from an arbitrary CDN                           | Only `fonts.googleapis.com` and `fonts.bunny.net` are whitelisted             | Use `fontUrl` with a supported font provider                         |
| Load a self-hosted font file                                | `url()` is blocked and no arbitrary origins are whitelisted                   | Host via Google Fonts or Bunny Fonts, or use a system font           |
| Style elements outside the comment section                  | The iframe is cross-origin; CSS inside it cannot reach your page's DOM        | Style those elements with your own site's CSS                        |
| Override styles using `!important` on inline Mantine styles | Mantine sets some styles inline, which take precedence over class-based rules | Use the `colorScheme` options which override the theme at its source |