generate-theme
Create custom Flowbite theme CSS files by providing a brand color and design instructions. The tool analyzes your input to generate color variations and adjust all theme variables for consistent branding.
Instructions
Generates a custom Flowbite theme CSS file based on a brand color (hex format) and user instructions. The AI will intelligently analyze the instructions and customize ALL theme variables (border radius, spacing, colors, typography, etc.) to match the desired aesthetic. This tool creates color shades and variations, adapting the entire theme system to match your brand identity.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| brandColor | Yes | The primary brand color in hex format (e.g., #3B82F6, #FF5733). This will be used as the base for generating all brand color variations. | |
| instructions | Yes | Natural language instructions describing the desired theme aesthetic and customizations. The AI will interpret these instructions to modify all relevant theme variables. Examples: "Make it modern and minimalist with soft rounded corners", "Create a luxury feel with gold accents and elegant spacing", "Design for a playful children's app with bright colors", "Professional corporate style with subtle borders", etc. | |
| fileName | No | Optional filename for the generated theme (e.g., "my-brand-theme.css"). Defaults to "custom-theme.css" |
Input Schema (JSON Schema)
{
"properties": {
"brandColor": {
"description": "The primary brand color in hex format (e.g., #3B82F6, #FF5733). This will be used as the base for generating all brand color variations.",
"type": "string"
},
"fileName": {
"description": "Optional filename for the generated theme (e.g., \"my-brand-theme.css\"). Defaults to \"custom-theme.css\"",
"type": "string"
},
"instructions": {
"description": "Natural language instructions describing the desired theme aesthetic and customizations. The AI will interpret these instructions to modify all relevant theme variables. Examples: \"Make it modern and minimalist with soft rounded corners\", \"Create a luxury feel with gold accents and elegant spacing\", \"Design for a playful children's app with bright colors\", \"Professional corporate style with subtle borders\", etc.",
"type": "string"
}
},
"required": [
"brandColor",
"instructions"
],
"type": "object"
}