Skip to main content
SYNTIweb uses FlyonUI, a modern UI framework with 32 official themes and 17 curated color palettes. Themes are applied via the data-theme attribute and control all CSS variables automatically.

​
Color Palettes System

Color palettes are managed in the color_palettes table and are plan-specific. Each palette references an official FlyonUI theme.

​
Plan 1 (OPORTUNIDAD) - 10 Base Themes

Available to all tenants on Plan 1 and above:

Light

Default light theme - Clean and professional

Ghibli

Studio Ghibli inspired - Soft and whimsical

Gourmet

Elegant food and dining aesthetic

Perplexity

Modern AI-inspired design

Soft

Gentle pastel tones

Dark

Default dark mode - Modern and elegant

Shadcn

Developer-friendly minimalist design

VSCode

Editor-inspired dark theme

Pastel

Complete pastel palette

Corporate

Professional blue corporate theme

​
Plan 2 (CRECIMIENTO) - 7 Premium Themes

Additional themes available to Plan 2 and Plan 3 tenants:

Black

Pure black - AMOLED friendly

Luxury

Black and gold - Exclusive premium look

Slack

Workspace-inspired professional theme

Spotify

Music streaming aesthetic

Mintlify

Documentation-style clean design

Claude

AI assistant inspired theme

Valorant

Gaming-inspired bold design

​
FlyonUI Official Themes

SYNTIweb supports all 32 official FlyonUI themes. Themes are categorized for easier selection:

​
Default Themes (2)

Mode: Light
Description: Tema claro por defecto - Limpio y profesional
Recommended for: Negocios generales, e-commerce, servicios profesionales
Mode: Dark
Description: Tema oscuro por defecto - Moderno y elegante
Recommended for: Tech, gaming, contenido nocturno

​
Colorful & Vibrant (9)

Mode: Light
Description: Colores pastel dulces - Rosa y celeste
Recommended for: Pastelerías, dulcerías, productos infantiles, estética
Mode: Light
Description: Amarillo y negro vibrante - Energético
Recommended for: Delivery rápido, comida, construcción, transporte
Mode: Light
Description: Rosa romántico - Amor y dulzura
Recommended for: Florería, regalos, eventos románticos, spa
Mode: Dark
Description: Azul agua profundo - Fresco y tecnológico
Recommended for: Piscinas, agua, tecnología, salud
Mode: Light
Description: Colores suaves y relajados - Minimalista
Recommended for: Cafeterías, música, arte, diseño
Mode: Light
Description: Paleta pastel completa - Delicado
Recommended for: Moda femenina, bebés, decoración
Mode: Dark
Description: Neón y futurista - Vibrante oscuro
Recommended for: Gaming, tech, entretenimiento nocturno
Mode: Light
Description: Verde ácido y amarillo - Experimental
Recommended for: Jugos naturales, vegano, alternativo
Mode: Light
Description: Amarillo limón fresco - Veraniego
Recommended for: Bebidas, helados, verano, playa

​
Nature & Organic (6)

Mode: Light
Description: Verde esmeralda - Natural y elegante
Recommended for: Orgánico, salud, naturaleza, eco-friendly
Mode: Light
Description: Verde jardín - Fresco y natural
Recommended for: Plantas, jardinería, eco-productos
Mode: Dark
Description: Verde bosque oscuro - Sofisticado
Recommended for: Outdoor, camping, aventura
Mode: Light
Description: Colores otoñales - Cálido y acogedor
Recommended for: Cafés, libros, hogar, artesanías
Mode: Light
Description: Tonos café y crema - Reconfortante
Recommended for: Cafeterías, chocolatería, panadería
Mode: Light
Description: Azul frío invernal - Limpio y fresco
Recommended for: Aire acondicionado, tecnología, dental

​
Professional & Business (6)

Mode: Light
Description: Azul corporativo - Serio y confiable
Recommended for: Empresas, finanzas, legal, consultoría
Mode: Dark
Description: Oscuro corporativo - Premium
Recommended for: Ejecutivos, lujo, tecnología B2B
Mode: Dark
Description: Negro y dorado - Exclusivo
Recommended for: Joyería, autos de lujo, inmobiliaria premium
Mode: Light
Description: Blanco y negro minimalista - Ultraligero
Recommended for: Portafolios, minimalismo, arquitectura
Mode: Dark
Description: Paleta Nórdica - Sobrio y moderno
Recommended for: Tech, desarrollo, diseño, innovación
Mode: Light
Description: Naranja y rosa atardecer - Cálido premium
Recommended for: Turismo, hoteles, restaurantes vista

​
Dark Modes (6)

Mode: Dark
Description: Azul oscuro nocturno - Suave para los ojos
Recommended for: Apps nocturnas, lectura, astronomía
Mode: Dark
Description: Gris oscuro - Menos contraste
Recommended for: Lectura prolongada, streaming
Mode: Dark
Description: Negro puro - AMOLED friendly
Recommended for: Premium, ahorro batería, fotografía
Mode: Dark
Description: Morado oscuro - Vampírico
Recommended for: Gaming, entertainment, misterio
Mode: Dark
Description: Retro 80s neón - Nostálgico
Recommended for: Música, arte, retro gaming
Mode: Dark
Description: Naranja y morado oscuro - Temático
Recommended for: Eventos, terror, octubre

​
Retro & Special (3)

Mode: Light
Description: Estilo vintage - Nostálgico
Recommended for: Vintage, coleccionables, antigüedades
Mode: Light
Description: Colores de impresión - Diseño gráfico
Recommended for: Imprenta, diseño, agencias
Mode: Light
Description: Morado mágico - Fantástico
Recommended for: Juegos, fantasía, magia, esotérico

​
Implementation

​
Database Schema

// ColorPalettesSeeder.php
$palettes = [
    [
        'name'             => 'Light',
        'slug'             => 'light',
        'primary_color'    => null,  // Managed by FlyonUI CSS
        'secondary_color'  => null,
        'accent_color'     => null,
        'background_color' => null,
        'text_color'       => null,
        'min_plan_id'      => 1,     // Available to Plan 1+
        'category'         => null,
    ],
    // ... more palettes
];

​
Tenant Model

// Tenant.php:44
protected $fillable = [
    // ...
    'color_palette_id',
    // ...
];

// Tenant.php:111-114
public function colorPalette(): BelongsTo
{
    return $this->belongsTo(ColorPalette::class);
}

​
Frontend Usage

<!-- Applied on HTML root element -->
<html data-theme="{{ $tenant->colorPalette->slug }}">
All theme colors are automatically applied via FlyonUI’s CSS variables.
Color values in the database are null because FlyonUI manages all colors through its official theme system. This ensures consistency and reduces database complexity.

​
Custom Theme Support

While the database seeder mentions custom themes, they are handled via CSS variables in the frontend, not in the database: 
// ColorPalettesSeeder.php:13
// El tema custom se maneja con CSS variables en frontend, NO en BD.
Custom color palettes (beyond the 17 official themes) require frontend CSS variable overrides and are not stored in the color_palettes table.

​
References

FlyonUI Themes

Official FlyonUI themes documentation

ColorPalettesSeeder

database/seeders/ColorPalettesSeeder.php

FlyonUIThemesSeeder

database/seeders/FlyonUIThemesSeeder.php

Tenant Model

app/Models/Tenant.php:111-114

Build docs developers (and LLMs) love

Get started for freeTalk to us