# Theme & Appearance

Control the visual appearance of the application.

| Parameter | Type | Default | Description | Effect |
|-----------|------|---------|-------------|--------|
| style | "dark" | "dark" | Applies style to the UI  |  Changes the entire UI color scheme to dark or light mode | Theme mode |
| themeName | string | Company name | Custom theme identifier | Loads a specific theme configuration (e.g., branded themes) |

**Note:** Theme can also be set via URL parameter `?style=dark` or `?style=light`

**SDK Support:**
- **Swift:** Direct support via `IStyle` class passed to view creation methods (hex values with #)
- **Flutter:** Direct support via `IStyle` class passed to view creation methods
- **Kotlin:** Direct support via `IStyle` data class passed to view creation methods (hex values without #)
- **React Native/React:** Direct support via `style` object in postData
- **HTML/JS:** Direct in postData object

**Theme Configuration**

_Swift (iOS)_
```swift
// Direct SDK support via IStyle class
let customStyle = IStyle(
    style: "light",
    themeName: "CustomBrand"
)

kinestex.createWorkoutView(
    workout: "Fitness Lite",
    user: user,
    style: customStyle,
    isLoading: $isLoading,
    onMessageReceived: { /* ... */ }
)
```

_Kotlin (Android)_
```kotlin
// Direct SDK support via IStyle class
KinesteXSDK.createWorkoutView(
    context = this,
    workoutName = "Fitness Lite",
    style = IStyle(
        style = "light",
        themeName = "Your Theme Name from Admin Dashboard (default company name)"
    ),
    isLoading = viewModel.isLoading,
    onMessageReceived = { message ->
        handleWebViewMessage(message)
    },
    permissionHandler = this
)
```

_React Native_
```jsx
// Direct support via style object
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'user-123',
  company: 'YOUR_COMPANY',
  style: {
    style: 'light', // 'dark' or 'light'
    loadingBackgroundColor: 'FFFFFF', // hex without #
  },
  customParameters: {
    themeName: 'CustomBrand', // via customParameters
  },
};
```

_Flutter_
```dart
// Direct SDK support via IStyle class
KinesteXAIFramework.createWorkoutView(
  workoutName: "Fitness Lite",
  isShowKinestex: showKinesteX,
  isLoading: ValueNotifier<bool>(false),
  style: IStyle(
    style: 'light', // 'dark' or 'light'
    themeName: 'CustomBrand',
  ),
  onMessageReceived: (message) {
    handleWebViewMessage(message);
  },
);
```

_HTML / JavaScript_
```html
// Direct in postData object
const postData = {
  userId: "user-123",
  company: "YOUR_COMPANY",
  key: "YOUR_API_KEY",
  style: "light",
  themeName: "CustomBrand",
};
```

_React (TypeScript)_
```tsx
// Direct support via style object
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'user-123',
  company: 'YOUR_COMPANY',
  style: {
    style: 'light', // 'dark' or 'light'
    loadingBackgroundColor: 'FFFFFF', // hex without #
  },
  customParameters: {
    themeName: 'CustomBrand', // via customParameters
  },
};
```

---
Source: https://kinestex.com/docs/customization-parameters/theme-appearance · Index: https://kinestex.com/llms.txt