Personalizzazione

ShadowUI è altamente personalizzabile tramite temi, CSS Variables e Tailwind CSS.

Temi

ShadowUI supporta due temi predefiniti: Light e Dark.
Indipendentemente da essi è possibile scegliere un tema colorato da applicare all’applicazione.

Cambio mode tema

// Ottieni tema corrente
let currentTheme = app.theme.darkMode; // dark true o false

// Toggle tema
let newTheme = currentTheme === true ? false : true;
app.updateTheme();

// Imposta tema dark
app.theme.darkMode = true;

app.updateTheme();

Cambio tema colore

// Ottieni tema corrente
let currentTheme = app.theme.mainColor; // stringa contenente il colore. Default “blue”

// Imposta tema verde
Let newTheme = {mainColor : App.themes.green};

// Costante contenente il valore stringa “green”
app.updateTheme(newTheme);

CSS Variables

ShadowUI usa CSS Variables per colori e spacing. È possibile personalizzarle nel file CSS del progetto.

Colori principali

:root {
/* Background */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
/* Primary */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;

/* Secondary */
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

/* Accent */
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

/* Destructive */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

/* Muted */
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

/* Border */
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;

/* Ring (focus) */
  --ring: 221.2 83.2% 53.3%;

/* Radius */
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;

  /* ... altri colori per dark mode */
}

Personalizzare i colori

Crea un file custom-theme.css nel tuo progetto:

/* Custom color scheme */
:root {
  /* Brand colors */
  --primary: 142 76% 36%;  /* Verde custom */
  --primary-foreground: 0 0% 100%;

  /* Custom accent */
  --accent: 43 96% 56%;  /* Giallo custom */
  --accent-foreground: 0 0% 0%;
}

/* Custom button style */
.btn-custom {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: calc(var(--radius) * 2);
}

/* Custom card style */
.card-elevated {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border: none;
}

Importa il file CSS nel progetto tramite l’IDE.

Tailwind CSS

ShadowUI include Tailwind CSS. Puoi usare tutte le utility classes.

Utility comuni

Spacing:

className: "p-4 m-2 gap-4"
// padding: 1rem
// margin: 0.5rem
// gap: 1rem

Layout:

className: "flex items-center justify-between"
className: "grid grid-cols-3 gap-4"

Colori:

className: "bg-primary text-primary-foreground"
className: "border-destructive text-destructive"

Typography:

className: "text-2xl font-bold text-muted-foreground"

Responsive:

className: "w-full md:w-1/2 lg:w-1/3"

Classi personalizzate

Classi personalizzate

// Button con style custom
ShaButton
  text: "Custom Button"
  className: "btn-custom hover:scale-105 transition-transform"

// Card con ombra elevata
ShaCard
  className: "card-elevated backdrop-blur-sm"

// Input con bordo colorato
ShaInput
  className: "border-2 border-primary focus:border-accent"

Icon set personalizzati

ShadowUI usa Lucide Icons di default. È possibile aggiungere altri icon set.

Aggiungere Font Awesome

1. Importa Font Awesome CSS nel progetto
2. Usa le classi nei componenti:

ShaButton
  icon: "fas fa-save"  // Font Awesome
  text: "Salva"

ShaSidebarItem
  icon: "fas fa-home"
  label: "Home"

Aggiungere Material Icons

1. Importare Material Icons CSS
2. Usa le classi:

ShaButton
  icon: "material-icons"
  text: "save"  // Nome icona Material

// Oppure usa uno span custom
<span class="material-icons">home</span>

Componenti custom

È possibile creare componenti riutilizzabili estendendo quelli esistenti.

Esempio: Button con icona e badge

// Crea classe CustomButton estendendo ShaButton
CustomButton extends ShaButton
  ├── icon (ShaIcon)
  ├── text (ShaLabel)
  └── badge (ShaBadge)

// Usa CustomButton
CustomButton
  text: "Notifiche"
  icon: "shaicons shaicons-bell"
  badgeCount: 5

Esempio: Card statistica

// Componente riutilizzabile StatCard
ShaCard (className: "stat-card")
  ├── ShaCardHeader
  │     ├── ShaLabel (Titolo - muted)
  │     └── ShaIcon (Icona)
  │
  └── ShaCardContent
        ├── ShaLabel (Valore - xxl)
        └── ShaLabel (Variazione - small)

// CSS custom per stat-card
.stat-card {
  border-left: 4px solid hsl(var(--primary));
  transition: transform 0.2s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Animazioni custom

Aggiungi animazioni con Tailwind:

// Button con animazione
ShaButton
  className: "hover:scale-105 active:scale-95 transition-all duration-200"

// Card con fade-in
ShaCard
  className: "animate-fade-in"

// Skeleton pulse
ShaSkeleton
  className: "animate-pulse"

Definisci animazioni custom in CSS:

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

Best Practices personalizzazione

1. Usa CSS Variables: Per colori e spacing riutilizzabili
2. Mantieni coerenza: Usa lo stesso design system in tutta l’app
3. Responsive: Testa sempre su mobile, tablet, desktop
4. Accessibilità: Mantieni contrasti sufficienti per i colori
5. Performance: Limita animazioni pesanti
6. Dark mode: Testa sempre entrambi i temi