Custom CSS

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.

For simple color changes, the colorScheme 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.

Basic Usage

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

<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. 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)

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.

What Is Allowed

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

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.

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:

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

Adjust comment card appearance

.mantine-Paper-root {
  border-radius: 0;
}

Increase base font size

:root {
  font-size: 15px;
}

Reduce spacing between comments

.mantine-Stack-root {
  gap: 8px;
}

Responsive tweaks

@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:

<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.

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

Get Started

Comment Section

Overview

Basic Usage

How to Find Class Names

What Is Allowed

What Is Blocked

Size Limit

Practical Examples

Change the font

Adjust comment card appearance

Increase base font size

Reduce spacing between comments

Responsive tweaks

Combined with colorScheme

Loading a Custom Font

What customCSS Cannot Do

​Overview

​Basic Usage

​How to Find Class Names

​What Is Allowed

​What Is Blocked

​Size Limit

​Practical Examples

​Change the font

​Adjust comment card appearance

​Increase base font size

​Reduce spacing between comments

​Responsive tweaks

​Combined with colorScheme

​Loading a Custom Font

​What customCSS Cannot Do

Overview

Basic Usage

How to Find Class Names

What Is Allowed

What Is Blocked

Size Limit

Practical Examples

Change the font

Adjust comment card appearance

Increase base font size

Reduce spacing between comments

Responsive tweaks

Combined with colorScheme

Loading a Custom Font

What customCSS Cannot Do