Theme

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:

{
  "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)
iOS (Map)
Android (JSONObject)

"theme": {
  "mode": "dark"
}

let theme: [String: Any] = [
    "mode": "dark"
]

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)
iOS (Map)
Android (JSONObject)

"theme": {
  "mode": "light",
  "seed": "#2962FF"
}

let theme: [String: Any] = [
    "mode": "light",
    "seed": "#2962FF"
]

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

Getting Started

Integration

Options

Directory

Structure

Theme Mode

Light Mode

Dark Mode

Seed Color

Best Practices

Example Themes

Next Steps

Web Integration

Mobile Integration

Getting Started

Integration

Options

Directory

​Structure

​Theme Mode

Light Mode

Dark Mode

​Seed Color

​Best Practices

​Example Themes

​Next Steps

Web Integration

Mobile Integration

Structure

Theme Mode

Seed Color

Best Practices

Example Themes

Next Steps