KinesteX

Theme & Appearance

Control the visual appearance of the application. Applies to: All integrations.


ParameterTypeDefaultApplies toWhat it does internally
style"dark" or "light""dark"AllSelects the theme mode requested from the backend at verification and switches the entire UI color scheme
themeNamestringCompany nameAllWhich theme configuration to load from the backend (themes are managed in the Admin Dashboard). The resolved theme's CSS variables are cached in the WebView's localStorage and only re-downloaded when the theme version changes

Precedence note: the URL parameter ?style=dark / ?style=light takes priority over the `style` value sent via postMessage — this is the one parameter where the URL wins. If you see the wrong mode, check the launch URL first.


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 example:
1// Direct SDK support via IStyle class
2let customStyle = IStyle(
3    style: "light",
4    themeName: "CustomBrand"
5)
6
7kinestex.createWorkoutView(
8    workout: "Fitness Lite",
9    user: user,
10    style: customStyle,
11    isLoading: $isLoading,
12    onMessageReceived: { /* ... */ }
13)