tw colors
1.0.0
Présentation de l'ultime changeur de jeu pour votre application de vent arrière! Dites adieu aux variantes sombres encombrées et aux variables CSS désordonnées. Avec ce plugin de vent arrière, basculer entre les thèmes de couleur est aussi sans effort que de modifier un nom de classe.
Évolutif , ajouter autant de thèmes et de couleurs que vous le souhaitez. Il n'y a pas de limite sur le nombre de thèmes et de couleur que vous pouvez utiliser
Flexible , ne vous limitez pas aux couleurs, avec les variantes intégrées, vous pouvez thème n'importe quelle propriété CSS
Facile à adopter , pas besoin de changer votre balisage, cela fonctionne juste!
Les thèmes imbriqués sont pris en charge pour des cas d'utilisation complexes
Soutien complet de CSS Intellisense
Voir The Full Changelog ici
NPM I -D TWOLORS
Prenez une configuration de vent arrière existante et déplacez les couleurs du plugin createThemes , en lui donnant un nom (par exemple la lumière).
tailwind.config.js
+ const {createThemes} = require ('tw-coulors');
module.exports = {
Contenu: ['./src/**/*..
thème: {
étend: {- couleurs: {- 'primaire': 'SteelBlue', - 'secondaire': 'darkblue', - 'marque': '# f3f3f3', - // ... autres couleurs-}},
},
Plugins: [+ CreateTheMemes ({+ Light: {+ 'Primary': 'SteelBlue', + 'Secondary': 'DarkBlue', + 'Brand': '# f3f3f3', + // ... Autres couleurs +} +} )],
};Astuce: vous pouvez utiliser n'importe quel nom de couleur comme vous le faites habituellement, pas seulement ceux de l'exemple. Il en va de même pour les noms de thème.
Appliquer class='light' ou data-theme='light' partout dans votre application (le HTML ou la balise corporelle est un bon endroit pour cela)
Voir les options pour personnaliser le nom de classe
- <html> + <html class = 'light'> ...
<div class = 'bg-brand'>
<h1 class = 'text-primary'> ... </h1>
<p class = 'text-secondary'> ... </p>
</div>
...
</html>C'est tout, votre site a un thème léger !
tailwind.config.js
const {CreateTheMes} = require ('tw-colors');
module.exports = {
Contenu: ['./src/**/*..
Plugins: [
CreateThememes ({
lumière: {
«primaire»: «SteelBlue»,
«secondaire»: «Darkblue»,
'Brand': '# f3f3f3',
}, + Dark: {+ 'primaire': 'turquoise', + 'secondaire': 'tomato', + 'marque': '# 4a4a4a', +}, + forêt: {+ 'primaire': '# 2a9d8f' , + 'secondaire': '# e9c46a', + 'marque': '# 264653', +}, + hiver: {+ 'primaire': 'hsl (45 39% 69%)', + 'secondaire': ' RVB (120 210 50) ', +' marque ':' HSL (54 93% 96%) ', +},})
],
};Vous avez maintenant un thème clair , sombre et forestier !
Changez simplement la classe ou l'attribut de thème de données
- <html class = 'light'> + <html class = 'dark'> ... </html>
Sur la base du thème actuel, des styles spécifiques peuvent être appliqués à l'aide de variantes.
Remarque: Dans l'exemple suivant, les variantes n'auraient aucun effet avec data-theme='light'
<! - Utilisez la police "Serif" pour le thème sombre uniquement ->> <div data-thème = 'dark' class = 'font-san somb: font-serif'> ... <div> serif font ici </div> <! - Ce bouton est arrondi lorsque le thème est `Dark` -> <Button class = 'dark: arrond'> cliquez sur moi </fontificateur> </div>
Voir les options pour personnaliser le nom de la variante
<html class = 'theme-dark'> ... <div class = 'groupe'> <div class = 'theme-dark: groupe-hover: bg-red-500'> la variante de groupe ne fonctionne pas </ div > <div class = 'Group-Hover: Theme-Dark: BG-red-500'> ✅ La variante de groupe fonctionne correctement </div> </div>
</html>Nicez juste les thèmes ...
<html data-thème = 'dark'>
...
<div data-thème = 'hiver'>
...
</div>
<div data-thème = 'forêt'>
...
</div>
</html> Pour que les variantes fonctionnent correctement dans des thèmes imbriqués, un attribut data-theme vide doit être ajouté aux côtés de la class de thème imbriquée
<html class = 'dark'>
...
<div data-thème class = 'hiver'>
...
</div>
<div data-thème class = 'forêt'>
...
</div>
</html>Mises en garde:
Avec cette configuration, l'opacité 0,8 définie sur la couleur primaire du thème "parent" sera héritée par la couleur principale du thème "enfant".
CreateThememes ({
parent: {
«primaire»: «HSL (50 50% 50% / 0,8)», // Ne faites pas cela, l'opacité par défaut se propagera au thème de l'enfant «secondaire»: «DarkBlue»,
},
enfant: {
«primaire»: «turquoise», «secondaire»: «tomate»,
},}) <html data-thème = 'parent'>
<div data-theme = 'child'> <! - La couleur principale a une opacité inattendue de 0,8 -> <bouton class = 'bg-primary'> cliquez sur moi </fut-bouton>
... </div> </html>Les propriétés héritées (par exemple "font-famille") sont héritées par tous les descendants , y compris des thèmes imbriqués. Afin d'arrêter la propagation, les styles de base doivent être redéclarés sur des thèmes imbriqués
Comportement inattendu
<html class = 'theme-dark Font-Sans theme-dark: font-serif'> ... <div> ✅ Serif est actif </div> <div class = "thème-light"> serif est toujours actif, il obtenu hérité du thème parent </div>
</html>✅ fonctionne comme prévu
<html class = 'theme-dark Font-Sans theme-dark: font-serif'> ... <div> ✅ Serif est actif </div> <div class = "thème-light font-sac theme-dark: font -Serif "> ✅ Sans est actif </div>
</html> createThemes accepte également une fonction qui expose les fonctions light et dark .
Pour appliquer la propriété color-scheme CSS, enveloppez simplement un thème avec light ou dark . "
Voir les documents MDN pour plus de détails sur cette fonctionnalité.
tailwind.config.js
CreateTheMemes (({Light, Dark}) => ({{
'hiver': Light ({
«primaire»: «SteelBlue», «base»: «Darkblue», «Surface»: «# f3f3f3»,
}),
'Forest': Dark ({
«primaire»: «turquoise», «base»: «tomate», «surface»: «# 4A4A4A»,
}),})) TW-Colors crée des variables CSS à l'aide du format --twc-[color name] Par défaut, ils contiennent des valeurs HSL.
Par exemple, avec la configuration suivante, les variables --twc-primary , --twc-base , --twc-surface seront créées.
tailwind.config.js
module.exports = {// ... Vos plugins de configuration du vent arrière: [CreateTheMes ({'hiver': {
«Primaire»: «SteelBlue», «Base»: «DarkBlue», «Surface»: «# F3F3F3»,}, «Forest»: {
«primaire»: «turquoise», «base»: «tomate», «surface»: «# 4A4A4A»,},})],
};Exemple d'utilisation:
.my-classe {couleur: hsl (var (- twc-primary)); CONTEXTE: HSL (VAR (- TWC-Primaire) / 0,5);
}Voir les options pour personnaliser les variables CSS
Les options peuvent être passées comme deuxième argument au plugin
CreateThememes ({
// vos couleurs configurent ici ...}, {
producsssvariable: (colorname) => `--twc - $ {colorname}`,
ProduceTheMeClass: (ThemeName) => `thème - $ {thememename}`
ProduceTheMevariant: (ThemeName) => `thème - $ {thememename}`
DefaultTheme: 'Light'
strict: faux})Le thème par défaut à utiliser, considérez-le comme un thème de secours lorsqu'aucun thème n'est déclaré.
Exemple: thème par défaut simple
CreateThememes ({
'hiver': {
«primaire»: «SteelBlue»,
},
'Halloween': {
«primaire»: «cramoisie»,
},}, {
DefaultTheme: 'hiver' // 'hiver' | 'Halloween'})Le thème par défaut peut également être choisi en fonction de la lumière de l'utilisateur ou de la préférence sombre (voir MDN Prefers-Color-Scheme)
Exemple: s'adapter à la préférence des utilisateurs
CreateThememes ({
'hiver': {
«primaire»: «SteelBlue»,
},
'Halloween': {
«primaire»: «cramoisie»,
},}, {
DefaultTheme: {/ ** * Lorsque `@Media (préfère-Color-Scheme: Light)` est assorti, * Le thème par défaut est le thème "d'hiver" * / Light: 'Winter',
/ ** * Quand `@media (préfère-Color-Scheme: Dark)` est assorti, * Le thème par défaut est le thème "Halloween" * / Dark: 'Halloween',
}}) par défaut : false
Si false couleurs non valides sont ignorées.
Si true couleurs non valides produisent une erreur.
Exemple
CreateThememes ({
'Noël': {
// Couleur non valide «primaire»: «Redish»,
},
'Darkula': {
«primaire»: «cramoisie»,
},}, {
// une erreur sera lancée
strict: vrai}) par défaut : (colorName) => `--twc-${colorName}`
Personnalisez les variables CSS générées par le plugin.
Avec la configuration ci-dessous, les variables suivantes seront créées:
--a-primary-z (au lieu de TWC-primaire )
--a-secondary-z (au lieu de TWC-Secondary )
--a-base-z (au lieu de TWC-Base )
CreateThememes ({
'lumière': {
«Primaire»: «SteelBlue», «Secondary»: «Darkblue», «base»: # F3F3F3 »,
},
'sombre': {
«primaire»: «turquoise», «secondaire»: «tomate», «base»: «# 4A4A4A»,
},}, {
producsssvariable: (colorname) => `--a - $ {colorname} -z`}) par défaut : (themeName) => themeName
Personnalisez les noms de classe des thèmes et des variantes
Avec la configuration ci-dessous, les noms de classe et variantes de thème suivants seront créés:
theme-light (au lieu de la lumière )
theme-dark (au lieu de l'obscurité )
CreateThememes ({
'lumière': {
«Primaire»: «SteelBlue», «Secondary»: «Darkblue», «base»: # F3F3F3 »,
},
'sombre': {
«primaire»: «turquoise», «secondaire»: «tomate», «base»: «# 4A4A4A»,
},}, {
ProduceTheMeClass: (ThemeName) => `thème - $ {thememename}`})<html class = 'thème-dark'> ... <Button class = 'theme-dark: arrond'> cliquez sur moi </fontificateur> ... </ html>
Par défaut : Identique à produceThemeClass
Personnaliser les variantes
Avec la configuration ci-dessous, les variantes suivantes seront créées:
theme-light (au lieu de la lumière )
theme-dark (au lieu de l'obscurité )
CreateThememes ({
'lumière': {
«Primaire»: «SteelBlue», «Secondary»: «Darkblue», «base»: # F3F3F3 »,
},
'sombre': {
«primaire»: «turquoise», «secondaire»: «tomate», «base»: «# 4A4A4A»,
},}, {
ProduceTheMevariant: (ThemeName) => `thème - $ {thememename}`})<html data-thème = 'dark'> ... <Button class = 'theme-dark: arrond'> cliquez sur moi </fontificateur> ... </ html>
Fetch Fetch: minuscule outil de configuration de 1KB pour l'API Fetch avec une défaut sensible
Veuillez partager
