Skip to main content

​
Overview

Gainable apps use DaisyUI themes for consistent, beautiful styling. You can customize colors, apply themes, and adjust the visual design through your prompts.

​
Themes

Themes provide a complete color palette for your app. Request a theme by name: 
"Use the corporate theme"
"Apply the cupcake theme"
"Switch to dark mode"

​
Available themes

ThemeDescription
lightClean, minimal light theme (default)
darkDark mode with high contrast
cupcakeSoft, playful pastels
corporateProfessional blues and grays
retroWarm, vintage colors
cyberpunkBold neons on dark
valentinePinks and romantic tones
gardenFresh greens and naturals
forestDeep, earthy greens
lofiMuted, relaxed tones
pastelSoft pastel colors
fantasyPurple and magical
luxuryGold and black elegance
autumnWarm oranges and browns
businessSerious, professional
nightDeep blue dark mode
winterCool blues and whites
nordNordic-inspired palette
emeraldRich emerald greens

​
Choosing a theme

Match the theme to your app’s purpose:
App TypeSuggested Themes
Business/CRMcorporate, business, light
Fun/Consumercupcake, pastel, fantasy
Tech/Developercyberpunk, night, nord
Nature/Ecogarden, forest, emerald
Premium/Luxuryluxury, dark
Warm/Friendlyautumn, retro, lofi

​
Requesting themes

​
Direct theme request

"Use the corporate theme"
"Apply dark mode"

​
By description

"Professional, corporate feel" → corporate or business
"Playful and fun" → cupcake or pastel
"Modern and techy" → cyberpunk or night
"Warm and cozy" → autumn or retro
"Premium look" → luxury or dark
"Fresh and natural" → garden or emerald
If you describe a style like “professional” or “playful”, Gainable will choose an appropriate theme automatically.

​
Color customization

Beyond themes, you can request specific colors: 
"Use blue and gray colors"
"Make the primary color green"
"Use a purple accent color"

​
Color contexts

ContextWhat it affects
PrimaryButtons, links, active states
SecondarySecondary buttons, accents
AccentHighlights, special elements
NeutralBackgrounds, text

​
UI components

Gainable apps use DaisyUI components that adapt to your theme:

​
Buttons

"Primary action buttons"
"Outline style buttons"
"Ghost buttons for subtle actions"

​
Cards

"Cards with shadows"
"Bordered cards"
"Compact cards"

​
Forms

"Bordered input fields"
"Floating label inputs"
"Compact form layout"

"Tab navigation"
"Sidebar navigation"
"Breadcrumb navigation"

​
Layout requests

​
Page structure

"Sidebar on the left with main content on the right"
"Header at top, content below"
"Full-width layout"

​
Content layout

"Two-column layout"
"Grid of cards"
"Stacked sections"

​
Spacing

"More padding around content"
"Compact layout"
"Spacious design"

​
Responsive design

All Gainable apps are automatically responsive. The layout adjusts for:
  • Desktop: Full sidebar, multi-column grids
  • Tablet: Collapsible sidebar, adjusted columns
  • Mobile: Single column, hamburger menu
You don’t need to request this - it’s built in.

​
Common customizations

​
Add a sidebar

"Add a sidebar with navigation links to Dashboard, Deals, and Contacts"

​
Style badges

"Show priority as colored badges:
- High: red
- Medium: yellow
- Low: green"

​
Card styling

"Show deals as cards with shadows and hover effects"

​
Table styling

"Striped table rows"
"Compact table with smaller text"
"Bordered table cells"

​
Best practices

Consistency is better than mixing styles. Pick a theme that fits your purpose.
Themes handle colors automatically. You don’t need to specify colors for every element.
“Professional and clean” works better than “use #1a1a1a with 16px padding”
Business apps → corporate themes. Fun apps → playful themes. Match user expectations.

​
Examples

​
Professional dashboard

"Use the corporate theme.
Clean layout with:
- Sidebar navigation
- KPI cards at the top
- Charts below
- Professional, minimal design"

​
Playful task app

"Use the cupcake theme.
Friendly design with:
- Colorful status badges
- Card-based layout
- Fun, approachable feel"

​
Dark mode app

"Use dark mode.
Modern, sleek design with:
- High contrast text
- Subtle borders
- Glowing accent colors"

​
Changing themes later

You can always update the theme: 
"Change the theme to dark mode"
"Switch to the forest theme"
"Make it look more professional"
The entire app updates to the new theme while keeping all your data and features.

​
Learn more

Views

Page layouts and components

Best practices

Writing effective prompts