Skip to main content
Wildcat Docs
Chat Overlay

Themes & appearance

Generate a theme from a description, then adjust colors, fonts, and how messages appear.

Customization & Themes

You can change the look of the overlay in the config panel or in the Chat Scene Creator.

Configuration Options: There are two ways to change the settings:
  1. Web Chat Scene Creator (Recommended): Set channel connections, fonts, themes, colors, and layouts on the web. The Chat Scene Creator sends each saved change to OBS live.
  2. OBS Config Panel: In OBS, right-click the Browser Source. Then select Interact. Move the pointer over the chat. Then click the settings gear (). Settings that you change here stay local to this OBS source.
  3. The overlay saves the settings of each scene source automatically.

Automatic AI Themes

The overlay has an AI theme generator. In the config panel, type a description of the look that you want (for example, "cyberpunk neon night" or "cozy wooden cabin"). The overlay makes the CSS variables, adjusts the color contrast, sets matching pronoun badge colors, and applies the theme live.

Use the theme carousel to select a preset theme, an AI theme, or a custom theme. The carousel stores up to 50 saved themes. You can delete a custom theme. The overlay asks you to confirm the deletion. The active theme is the same on every page.

Custom Theme Presets

You can save your current visual settings as a named theme preset. You can save a preset from the Chat Scene Creator or from the config panel. Presets go to the cloud theme carousel.

  • Cloud Sync & Deletion: The overlay removes duplicate presets, backs them up to the cloud, and lets you delete them.
  • Background Image Support: In the Chat Scene Creator, a preset saves your uploaded background image. In the config panel, a preset uses the background image of the active theme.

Color Customization

You can set the color of every chat element. Enter a hex color code (for example #FF5500). Swatches show your current colors. For a transparent background, enter transparent or a hex code with an alpha value.

Tip: Search the web for "color picker" to find an interactive color tool. Copy the hex code and paste it into the settings field.

Available Color Settings

  • Background Color: The main background of chat messages. Use it with the background opacity slider to control transparency.
  • Border Color: The border around chat message bubbles.
  • Text Color: The color of chat message text.
  • Username Color: The default color of usernames. Turn on Override User Colors to apply your color to all usernames.
  • Timestamp Color: The color of the message timestamps.
  • Pronoun Badge Color: The color of the pronoun badge next to a username. You can set it to the timestamp color.
  • Background Opacity: Sets the opacity of the message background, from 0% (fully transparent) to 100%.
  • Background Image Upload & Opacity: Upload a background image in the Chat Scene Creator. Set its opacity with the background image opacity slider.
  • Chroma Key Mode: Sets a solid green background for green screen keying in OBS.

Google Fonts & Typography

You can set the font style, the font size, and the layout limits to match your stream layout.

Use the font picker to search Google Fonts and select one. The overlay loads the font stylesheet live in the preview and in OBS.

Typography & Layout Settings

  • Font Size: Sets the font size, from 10px to 40px.
  • Font Weight: Select Normal, Bold, 500, 600, 700, or 800 Extra Bold.
  • Border Radius: Select a border radius preset (0px, 8px, 16px, or 24px).
  • Box Shadow: Select a shadow depth preset (None, Soft, Simple 3D, Intense 3D, or Sharp).
  • Text Shadow: Select a text shadow preset (None, Soft, Sharp, Outline, Strong, or Glow).
  • Chat Dimensions: Sets the width (20% to 100%) and the height (20% to 100%) of the chat container.

Display Modes & Animations

Select Window mode (a continuous scrolling list) or Popup mode (message bubbles that disappear). Message entry and exit animations use the Web Animations API, so they stay smooth.

Popup Animation Directions & Controls

In Popup mode, you can set the entry direction of a message: From Bottom, From Top, From Left, or From Right. You can also set the message duration (2 to 60 seconds) and the maximum popup count (1 to 10). Popup messages stay visible while you change settings, so you can see the result.

Reduced Motion Support

The overlay obeys the prefers-reduced-motion setting of the system. When this setting is on, Window mode has no entry animation, and Popup mode uses the shortest transition.