Descargar tw colors - Descargar el código fuente de tw colors

tw colors

Otro código fuente

1.0.0

Descargar

Tw-Colors

¡Presentando el mejor cambio de juego para su aplicación de viento de cola! Diga adiós a las variantes oscuras desordenadas y las variables CSS desordenadas. Con este complemento de viento de cola, cambiar entre temas de color es tan fácil como cambiar un nombre de clase.

Reflejos

Escalable , agregue tantos temas y colores como desee. No hay límite en la cantidad de temas y color que puede usar
Flexible , no se limite a los colores, con las variantes incorporadas, puede temas de cualquier propiedad CSS
Fácil de adoptar , no es necesario cambiar su marcado, ¡simplemente funciona!
Los temas anidados son compatibles con casos de uso complejos
Soporte completo de viento de cola CSS

Colegio de cambios

Vea el CangeLog completo aquí

Uso

 npm i -d tw -colores

Tome una configuración de viento de cola existente y mueva los colores en el complemento createThemes , dándole un nombre (por ejemplo, luz).

tailwind.config.js

 + const {createthemes} = require ('tw-colores');

   módulo.exports = {
      Contenido: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      tema: {
         extiende: {- Colors: {- 'primario': 'SteelBlue',- 'Secundario': 'Darkblue',- 'Brand': '#F3F3F3',- // ... Otros colores-}},
      },
      Plugins: [+ CreateThemes ({+ Light: {+ 'primario': 'SteelBlue',+ 'Secundario': 'Darkblue',+ 'Brand': '#F3F3F3',+ // ... Otros colores+}+} )],
   };

Consejo: puede usar cualquier nombre de color como suele hacer, no solo los del ejemplo. Lo mismo ocurre con los nombres de los temas.

Aplicar class='light' o data-theme='light' en cualquier lugar de su aplicación (el HTML o la etiqueta del cuerpo es un buen lugar para ello)

Vea las opciones para personalizar el nombre de clase

 - <html>+ <html class = 'light'> ...
      <div class = 'bg-brand'>
         <H1 class = 'Text-Primary'> ... </h1>
         <P class = 'Text-Secundary'> ... </p>
      </div>
      ...
   </html>

¡Eso es todo, su sitio tiene un tema ligero !

Agregar más temas

tailwind.config.js

   const {createthemes} = require ('tw-colores');

   módulo.exports = {
      Contenido: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      complementos: [
         createthemes ({
            luz: {
                'Primario': 'SteelBlue',
               'Secundario': 'Darkblue',
               'Brand': '#F3F3F3',
            },+ oscuro: {+ 'primario': 'turquesa',+ 'secundario': 'tomate',+ 'marca': '#4a4a4a',+},+ bosque: {+ 'primario': '#2a9d8f' ,+ 'secundario': '#e9c46a',+ 'marca': '#264653',+},+ invierno: {+ 'primario': 'hsl (45 39% 69%)',+ 'secundario': ' RGB (120 210 50) ',+' Brand ':' HSL (54 93% 96%) ',+},})
      ]
   };

¡Ahora tienes una luz , un tema oscuro y un bosque !

Temas de cambio

Simplemente cambie la clase o el atributo del tema de datos

 - <html class = 'light'>+ <html class = 'Dark'> ...
   </html>

Variantes

Según el tema actual, se pueden aplicar estilos específicos utilizando variantes.

Nota: En el siguiente ejemplo, las variantes no tendrían efecto con data-theme='light'

   <!-Use la fuente "serif" solo para el tema oscuro->
   <div data-theme = 'dark' class = 'font-sans oscuro: font-serif'> ... <div> serif font aquí </div> <!-Este botón se redondea cuando el tema es `oscuro```` ' -> <Button class = 'Dark: Rounded'> Haga clic en mí </botón>
   </div>

Vea las opciones para personalizar el nombre de la variante

Advertencia: Group- {Modificador}

Siempre use la variante de grupo antes de la variante del tema.

   <html class = 'thema-dark'> ... <div class = 'group'> <div class = 'thema-dark: group-hover: bg-roD-500'> La variante de grupo no funciona </divs > <div class = 'Group-Hover: Temo-Dark: BG-RED-500'> ✅ La variante de grupo funciona correctamente </div> </div>
       </html>

Temas anidados

Con `tema de datos`

Solo anidan los temas ...

   <html data-theme = 'Dark'>
      ...
      <div data-theme = 'Winter'>
         ...
      </div>

      <div data-theme = 'bosque'>
         ...
      </div>
   </html>

Con `clase`

Para que las variantes funcionen correctamente en temas anidados, se debe agregar un atributo data-theme vacíos junto con la class temática anidada

   <html class = 'Dark'>
      ...
      <Div data-theme class = 'Winter'>
         ...
      </div>

      <div data-theme class = 'bosque'>
         ...
      </div>
   </html>

Advertencias:

No establezca la opacidad en la definición de color

Cuando se usa temas anidados, es mejor no proporcionar una opacidad base en sus definiciones de color.

Con esta configuración, la opacidad 0.8 definida en el color primario del tema "Parent" será heredado por el color principal del tema del "niño".

 createthemes ({
   Padre: {
       'Primario': 'HSL (50 50% 50% / 0.8)', // No hagas esto, la opacidad predeterminada se propagará al tema infantil 'secundario': 'Darkblue',
   },
   niño: {
       'primario': 'turquesa', 'secundario': 'tomate',
   },})

 <html data-theme = 'parent'>

   <div data-theme = 'child'> <!-El color primario tiene una opacidad 0.8 inesperada-> <button class = 'bg-primary'> haga clic en mí </botón>
      ... </div> </html>

Propiedades hereditarias

Las propiedades hereditarias (por ejemplo, "Font-Family") son heredadas por todos los descendientes , incluidos los temas anidados. Para detener la propagación, los estilos de base deben volver a decarse en temas anidados

Comportamiento inesperado

   <html class = 'TEMA DARK FONT-SANS TEMBLE-DARK: FONT-SERIF'> ... <VIV> ✅ SERIF ES ACTIVO </div> <div class = "Thing-Light"> Serif sigue activo, es activo, es Me heredé del tema principal </div>
        </html>

✅ Funciona como se esperaba

   <html class = 'TEMA DARK FONT-SANS SANSO DARK: FONT-SERIF'> ... <div> ✅ Serif es activo </div> <div class = "Font-Sans-Sans-Dark: Font -serif "> ✅ sans está activo </div>
      </html>

CSS-Color-Scheme

createThemes también acepta una función que expone las funciones light y dark .
Para aplicar la propiedad CSS color-scheme , simplemente envuelva un tema con light o dark ".

Vea los documentos de MDN para obtener más detalles sobre esta función.

tailwind.config.js

 CreateThemes ((({Light, Dark}) => ({
   'Winter': Light ({
       'Primario': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#F3F3F3',
   }),
   'Bosque': Dark ({
       'primario': 'turquesa', 'base': 'tomate', 'superficie': '#4a4a4a',
   }),}))

Variables CSS

TW-Colors crea variables CSS utilizando el formato --twc-[color name] de forma predeterminada, contienen valores HSL.

Por ejemplo, con la siguiente configuración, se crearán las variables --twc-primary , --twc-base , --twc-surface .

tailwind.config.js

   módulo.exports = {// ... sus complementos de configuración de viento de cola: [CreateThemes ({'Winter': {
                'Primario': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#F3F3f3',}, 'Forest': {
                'primario': 'turquesa', 'base': 'tomate', 'superficie': '#4a4a4a',},})],
   };

Ejemplo de uso:

 .mi-class {color: hsl (var (-twc-primary));   Antecedentes: HSL (var (-twc-primary) / 0.5);
}

Vea las opciones para personalizar las variables CSS

Opción

Las opciones se pueden pasar como el segundo argumento al complemento

 createthemes ({
   // tus colores configuran aquí ...}, {
   ProduceCSSVariable: (COLORNAME) => `--TWC-$ {COLORNAME}`,
   ProductethemecLass: (themename) => `tema-$ {themename}`
   ProductetHeMeVariant: (themename) => `tema-$ {themename}`
   DefaultTheme: 'Light'
   estricto: falso})

`THEME DEFORTA`

El tema predeterminado de usar, piense en él como un tema de alternativa cuando no se declara ningún tema.

Ejemplo: tema predeterminado simple

 createthemes ({
   'invierno': {
       'Primario': 'SteelBlue',
   },
   'Halloween': {
       'Primario': 'Crimson',
   },}, {
   DefaultTheme: 'Winter' // 'Winter' | 'Víspera de Todos los Santos'})

El tema predeterminado también se puede elegir de acuerdo con la luz del usuario o la preferencia oscura (consulte MDN Prefers-Color-Scheme)

Ejemplo: adaptación a la preferencia del usuario

 createthemes ({
   'invierno': {
       'Primario': 'SteelBlue',
   },
   'Halloween': {
       'Primario': 'Crimson',
   },}, {
   DefaultTheme: { / ** * Cuando `@media (prefers-color-scheme: light)` coincide, * el tema predeterminado es el tema "invierno" * / light: 'invierno',
       / ** * Cuando `@media (prefiere color-esquema: oscuro)` se combina, * el tema predeterminado es el tema "Halloween" */ Dark: 'Halloween',
    }})

`estricto`

Valor predeterminado : false

Si se ignoran los colores false inválidos.
Si true colores no válidos producen un error.

Ejemplo

 createthemes ({
   'Navidad': {
       // Color no válido 'Primario': 'Redish',
   },
   'Darkula': {
       'Primario': 'Crimson',
   },}, {
   // se lanzará un error
   Strict: True})

`productecsvariable`

predeterminado : (colorName) => `--twc-${colorName}`

Personalice las variables CSS generadas por el complemento.

Con la siguiente configuración, se crearán las siguientes variables:

--a-primary-z (en lugar de twc-primary )
--a-secondary-z (en lugar de TWC-Secundary )
--a-base-z (en lugar de TWC-Base )

 createthemes ({
   'luz': {
       'Primario': 'SteelBlue', 'Secundario': 'Darkblue', 'Base': '#F3F3F3',
   },
   'oscuro': {
       'primario': 'turquesa', 'secundario': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProduceCSSVariable: (COLORNAME) => `--A-$ {COLORNAME} -Z`})

`productetemeclass`

predeterminado : (themeName) => themeName

Personalizar los nombres de clase de los temas y variantes

Con la configuración a continuación, se creará los siguientes modelos y variantes de ClassSmed temas:

theme-light (en lugar de luz )
theme-dark (en lugar de oscuro )

 createthemes ({
   'luz': {
       'Primario': 'SteelBlue', 'Secundario': 'Darkblue', 'Base': '#F3F3F3',
   },
   'oscuro': {
       'primario': 'turquesa', 'secundario': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProductethemecLass: (themename) => `tema-$ {themename}`})

 <html class = 'teme-dark'>
   ... <button class = 'thema-dark: redondeado'> Haga clic en mí </botón>
   ... </html>

`productemevariante`

Valor predeterminado : igual que produceThemeClass

Personalizar las variantes

Con la siguiente configuración, se crearán las siguientes variantes:

theme-light (en lugar de luz )
theme-dark (en lugar de oscuro )

 createthemes ({
   'luz': {
       'Primario': 'SteelBlue', 'Secundario': 'Darkblue', 'Base': '#F3F3F3',
   },
   'oscuro': {
       'primario': 'turquesa', 'secundario': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProductetHeMeVariant: (themename) => `tema-$ {themename}`})

 <html data-theme = 'Dark'>
   ... <button class = 'thema-dark: redondeado'> Haga clic en mí </botón>
   ... </html>

Del mismo autor

Fetch Up: Tiny de 1 kb de configuración para la API de Fetch con valor predeterminado sensible

Por favor comparta

Expandir

Información adicional

Versión 1.0.0
Tipo Otro código fuente
Fecha de actualización 2025-02-06
tamaño 17.46KB
Proviene de Github

Aplicaciones relacionadas

GitHub sgrebnov/cordova plugin background download

2024-11-05
Wa ch ull navra maza navsacha 2 2024 ull ovie Fr e Online On Strea ings

2024-11-03
Wa ch navra maza navsacha 2 2024 ull ovie Online For Fr e Strea ings At Home

2024-11-03
Wa ch the greatest of all time 2024 ull ovie Online For Fr e Strea ings At Home

2024-11-02
wolfs 2024 f llmo ie f lmyz lla dow load ree 7 0p 4 0p a d 10 0p

2024-11-01
Aurora: colores ocultos

2022-08-02

Recomendado para ti

chat.petals.dev

Otro código fuente

1.0.0
GPT Prompt Templates

Otro código fuente

1.0.0
GPTyped

Otro código fuente

GPTyped 1.0.5
waymo open dataset

Otro código fuente

December 2023 Update
SmartTube

Otro código fuente

24.71 Stable
Sunamu

Otro código fuente

Release 2.2.0
waymo open dataset

Otro código fuente

December 2023 Update
wp functions

Otras categorias

1.0.0
termwind

Otras categorias

v2.3.0

Información relacionada Todo

tw colors

Tw-Colors

Reflejos

Colegio de cambios

Uso

Agregar más temas

Temas de cambio

Variantes

Temas anidados

Con tema de datos

Con clase

CSS-Color-Scheme

Variables CSS

Opción

THEME DEFORTA

estricto

productecsvariable

productetemeclass

productemevariante

Del mismo autor

Con `tema de datos`

Con `clase`

`THEME DEFORTA`

`estricto`

`productecsvariable`

`productetemeclass`

`productemevariante`