> ## Documentation Index
> Fetch the complete documentation index at: https://quickoinfosoftprivatelimited.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme

> Customize Quicko Tools appearance with theme mode and seed color options based on design.

Quicko Tools support customization to match your platform's branding. You pass an `theme` object that contains theme configuration to generate a complete color scheme.

## Structure

The `theme` object contains the following properties:

```json theme={null}
{
  "mode": "light",
  "seed": "#2962FF"
}
```

| Property | Description | Default |
| - | - | - |
| `$.theme.mode` | Theme mode (`light` or `dark`) | `light` |
| `$.theme.seed` | Seed color for theme generation (hex with `#`) | `#2962FF` |

## Theme Mode

Control whether the tool displays in light or dark mode:

> **Light Mode**
>
> Clean, bright interface suitable for light-themed applications.

> **Dark Mode**
>
> Dark interface that reduces eye strain and suits dark-themed applications.

**Web (JSON)**

```json theme={null}
"theme": {
  "mode": "dark"
}
```

**iOS (Map)**

```swift theme={null}
let theme: [String: Any] = [
    "mode": "dark"
]
```

**Android (JSONObject)**

```kotlin theme={null}
val theme = JSONObject().apply {
    put("mode", "dark")
}
```

## Seed Color

Provide a seed color and Quicko Tools will generate a complete color scheme. This ensures harmonious colors across the entire tool interface.

**Web (JSON)**

```json theme={null}
"theme": {
  "mode": "light",
  "seed": "#2962FF"
}
```

**iOS (Map)**

```swift theme={null}
let theme: [String: Any] = [
    "mode": "light",
    "seed": "#2962FF"
]
```

**Android (JSONObject)**

```kotlin theme={null}
val theme = JSONObject().apply {
    put("mode", "light")
    put("seed", "#2962FF")
}
```

## Best Practices

> **Use Your Brand's Primary Color**
>
> Pass your brand's primary color as the seed. It will generate complementary colors automatically.

> **Respect User Preferences**
>
> Detect the user's system theme preference and set the mode accordingly for a consistent experience.

> **Test Both Modes**
>
> Always test your integration in both light and dark modes to ensure readability and visual appeal.

> **Avoid Low-Contrast Colors**
>
> Choose seed colors with sufficient contrast. Very light or very dark colors may produce themes with accessibility issues.

## Example Themes

Here are some example seed color configurations:

| Brand Color | Hex Code | Usage |
| - | - | - |
| Quicko Blue | `#2962FF` | Default Quicko branding |
| Forest Green | `#2E7D32` | Eco-friendly or financial apps |
| Deep Purple | `#673AB7` | Creative or premium apps |
| Orange | `#F57C00` | Energetic or action-oriented apps |

***

## Next Steps

> **[Web Integration](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/integration/web/index.md)**
>
> Learn how to pass options when embedding tools.

> **[Mobile Integration](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/integration/mobile/index.md)**
>
> Learn how to configure options in the mobile SDK.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.