Theming & Customization

AI Anywhere's theming system lets you customize how your Helper looks and feels. From button colors to fonts, you can make the Helper blend seamlessly with your site's design or stand out with your brand colors. You can design your own light and dark modes by customizing colors and styles to match your site's appearance.

Button Color Customization

The Helper button color is one of the most visible customization options. You can set it to match your brand or site theme.

Setting Button Color

In your Helper configuration in the dashboard, navigate to the Theme settings. Here you can set the primary button color using:

• Color picker: Choose a color visually from the color picker interface
• Hex code: Enter a specific hex color code (e.g., #4B0076 for purple, #007bff for blue)
• RGB values: Specify RGB values if you prefer (automatically converted to hex)

/* Example: Setting button color to brand purple */
Button Color: #4B0076

Label Color

The label text color (the text that appears on the button) automatically adjusts for contrast based on your button color. If your button is dark, the text will be light; if light, the text will be dark. This ensures readability while maintaining your chosen aesthetic.

Creating Light and Dark Modes

While AI Anywhere doesn't include a pre-built dark mode, you can design your own light and dark theme implementations by customizing button colors, text colors, and other styling options to match your site's design.

Designing Dark Mode

To create a dark mode appearance for your Helper:

• Use darker button colors: Choose dark colors (e.g., #1a1a1a, #2d3748) for dark-themed sites
• Adjust text colors: Ensure proper contrast for readability - dark buttons with light text, or customize label colors
• Match your site's palette: Select colors that align with your dark mode color scheme

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>

The button color you configure in your dashboard will determine the appearance. Use darker colors for dark modes, lighter colors for light modes.

Font Family Customization

You can customize the font family used by the Helper to match your site's typography. This includes the button text and any Helper interface elements.

Setting Font Family

In your Helper configuration in the dashboard, navigate to Theme settings where you can select from a variety of font families including:

• Web-safe fonts (Arial, Helvetica, Georgia, Times New Roman)
• Modern sans-serif fonts (Inter, Roboto, Open Sans, Lato)
• Serif fonts (Merriweather, Playfair Display)

The Helper will use the selected font family for all text elements, ensuring visual consistency with your site's design.

Button Styles: Rounded vs. Square

Choose between rounded (pill-shaped) and square button styles to match your site's design language.

Rounded Buttons

Rounded buttons have fully rounded corners, giving them a modern, friendly appearance. This style works well with contemporary designs and softer brand aesthetics.

Square Buttons

Square buttons have sharp, minimal corners that align with more geometric, structured designs. They convey a professional, corporate feel.

Color Code Examples

Here are some common color codes you might use:

• Purple: #4B0076 (AI Anywhere default)
• Blue: #007bff
• Green: #28a745
• Red: #dc3545
• Yellow: #ffc107
• Gray: #6c757d

Design Best Practices

Preview Before Deploying

Before making your Helper live, use the preview feature in your dashboard to see exactly how your customizations will look. This helps you:

• Verify color choices match your brand
• Check readability and contrast
• Ensure the button style fits your site's aesthetic
• Test your custom light and dark mode designs if applicable

Remember: After making theme changes in your Helper configuration, regenerate your snippet to get the updated code with your new theme settings, then update your site with the new snippet.