# Sistema di design Skeleton ## Anteprima dell’interfaccia del sistema di design Skeleton Cambia tema e aspetto mantenendo lo stato di lettura salvato; controlla i valori risolti. ## Riferimento di progettazione del sistema di design Skeleton File del tema Skeleton 5.0.1 bloccati su una versione specifica, comportamento delle utility CSS compilato e scelte di composizione originali esplicite. ### Valori del tema Cerberus | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --spacing | 0.25rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --radius-base | 0.5rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-base--font-family | system-ui | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-heading--font-weight | bold | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-50 | oklch(0.99 0 0) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-950 | oklch(0.18 0 0) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | ### Valori del tema Mint | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --spacing | 0.25rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --radius-base | 0.375rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-base--font-family | system-ui, sans-serif | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-heading--font-weight | normal | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | ### Valori del tema Rose | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --spacing | 0.25rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --radius-base | 0.375rem | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --typo-heading--font-weight | normal | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Dichiarazione effettiva del tema. Questi valori cambiano insieme quando data-theme seleziona questo tema importato; lo stato di lettura originale rimane invariato. | ### CSS integrazione e combinazioni semantiche | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | Carica dopo Tailwind, così le definizioni delle utility vengono compilate. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Solo i temi importati possono fornire le proprie variabili. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Fa sì che il pulsante di aspetto originale agisca sulla variante scura effettivamente compilata. | | Surface pairings | light-dark(light value, dark value) | Gli stili globali di Skeleton impostano color-scheme; modificare una classe senza una variante corrispondente non è sufficiente. | | Filled action | btn preset-filled-primary-500 | Combina la geometria nativa del pulsante con una preimpostazione che si adatta al tema. | | Supporting action | btn preset-tonal-primary | Usa un abbinamento tonale adatto all’aspetto corrente. | | Disclosure | details.disclosure > summary | Stato di apertura nativo del browser con Skeleton CSS; non è coinvolta alcuna inizializzazione di componenti Svelte. | ## Skeleton Guida completa al sistema di design Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di progettazione sistema di design Skeleton: fondamenti e livelli del framework CSS ### Scegli il livello che viene effettivamente eseguito > La postazione di lettura usa @skeletonlabs/skeleton 5.0.1, le utility Tailwind CSS e tre temi inclusi. Non carica skeleton-svelte né skeleton-react. I pulsanti, il badge, il chip, la card e la presentazione a scomparsa sono vere utility CSS; il selettore del tema e la logica dello stato salvato sono originali JavaScript. Questa separazione consente di eseguire l’esempio completo come una piccola pagina Vite, senza implicare un runtime di componenti del framework. ### Compila le utilità invece di importare CSS grezzo nel browser Il sorgente di Skeleton contiene direttive Tailwind come @utility e @variant. La configurazione Vite fornita include @tailwindcss/vite e il foglio di stile importa Tailwind prima di Skeleton e dei temi scelti. Un semplice collegamento al pacchetto sorgente non riprodurrebbe gli stili compilati. Sono inclusi tutti i sorgenti della build, così l’anteprima non dipende da CSS generati nascosti. 1. Importa Tailwind CSS. 2. Importa le utility di Skeleton. 3. Importa ogni tema che vuoi selezionare. 4. Compila il foglio di stile con il plugin Vite di Tailwind. ## Skeleton Selezione dei temi del sistema di design e valori effettivi ### Importa esplicitamente ogni tema disponibile Cerberus, Mint e Rose vengono importati ciascuno dal percorso dei temi del pacchetto. Selezionare un nome modifica data-theme sull’elemento radice, attivando le dichiarazioni delle variabili corrispondenti. Il riferimento elenca i campioni effettivi della palette principale, gli estremi delle superfici, le dichiarazioni di spaziatura, raggio e caratteri per ogni tema. Questi valori vengono letti dai file bloccati a una versione specifica, anziché essere generati sostituendo un unico colore d’accento. - Cerberus è la presentazione iniziale. - Mint e Rose sono temi distinti, importati separatamente. - La selezione del tema modifica data-theme, non una copia dell’albero dei contenuti. ### Mantieni invariati tutti i contenuti durante il confronto La scheda di lettura, la lista di controllo e lo stato salvato restano intatti quando cambia il tema. Dopo ogni selezione, il pannello laterale legge le variabili calcolate dall’elemento radice e mostra i valori effettivamente risolti dal browser. Il confronto è quindi significativo: tipografia, forme e palette possono cambiare mentre si valuta lo stesso contenuto e stato. ## Aspetto scuro e schema di colori di sistema di design Skeleton ### Collega la variante scura al controllo effettivo Il foglio di stile definisce una variante scura basata su classi, corrispondente a .dark sull’elemento radice o sui suoi discendenti. Le regole globali di Skeleton usano questa variante per impostare color-scheme. Il pulsante di aspetto modifica quindi le condizioni usate dalle combinazioni di superfici light-dark(). Un interruttore che cambia una classe ma lascia invariata la variante predefinita di Tailwind, basata sulle preferenze del sistema, può indicare la modalità scura mentre le superfici restano chiare. ### Usa un preset che resti leggibile L’azione di aspetto usa preset-tonal-primary, mentre l’azione di lettura usa preset-filled-primary-500. I preset regolano il rapporto tra superficie e primo piano; un token di colore, da solo, non garantisce un contrasto leggibile. Dopo il passaggio a Rose, è stato verificato l’effettivo aspetto nello stato scuro, compresi il testo del controllo e il controllo di espansione: il semplice cambio di classe non è stato considerato una prova di correttezza visiva. ## Skeleton Tipografia, forme e layout del sistema di design ### Separa le dichiarazioni del tema dalla gerarchia originale Cerberus dichiara un carattere di sistema, mentre Rose include uno stack di fallback diverso. Questo studio non carica caratteri da fonti remote: il browser usa i caratteri disponibili nello stack selezionato. Il layout originale assegna esplicitamente un’intestazione di pagina da 36px e un’intestazione di lettura da 28px. Queste scelte compositive restano distinte dalle dichiarazioni del tema relative alla famiglia e al peso del carattere. ### Lascia che raggio e spaziatura provengano dal tema Gli esempi di palette usano --radius-base, quindi la forma degli angoli cambia con il tema selezionato. Il riferimento completo espone anche --spacing. Il layout esterno a due colonne usa una spaziatura di 24px e diventa a colonna singola sotto i 720px: sono scelte compositive originali. Un tema non determina l’architettura delle informazioni né impone a ogni pagina una griglia identica. ## Stato di lettura e ripristino della presentazione del sistema di design Skeleton ### Mantieni il salvataggio locale e reversibile L’azione di lettura attiva o disattiva aria-pressed, modifica l’etichetta e aggiorna un messaggio di stato leggibile. Salva solo un valore booleano in memoria per questa pagina. Non ci sono account, persistenza o richieste di rete. Lo stesso stato rimane visibile anche dopo il cambio di tema, così chi legge può confrontare uno stato attivo tra diverse palette. ### Reimposta la presentazione senza eliminare lo stato di lettura Il ripristino della presentazione ripristina Cerberus e l’aspetto chiaro, ma lascia intenzionalmente invariato il valore booleano salvato. L’etichetta ne descrive l’ambito. Un’azione separata può rimuovere la scheda di lettura dalla postazione locale. Confondere queste due azioni farebbe sì che un innocuo ripristino visivo elimini inaspettatamente la scelta corrente dell’utente. ## Sistema di design Skeleton: elementi nativi di espansione e contenuti reali ### Usa un elemento details del browser La spiegazione di supporto è una vera struttura details/summary con l’utilità disclosure. L’apertura tramite tastiera e puntatore è gestita dal browser, mentre Skeleton ne fornisce la presentazione. Non si tratta del componente Svelte Accordion di Skeleton e non vengono inventati componenti API o eventi. Il paragrafo spiega concretamente cosa cambia e cosa rimane invariato. ### Esamina lo stato aperto dopo la transizione Il foglio di stile può animare il ridimensionamento del contenuto espanso. Per la verifica visiva si attende la fine della transizione prima di acquisire lo stato aperto; uno screenshot immediato potrebbe catturare il contenuto mentre si sta ancora espandendo. La convalida del layout include il paragrafo aperto e la lunga pila di caratteri calcolata, così il pannello laterale non può superare il controllo soltanto quando il suo contenuto sostanziale è nascosto. ## Sistema di design Skeleton Ispezione responsive dei temi del sistema di progettazione ### Mantieni i valori leggibili sugli schermi stretti L’area di lavoro si dispone in colonna sotto i 720px e il padding esterno si riduce a 16px. Ogni nome e valore del token calcolato occupa una riga a sé, così le famiglie di font lunghe e le stringhe OKLCH vanno a capo senza richiedere lo scorrimento orizzontale. I cinque campioni di colore restano visibili in una griglia compatta e i controlli del tema vanno a capo su più righe. ### Verifica le combinazioni di tema e stato Il test nel browser salva la scheda di lettura, passa da Mint a Rose, attiva l’aspetto scuro, apre il riquadro a scomparsa e infine ripristina la presentazione. Lo stato salvato deve conservarsi per tutta la sequenza. Questa sequenza è stata verificata fino a 280px, così il test copre i valori lunghi reali e il contenuto espanso, anziché una singola schermata del tema iniziale. ## Sistema di design Skeleton Sorgenti Vite complete del sistema di progettazione ### Salva tutti e quattro i file sorgente L’esempio include index.html, style.css, main.js e vite.config.mjs. Installa le dipendenze Skeleton, Tailwind e Vite con versioni bloccate, quindi esegui Vite in quella directory. La direttiva esplicita @source punta a HTML, che contiene le classi utility, assicurando che l’output compilato includa quelle usate dalla postazione di lettura. Non manca alcuna struttura iniziale del framework. ### Scegli separatamente i componenti del framework quando necessario Un prodotto che richiede un componente Skeleton Svelte o React dovrebbe usare il pacchetto del framework corrispondente e la relativa configurazione documentata. Questo esempio basato su CSS resta utile per comprendere i temi condivisi e il livello utility, ma non dichiara di offrire le stesse API di quei componenti. Tieni presente questa distinzione quando adatti la guida fornita per un agent. ## Esempi di componenti del sistema di progettazione sistema di design Skeleton ### index.html Contenuti di lettura completi, componenti CSS nativi e controlli originali. ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.

``` Riferimento del codice - Tieni tutti e quattro i file sorgente nella stessa directory del progetto. ### style.css Importazione dei temi, variante scura basata su classi e composizione responsive. ``` @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/mint'; @import '@skeletonlabs/skeleton/themes/rose'; @source './index.html'; @custom-variant dark (&:where(.dark, .dark *)); body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}} .workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal} ``` Riferimento del codice - Tieni tutti e quattro i file sorgente nella stessa directory del progetto. ### main.js Ispezione dei token calcolati e stato indipendente di lettura e presentazione. ``` import './style.css'; const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect(); ``` Riferimento del codice - Tieni tutti e quattro i file sorgente nella stessa directory del progetto. ### vite.config.mjs Integrazione effettiva con il compilatore Tailwind. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Riferimento del codice - Tieni tutti e quattro i file sorgente nella stessa directory del progetto. ## Configurazione dell’agent per il sistema di progettazione sistema di design Skeleton ### Punto di partenza per l’implementazione Salva prima i quattro file forniti. Questo è il livello utility di CSS e non richiede runtime Svelte o React. ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### Un prompt per il tuo progetto ``` Implementa la postazione di lettura completa di Skeleton 5.0.1 usando le utility effettive di CSS e le importazioni dei temi Cerberus/Mint/Rose. Mantieni lo schema di colori scuro basato su classi, righe dei token calcolati facili da leggere, contenuti completi, stato di salvataggio locale e ripristino della presentazione che non elimini tale stato. Tieni distinto il livello CSS dalle API dei componenti del framework. ``` ## Fonti e ambito del sistema di progettazione sistema di design Skeleton Utility effettive CSS Tailwind di Skeleton e temi distribuiti, con comportamento originale della pagina in JavaScript puro. Non viene caricato alcun runtime Svelte di Skeleton né alcun runtime React. - Installazione CSS e scelte di integrazione del framework. - Temi Composizione e selezione dei temi. - Colori Abbinamenti di palette e contrasto. - Aspetto scuro Comportamento dello schema di colori e delle varianti. - Elementi a scomparsa Livello CSS nativo details/summary. ## Risorse correlate al sistema di progettazione sistema di design Skeleton ### Tabler Un diario di progetto Tabler nativo con variabili del tema 1.6 effettive, schede cronologiche, contesto di datagrid, convalida nelle finestre modali e una composizione chiara/scura che consente di aggiungere checkpoint locali. ### Tamagui Esplora le categorie effettive dei token v5 di Tamagui e i temi blu chiaro/scuro attraverso una bacheca completa delle abitudini con componenti nativi, convalida, progressi e recupero dallo stato vuoto. ### UIkit UIkit combina un framework CSS, la personalizzazione Less e componenti JavaScript basati su attributi. Lo Switcher, l’Accordion e la griglia responsive collaborano nel pianificatore di workshop qui sotto, mostrando dove termina il comportamento nativo dei componenti e dove inizia lo stato di selezione dell’applicazione. - [Riferimento per l’implementazione](https://www.skeleton.dev/docs/svelte/design/themes) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Fonte](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Fonte](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Riferimento del codice](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Installazione CSS e scelte di integrazione del framework.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Temi Composizione e selezione dei temi.](https://www.skeleton.dev/docs/svelte/design/themes) - [Colori Abbinamenti di palette e contrasto.](https://www.skeleton.dev/docs/svelte/design/colors) - [Aspetto scuro Comportamento dello schema di colori e delle varianti.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Elementi a scomparsa Livello CSS nativo details/summary.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)