Theming

Aidkit provides multiple ways to customize the appearance of the support form to match your brand.

In-App Color Configuration

The easiest way to customize colors is through the Aidkit dashboard. Navigate to Settings > Config to access the color configuration panel.

Available Color Options

CSS Customization

For more advanced customization, you can target Aidkit's CSS classes directly. All Aidkit elements are prefixed with aidkit- to avoid conflicts with your existing styles.

Example: Custom Styling

/* Customize the main form container */
.aidkit-form-container {
  font-family: "Inter", sans-serif;
}

/* Customize input fields */
.aidkit-input,
.aidkit-textarea {
  border-radius: 8px;
}

/* Customize the submit button */
.aidkit-submit-button {
  border-radius: 9999px;
  font-weight: 600;
}

/* Customize form labels */
.aidkit-label {
  font-size: 0.875rem;
  font-weight: 500;
}

Using CSS Variables

Aidkit uses CSS custom properties that you can override:

.aidkit-form-container {
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
}

Dark Mode

Aidkit automatically inherits your color configuration. For dark mode support, you can either:

1. Set up a separate color configuration for dark mode in the dashboard
2. Use CSS to override colors based on your dark mode class:

.dark .aidkit-form-container {
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
}

Preset Themes

You can apply preset themes through the dashboard:

• Light - Clean, minimal light theme
• Dark - Modern dark theme
• System - Automatically matches user's system preference