CSS Theming | Aidkit Docs

For advanced customization beyond the dashboard color settings, you can target Aidkit's CSS classes directly to style the form to match your brand.

CSS Classes

All Aidkit elements have CSS classes prefixed with aidkit- to avoid conflicts with your existing styles.

Form Structure

Class	Target
`aidkit-form-container`	Main form wrapper
`aidkit-form-card`	Form card
`aidkit-form-header`	Header section
`aidkit-form-title`	Title text
`aidkit-form-content`	Content sections
`aidkit-form-footer`	Footer section

Form Fields

Class	Target
`aidkit-field-topic`	Topic field wrapper
`aidkit-field-severity`	Severity field wrapper
`aidkit-field-name`	Name field wrapper
`aidkit-field-email`	Email field wrapper
`aidkit-field-subject`	Subject field wrapper
`aidkit-field-message`	Message field wrapper
`aidkit-field-services`	Services field wrapper
`aidkit-field-custom`	Custom field wrappers

Input Elements

Class	Target
`aidkit-label`	Form labels
`aidkit-input`	Text inputs
`aidkit-textarea`	Textarea inputs
`aidkit-select-trigger`	Select dropdowns
`aidkit-select-content`	Select dropdown content
`aidkit-select-item`	Select options
`aidkit-multi-select`	Multi-select component

Media Actions

Class	Target
`aidkit-media-actions`	Screenshot/video buttons
`aidkit-screenshot-button`	Screenshot button
`aidkit-screenshot-icon`	Screenshot icon wrapper
`aidkit-video-recorder`	Video recorder component

Input Group

Class	Target
`aidkit-input-group`	Input group wrapper
`aidkit-input-addon`	Input addon buttons
`aidkit-attachment-button`	File attachment button
`aidkit-dictate-button`	Dictation button
`aidkit-attachment-preview`	Attachment preview area

Other Elements

Class	Target
`aidkit-separator`	Section separators
`aidkit-submit-button`	Submit button
`aidkit-error-message`	Error message display
`aidkit-footer-text`	Footer text
`aidkit-severity-warning`	Severity warning banner

Success State

Class	Target
`aidkit-success-container`	Success state wrapper
`aidkit-success-card`	Success card
`aidkit-success-content`	Success content
`aidkit-success-icon`	Success checkmark
`aidkit-success-title`	Success title
`aidkit-success-message`	Success message
`aidkit-success-button`	Submit another button

CSS Variables

Aidkit uses CSS custom properties that you can override. Variables use the HSL color format without the hsl() wrapper:

.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%;
}

Note

Use HSL values without the hsl() wrapper. For example, use 221.2 83.2% 53.3% instead of hsl(221.2, 83.2%, 53.3%) or hex colors.

Styling Examples

Custom Submit Button

.aidkit-submit-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.aidkit-submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

Custom Form Card

.aidkit-form-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  border: none;
}

Custom Input Styling

.aidkit-input,
.aidkit-textarea {
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.aidkit-input:focus,
.aidkit-textarea:focus {
  border-color: var(--primary);
}

Dark Mode

For dark mode support, you can 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%;
  --border: 217.2 32.6% 17.5%;
}