# Système de design Skeleton ## Aperçu de l’interface du système de design Skeleton Modifiez le thème et l’apparence tout en conservant un état de lecture enregistré ; inspectez les valeurs calculées. ## Référence de conception du système de design Skeleton Fichiers de thème Skeleton 5.0.1 épinglés, comportement des utilitaires CSS compilés et choix de composition d’origine explicités. ### Valeurs du thème Cerberus | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --spacing | 0.25rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --radius-base | 0.5rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-base--font-family | system-ui | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-heading--font-weight | bold | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-50 | oklch(0.99 0 0) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-950 | oklch(0.18 0 0) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | ### Valeurs du thème Mint | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --spacing | 0.25rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --radius-base | 0.375rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-base--font-family | system-ui, sans-serif | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-heading--font-weight | normal | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | ### Valeurs du thème Rose | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --spacing | 0.25rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --radius-base | 0.375rem | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --typo-heading--font-weight | normal | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Déclaration réelle du thème. Ces valeurs changent ensemble lorsque data-theme sélectionne ce thème importé ; l’état de lecture d’origine reste inchangé. | ### Intégration CSS et associations sémantiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | À charger après Tailwind afin que les définitions des utilitaires soient compilées. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Seuls les thèmes importés peuvent fournir leurs variables. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Permet au bouton d’apparence d’origine d’agir sur la variante sombre réellement compilée. | | Surface pairings | light-dark(light value, dark value) | Les styles globaux de Skeleton définissent color-scheme ; il ne suffit pas de modifier une classe sans variante correspondante. | | Filled action | btn preset-filled-primary-500 | Associe la géométrie d’un bouton natif à un préréglage adapté au thème. | | Supporting action | btn preset-tonal-primary | Utilise une association tonale adaptée à l’apparence actuelle. | | Disclosure | details.disclosure > summary | État d’ouverture natif du navigateur avec Skeleton CSS ; aucune initialisation de composant Svelte n’intervient. | ## Guide complet du système de design Skeleton Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Fondations et couches du framework du système de design Skeleton CSS ### Choisissez la couche qui s’exécute réellement > Le pupitre de lecture utilise @skeletonlabs/skeleton 5.0.1, ses utilitaires Tailwind CSS et trois thèmes fournis. Il ne charge ni skeleton-svelte ni skeleton-react. Les boutons, le badge, la puce, la carte et la présentation à divulgation progressive reposent sur de véritables utilitaires CSS ; le sélecteur de thème et la logique d’enregistrement de l’état sont propres à JavaScript. Cette séparation permet à l’exemple complet de fonctionner comme une petite page Vite, sans laisser entendre qu’un environnement d’exécution de composants de framework est utilisé. ### Compiler les utilitaires au lieu d’importer le code source brut de CSS dans un navigateur Le code source de Skeleton contient des directives Tailwind telles que @utility et @variant. La configuration Vite fournie inclut @tailwindcss/vite, et la feuille de style importe Tailwind avant Skeleton et les thèmes choisis. Un lien brut vers le paquet source ne reproduirait pas les styles compilés. Le code source complet de la compilation est inclus afin que l’aperçu ne dépende pas de CSS généré de manière cachée. 1. Importez Tailwind CSS. 2. Importez les utilitaires Skeleton. 3. Importez chaque thème que vous souhaitez sélectionner. 4. Compilez la feuille de style avec le greffon Tailwind pour Vite. ## Sélection du thème et valeurs effectives du système de design Skeleton ### Importez explicitement chaque thème disponible Cerberus, Mint et Rose sont chacun importés depuis le chemin themes du package. Le choix d’un nom modifie l’attribut data-theme sur la racine, qui sélectionne les déclarations de variables correspondantes. La référence répertorie, pour chaque thème, des échantillons réels de la palette principale, les extrêmes des surfaces, l’espacement, le rayon et les déclarations de polices. Ces valeurs sont lues dans les fichiers épinglés, et non générées en remplaçant une seule couleur d’accent. - Cerberus est la présentation initiale. - Mint et Rose sont des thèmes distincts, importés séparément. - La sélection d’un thème modifie data-theme, pas une arborescence de contenu copiée. ### Conservez l’intégralité du contenu pendant la comparaison La carte de lecture, la liste de contrôle et l’état d’enregistrement restent intacts lors d’un changement de thème. Après chaque sélection, le panneau latéral lit les variables calculées à partir de la racine et affiche les valeurs effectivement résolues par le navigateur. La comparaison est ainsi pertinente : la typographie, les formes et la palette peuvent changer, tandis que le lecteur examine le même contenu et le même état. ## Apparence sombre et color-scheme du système de design Skeleton ### Reliez la variante sombre au contrôle réel La feuille de style définit une variante sombre basée sur une classe, correspondant à .dark sur la racine ou ses descendants. Les règles globales de Skeleton utilisent cette variante pour définir color-scheme. Le bouton d’apparence modifie donc les conditions utilisées par les associations de surfaces light-dark(). Un bouton qui modifie une classe sans changer la variante par défaut de Tailwind, basée sur le média, peut indiquer le mode sombre alors que les surfaces restent claires. ### Utilisez un preset qui reste lisible L’action d’apparence utilise preset-tonal-primary, et l’action de lecture utilise preset-filled-primary-500. Les presets définissent la relation entre la surface et la couleur de premier plan ; un jeton de couleur seul ne garantit pas un contraste lisible. L’état sombre réellement affiché a été vérifié après le passage à Rose, y compris le texte du contrôle et le contenu dévoilé, plutôt que de supposer qu’un changement de classe réussi garantissait un rendu correct. ## Typographie, formes et mise en page du système de design Skeleton ### Distinguez les déclarations du thème de la hiérarchie d’origine Cerberus déclare une police système, tandis que Rose inclut une autre pile de polices de remplacement. Cette étude ne charge aucune police distante ; le navigateur utilise les polices disponibles dans la pile sélectionnée. La mise en page d’origine définit explicitement un titre de page de 36px et un titre de lecture de 28px. Ces choix de composition restent distincts des déclarations de famille et de graisse propres au thème. ### Laissez le thème définir le rayon et l’espacement Les échantillons de palette utilisent --radius-base : la forme des coins varie donc selon le thème sélectionné. La référence complète expose aussi --spacing. La mise en page extérieure à deux colonnes utilise un espacement de 24px et passe à une seule colonne sous 720px ; il s’agit de choix de composition d’origine. Un thème ne définit pas l’architecture de l’information et n’impose pas une grille identique à toutes les pages. ## État de lecture et réinitialisation de la présentation du système de design Skeleton ### Gardez l’enregistrement local et réversible L’action de lecture bascule aria-pressed, modifie son libellé et met à jour un message d’état lisible. Elle n’enregistre qu’une valeur booléenne en mémoire pour cette page. Il n’y a ni compte, ni persistance, ni requête réseau. Le même état reste visible après un changement de thème, ce qui permet aux lecteurs de comparer un état actif entre différentes palettes. ### Réinitialisez la présentation sans supprimer l’état de lecture La réinitialisation de la présentation rétablit Cerberus et l’apparence claire, mais laisse délibérément inchangée la valeur booléenne d’enregistrement. Son libellé précise cette portée. Une action distincte permet de supprimer la carte de lecture du bureau local. Confondre ces deux actions ferait qu’une simple réinitialisation visuelle effacerait de façon inattendue le choix actuel de l’utilisateur. ## Élément de divulgation natif et contenu réel du système de design Skeleton ### Utilisez un élément details du navigateur L’explication complémentaire utilise une véritable structure details/summary avec l’utilitaire de divulgation. Le navigateur gère l’ouverture au clavier et au pointeur, tandis que Skeleton en fournit la présentation. Il ne s’agit pas du composant Svelte Accordion de Skeleton, et aucun composant API ni événement n’est inventé. Le paragraphe explique concrètement ce qui change et ce qui reste fixe. ### Examinez l’état ouvert après la transition La feuille de style peut animer le redimensionnement du contenu dévoilé. La vérification visuelle attend la fin de la transition avant de capturer l’état ouvert ; une capture d’écran immédiate peut montrer le contenu en pleine expansion. La validation de la mise en page inclut le paragraphe ouvert et la longue pile de polices calculée, afin que le panneau latéral ne soit pas validé uniquement lorsque son contenu conséquent est masqué. ## Inspection responsive des thèmes du système de design Skeleton ### Gardez les valeurs lisibles sur les écrans étroits L’atelier passe à une disposition en colonne sous 720px, et le remplissage extérieur est réduit à 16px. Chaque nom et valeur de jeton calculé occupe sa propre ligne, afin que les longues piles de polices et les chaînes OKLCH puissent revenir à la ligne sans imposer de défilement horizontal. Les cinq échantillons de couleur restent visibles dans une grille compacte, et les contrôles de thème passent sur plusieurs lignes si nécessaire. ### Testez différentes combinaisons de thèmes et d’états Le test du navigateur enregistre la carte de lecture, passe par Mint et Rose, active l’apparence sombre, ouvre le contenu dévoilé, puis réinitialise la présentation. L’état enregistré doit être conservé tout au long de la séquence. Celle-ci a été vérifiée jusqu’à une largeur de 280px : le test couvre donc les valeurs longues réelles et le contenu développé, au lieu de se limiter à une capture de l’unique thème initial. ## Sources Vite complètes du système de design Skeleton ### Enregistrez les quatre fichiers source L’exemple comprend index.html, style.css, main.js et vite.config.mjs. Installez les dépendances épinglées de Skeleton, Tailwind et Vite, puis exécutez Vite dans ce répertoire. La directive @source explicite pointe vers le HTML qui contient les classes utilitaires et garantit que le résultat compilé inclut les classes utilisées par l’espace de lecture. Aucun squelette de framework ne manque. ### Choisissez séparément les composants du framework selon vos besoins Un produit qui nécessite un composant Svelte de Skeleton ou un composant React doit utiliser le package du framework correspondant et suivre la configuration documentée. Cet exemple basé sur CSS reste utile pour comprendre les thèmes partagés et la couche utilitaire, mais il ne prétend pas offrir la même API que ces composants. Conservez cette distinction lorsque vous adaptez le guide fourni pour un agent. ## Exemples de composants du système de design Skeleton ### index.html Contenu de lecture complet, composants natifs CSS et commandes d’origine. ``` 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.

``` Référence du code - Conservez les quatre fichiers source dans un même répertoire de projet. ### style.css Imports de thèmes, variante sombre fondée sur les classes et composition adaptative. ``` @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} ``` Référence du code - Conservez les quatre fichiers source dans un même répertoire de projet. ### main.js Inspection des jetons calculés et états de lecture et de présentation indépendants. ``` 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(); ``` Référence du code - Conservez les quatre fichiers source dans un même répertoire de projet. ### vite.config.mjs Intégration réelle du compilateur Tailwind. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Référence du code - Conservez les quatre fichiers source dans un même répertoire de projet. ## Configuration de l’agent du système de design Skeleton ### Point de départ de l’implémentation Enregistrez d’abord les quatre fichiers fournis. Il s’agit de la couche utilitaire CSS, qui ne nécessite ni Svelte ni environnement d’exécution 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 pour votre projet ``` Implémentez l’espace de lecture complet Skeleton 5.0.1 à l’aide de ses véritables classes utilitaires CSS et des imports de thèmes Cerberus/Mint/Rose. Préservez le mode sombre fondé sur les classes, des lignes de jetons calculés faciles à lire, le contenu complet, l’état local d’enregistrement et la réinitialisation de la présentation sans suppression de cet état. Distinguez la couche CSS des API de composants des frameworks. ``` ## Sources et périmètre du système de design Skeleton Véritables classes utilitaires CSS Tailwind Skeleton et thèmes fournis, avec le comportement d’origine d’une page JavaScript native. Aucun environnement d’exécution Svelte Skeleton ou React n’est chargé. - Installation Choix de CSS et d’intégration au framework. - Thèmes Composition et sélection des thèmes. - Couleurs Associations de palettes et de contrastes. - Apparence sombre Comportement des modes de couleur et des variantes. - Éléments dépliables Couche CSS native details/summary. ## Ressources associées au système de design Skeleton ### Tabler Un journal de projet natif Tabler avec les véritables variables de thème 1.6, des cartes de chronologie, le contexte d’une datagrid, la validation d’une fenêtre modale et une composition claire ou sombre permettant d’ajouter des points de suivi locaux. ### Tamagui Explorez les véritables catégories de tokens v5 de Tamagui et ses thèmes bleus clair et sombre dans un tableau de suivi complet composé de composants natifs, avec validation, progression et récupération depuis un état vide. ### UIkit UIkit associe un framework CSS, une personnalisation Less et des composants JavaScript pilotés par attributs. Son Switcher, son Accordion et sa grille adaptative fonctionnent de concert dans le planificateur d’atelier ci-dessous, pour illustrer la limite entre le comportement natif des composants et l’état de sélection de l’application. - [Référence de mise en œuvre](https://www.skeleton.dev/docs/svelte/design/themes) - [Source](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Source](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Source](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Source](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Référence du code](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Installation Choix de CSS et d’intégration au framework.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Thèmes Composition et sélection des thèmes.](https://www.skeleton.dev/docs/svelte/design/themes) - [Couleurs Associations de palettes et de contrastes.](https://www.skeleton.dev/docs/svelte/design/colors) - [Apparence sombre Comportement des modes de couleur et des variantes.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Éléments dépliables Couche CSS native details/summary.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)