Thématisation
Utilisation de l'interface Web
La manière la plus simple de commencer avec les thèmes FormKit (pour Tailwind) est de se rendre directement sur https://themes.formkit.com, de personnaliser un thème choisi selon vos préférences, puis de sélectionner Télécharger le thème pour recevoir des commandes spécifiques à exécuter à la racine de votre projet.
Utilisation du CLI
Alternativement, vous pouvez utiliser le CLI de FormKit pour générer des thèmes pour votre projet. Pour commencer, exécutez la commande suivante dans le même répertoire que votre fichier formkit.config.{ts|js} :
npx formkit theme
Vous serez guidé pour choisir un thème existant comme point de départ pour votre projet. Cette commande créera un fichier formkit.theme.{ts|js} à la racine de votre projet. Pour compléter la configuration, vous devrez utiliser les rootClasses de ce fichier de thème dans votre formkit.config.{ts|js} :
// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'
export default defaultConfig({
locales: { fr },
locale: 'fr',
config: {
rootClasses,
},
})
Enfin, vous devrez ajouter le fichier formkit.theme.{ts|js} à la propriété content de votre fichier de configuration Tailwind. Cela garantira que les styles du thème soient inclus dans le CSS de votre projet :
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app.vue",
"./formkit.theme.ts" // <-- ajoutez votre fichier de thème
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
Si vous exécutez la commande à nouveau, vous serez redirigé vers https://themes.formkit.com où vous pourrez personnaliser votre thème choisi.
# avec un fichier formkit.theme existant à la racine de votre projet
> npx formkit theme
? Found local theme file for <themeName>, edit this theme? › (Y/n)
Ajout d'icônes
Par défaut, les icônes requises par FormKit seront chargées depuis le CDN lorsqu'elles sont demandées. Si vous préférez inclure les icônes directement dans votre bundle pour augmenter la performance, éviter tout effet de pop-in, ou pour pallier d'éventuels problèmes de SSR, alors importez l'ensemble genesisIcons depuis @formkit/icons et étendez-les dans la propriété icons de votre configuration FormKit.
npm install @formkit/icons
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
plugins: [proPlugin],
icons: {
...genesisIcons
}
})
...
Personnalisation supplémentaire
Une fois que vous avez un thème dans votre projet, vous pouvez le personnaliser davantage en suivant la documentation fournie dans la section de style des docs FormKit.