tw colors
1.0.0
Einführung des ultimativen Game-Changer für Ihre Tailwind-App! Verabschieden Sie sich von überfüllten dunklen Varianten und chaotischen CSS -Variablen. Mit diesem Rückenwind -Plugin ist das Umschalten zwischen Farbthemen ebenso mühelos wie das Ändern eines Klassennamens.
Skalierbar , fügen Sie so viele Themen und Farben hinzu, wie Sie möchten. Die Anzahl der Themen und Farbe, die Sie verwenden können
Flexibel , beschränken Sie sich nicht auf Farben. Mit den integrierten Varianten können Sie jede CSS-Eigenschaft testen
Einfach zu adoptieren , keine Notwendigkeit, Ihr Markup zu ändern, es funktioniert einfach!
Verschachtelte Themen werden für komplexe Anwendungsfälle unterstützt
Voller Rückenwind -CSS -Intellisense -Unterstützung
Sehen Sie hier den vollständigen ChangeLog
npm i -d Tw -Farben
Nehmen Sie eine vorhandene Rückenwindkonfiguration und bewegen Sie die Farben im createThemes -Plugin und geben Sie ihm einen Namen (z. B. Licht).
Tailwind.config.js
+ const {createStheMes} = fordert ('Tw-Colors');
module.exports = {
Inhalt: ['./src/**/*. <Astro,html,js.jsx,md,mdx,svelte,ts,tsx,vue}'],
Thema: {
Erweitert: {- Farben: {- 'Primär': 'SteelBlue',- 'Secondary': 'Darkblue',- 'Brand': '#f3f3f3',- // ... andere Farben-}},
},
Plugins: [+ createTheMes ({+ light: {+ 'primär': 'SteelBlue',+ 'Secondary': 'Darkblue',+ 'Brand': '#f3f3f3',+ // ... andere Farben+}+} )],
};TIPP: Sie können jeden Farbnamen wie normalerweise verwenden, nicht nur die aus dem Beispiel. Gleiches gilt für die Themennamen.
Anwenden class='light' oder data-theme='light' überall in Ihrer App (das HTML oder das Body-Tag ist ein guter Ort dafür)
Sehen Sie sich die Optionen zum Anpassen des Klassennamens an
- <html>+ <html class = 'light'> ...
<div class = 'bg-brand'>
<h1 class = 'text-primary'> ... </h1>
<p class = 'textsekundär'> ... </p>
</div>
...
</html>Das war's, Ihre Website hat ein leichtes Thema!
Tailwind.config.js
const {createSthemes} = fordert ('Tw-Colors');
module.exports = {
Inhalt: ['./src/**/*. <Astro,html,js.jsx,md,mdx,svelte,ts,tsx,vue}'],
Plugins: [
CreateTheme ({{
Licht: {
'Primär': 'SteelBlue',
'sekundär': 'darkblue',
'Brand': '#f3f3f3',
}. ,+ 'Secondary': '#e9c46a',+ 'Brand': '#264653',+},+ Winter: {+ 'primär': 'HSL (45 39% 69%)',+ 'Secondary': ':' RGB (120 210 50) ',+' Brand ':' HSL (54 93% 96%) ',+},})
],
};Sie haben jetzt ein helles , ein dunkeles und ein Waldthema !
Wechseln Sie einfach die Klasse oder das Daten-Themen- Attribut
- <html class = 'hell'>+ <html class = 'dark'> ... </html>
Basierend auf dem aktuellen Thema können bestimmte Stile mit Varianten angewendet werden.
HINWEIS: Im folgenden Beispiel hätten die Varianten keinen Einfluss auf data-theme='light'
<!-Verwenden Sie "serif" -Bont nur für das dunkle Thema-> <div data-theeme = 'dark' class = 'font-sans dunkel: font-serif'> ... <div> serif font hier </div> <!-Diese Schaltfläche ist abgerundet, wenn das Thema "dunkel" ist -> <button class = 'dark: abgerundet'> klicken Sie auf mich </button> </div>
Sehen Sie sich die Optionen zum Anpassen des Variantennamens an
<html class = 'themen-dark'> ... <div class = 'gruppe'> <div class = 'themendark: grupp-hover: bg-Red-500'> Die Gruppenvariante funktioniert nicht </div > <div class = 'Group-Hover: Theme-Dark: BG-RED-500'> ✅ Die Gruppenvariante funktioniert ordnungsgemäß </div> </div>
</html>Nisten Sie einfach die Themen ...
<html data-theme = 'dark'>
...
<div daten-themen = 'winter'>
...
</div>
<div daten-themen = 'Forest'>
...
</div>
</html> Damit Varianten in verschachtelten Themen ordnungsgemäß funktionieren, muss neben der verschachtelten class ein leeres data-theme Attribut hinzugefügt werden
<html class = 'dark'>
...
<div daten-themenklasse = 'winter'>
...
</div>
<div daten-themenklasse = 'Forest'>
...
</div>
</html>Vorbehalte:
Mit diesem Setup wird die in der Primärfarbe des Thema "Eltern" definierte 0,8 -Deckkraft durch die Hauptfarbe des "Child" -Themas vererbt.
CreateTheme ({{
Elternteil: {
'Primär': 'HSL (50 50% 50% / 0,8)', // Tun Sie dies nicht, die Standard -Deckkraft wird sich zum untergeordneten Thema "sekundär" ausbreiten: "Darkblue",
},
Kind: {
"Primär": "Türkis", "sekundär": "Tomate",
},}) <html data-themen = 'parent'>
<div data-theme = 'child'> <!-Die Primärfarbe hat eine unerwartete 0,8 Deckkraft-> <Button class = 'BG-Primary'> Klicken Sie auf mich </button>
... </div> </html>Erbliche Eigenschaften (z. B. "Schriftfamilie") werden von allen Nachkommen , einschließlich verschachtelter Themen, erbelt. Um die Ausbreitung zu stoppen
Unerwartetes Verhalten
<html class = 'themen-dark font-sans themendark: font-serif'> ... <div> ✅ serif ist aktiv </div> <div class = "themenlicht"> serif ist immer noch aktiv, es wurde vom übergeordneten Thema </div> geerbt
</html>✅ funktioniert wie erwartet
<html class = 'themen-dark font-sans thema-dark: font-serif'> ... <div> ✅ serif is aktiv </div> <div class = "themenlicht font-san -serif "> ✅ sans ist aktiv </div>
</html> createThemes akzeptiert auch eine Funktion, die die light und dark Funktionen enthüllt.
Um die CSS-Eigenschaft color-scheme anzuwenden, wickeln Sie einfach ein Thema mit light oder dark ein. "
Weitere Informationen zu dieser Funktion finden Sie in den MDN -Dokumenten.
Tailwind.config.js
createThemes (({hell, dunkel}) => ({{{
'Winter': Licht ({{{
'Primär': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#f3f3f3',,
}),
'Wald': dunkel ({{{{
'Primär': 'Türkis', 'Basis': 'Tomate', 'Surface': '#4a4a4a',,
}),})) Tw-Colors erstellen CSS-Variablen mit dem Format --twc-[color name] standardmäßig enthalten sie HSL-Werte.
Beispielsweise werden mit der folgenden Konfiguration die Variablen --twc-primary , --twc-base , --twc-surface erstellt.
Tailwind.config.js
module.exports = {// ... Ihre Tailwind -Konfigurations -Plugins: [createSthemes ({'winter': {
'Primär': 'SteelBlue', 'Basis': 'Darkblue', 'Surface': '#f3f3f3',}, 'Forest': {{
'primär': 'türkis', 'base': 'tomato', 'topere': '#4a4a4a',},})],
};Beispiel Verwendung:
.My-Klasse {Farbe: HSL (var (-twc-primary)); Hintergrund: HSL (var (-TWC-Primary) / 0,5);
}Sehen Sie sich die Optionen zum Anpassen der CSS -Variablen an
Die Optionen können als zweites Argument an das Plugin übergeben werden
CreateTheme ({{
// Ihre Farbenkonfiguration hier ...}, {
procouscsssvariable: (colorname) => `--twc-$ {colorname}`,,
ProducTheMeclass: (ThemeName) => `Thema-$ {ThemeName}`
produzieren
Standardtheme: 'Licht'
streng: false})Das zu verwendende Standardthema, betrachten Sie es als ein Fallback -Thema, wenn kein Thema deklariert wird.
Beispiel: Einfaches Standardthema
CreateTheme ({{
'Winter': {
'Primär': 'SteelBlue',
},
'Halloween': {
"Primär": "Crimson",
},}, {
Defaulttheme: 'Winter' // 'Winter' | 'Halloween'})Das Standardthema kann auch gemäß der Benutzerhell- oder dunkle Präferenz ausgewählt werden (siehe MDN bevorzugt die Farbscheme)
Beispiel: Anpassung an die Benutzerpräferenz
CreateTheme ({{
'Winter': {
'Primär': 'SteelBlue',
},
'Halloween': {
"Primär": "Crimson",
},}, {
DefaultTheme: { / ** * Wenn `@media (bevorzugt das Farbschema: Licht)` übereinstimmt, * Das Standardthema ist das "Winter" -Thema * / light: 'winter',.
/ ** * Wenn `@media (bevorzugt Farbscheme: Dark)`.
}}) Standard : false
Wenn false ungültige Farben ignoriert werden.
Wenn true ungültige Farben einen Fehler erzeugen.
Beispiel
CreateTheme ({{
'Weihnachten': {
// Ungültige Farbe 'primär': 'redisch',
},
'darkula': {
"Primär": "Crimson",
},}, {
// Ein Fehler wird geworfen
streng: wahr}) Standard : (colorName) => `--twc-${colorName}`
Passen Sie die vom Plugin erzeugten CSS -Variablen an.
Mit der folgenden Konfiguration werden die folgenden Variablen erstellt:
--a-primary-z (anstelle von TWC-Primary )
--a-secondary-z (anstelle von TWC-Sekundär )
--a-base-z (anstelle von TWC-Base )
CreateTheme ({{
'Licht': {
'Primär': 'SteelBlue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',,
},
'dunkel': {
'Primär': 'türkis', 'sekundär': 'Tomate', 'Basis': '#4a4a4a',,
},}, {
procouscsSsvariable: (colorname) => `--$ {colorname} -z`}) Standard : (themeName) => themeName
Passen Sie die Klassennamen der Themen und Varianten an
Mit der folgenden Konfiguration werden die folgenden Themenklassen und Varianten erstellt:
theme-light (statt Licht )
theme-dark (statt Dunkelheit )
CreateTheme ({{
'Licht': {
'Primär': 'SteelBlue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',,
},
'dunkel': {
'Primär': 'türkis', 'sekundär': 'Tomate', 'Basis': '#4a4a4a',,
},}, {
procousTheMeclass: (themename) => `thema-$ {themename}`})<html class = 'themendark'> ... <button class = 'themendark: abgerundet'> klicken Sie auf mich </button> ... </html>
Standard : Wie produceThemeClass
Passen Sie die Varianten an
Mit der folgenden Konfiguration werden die folgenden Varianten erstellt:
theme-light (statt Licht )
theme-dark (statt Dunkelheit )
CreateTheme ({{
'Licht': {
'Primär': 'SteelBlue', 'Secondary': 'Darkblue', 'Base': '#f3f3f3',,
},
'dunkel': {
'Primär': 'türkis', 'sekundär': 'Tomate', 'Basis': '#4a4a4a',,
},}, {
procousThemevariant: (themename) => `thema-$ {themename}`})<html data-theme = 'dark'> ... <button class = 'themendark: abgerundet'> klicken Sie auf mich </button> ... </html>
UP-Fetch: Tiny 1 KB Konfigurationstool für die Fetch-API mit vernünftiger Standard
Bitte teilen
