Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

Tw-Colors

Apresentando o melhor divisor de jogo para o seu aplicativo Tailwind! Diga adeus às variantes escuras e bagunçadas e variáveis ​​CSS bagunçadas. Com este plug -in de Tailwind, a alternância entre os temas de cores é tão fácil quanto alterar um nome de classe.

Destaques

  • Escalável , adicione quantos temas e cores quiser. Não há limite para o número de temas e cores que você pode usar

  • Flexível , não se limite às cores, com as variantes embutidas, você pode tema qualquer propriedade CSS

  • Fácil de adotar , não há necessidade de alterar sua marcação, apenas funciona!

  • Temas aninhados são suportados para casos de uso complexos

  • Apoio ao Intellisense CSS Full Tailwind

Changelog

Veja o Changelog completo aqui

Uso

 npm i -d tw -colors

Pegue uma configuração existente e mova as cores no plug -in createThemes , dando -lhe um nome (por exemplo, luz).

Tailwind.config.js

 + const {createThemes} = requer ('tw-colors');

   module.exports = {
      Conteúdo: ['./src/**/*. {astro ,html,js ,jsx,md,mdx.svelte,ts,tsx.vue}'],
      tema: {
         estende: {- cores: {- 'primário': 'Steelblue',- 'secundário': 'Darkblue',- 'marca': '#f3f3f3',- // ... outras cores-}},
      },
      plugins: [+ createThemes ({+ luz: {+ 'primário': 'Steelblue',+ 'secundário': 'DarkBlue',+ 'Brand': '#f3f3f3',+ // ... outras cores+}+} )],
   };

Dica: você pode usar qualquer nome de cor como costuma fazer, não apenas os do exemplo. O mesmo vale para os nomes do tema.

Aplicar class='light' ou data-theme='light' em qualquer lugar do seu aplicativo (o HTML ou a etiqueta corporal é um bom local para ele)

Veja as opções para personalizar o nome da classe

 - <html>+ <html class = 'luz'> ...
      <div class = 'BG-Brand'>
         <h1 class = 'text-primário'> ... </h1>
         <p class = 'text-secundário'> ... </p>
      </div>
      ...
   </html>

É isso, seu site tem um tema leve !

Adicionando mais temas

Tailwind.config.js

   const {createethemes} = requer ('tw-colors');

   module.exports = {
      Conteúdo: ['./src/**/*. {astro ,html,js ,jsx,md,mdx.svelte,ts,tsx.vue}'],
      Plugins: [
         createThemes ({
            luz: {
                'Primário': 'SteelBlue',
               'secundário': 'Darkblue',
               'marca': '#f3f3f3',
            },+ escuro: {+ 'primário': 'turquesa',+ 'secundário': 'tomato',+ 'marca': '#4a4a4a',+},+ floresta: {+ 'primary': '#2a9d8f' ,+ 'secundário': '#e9c46a',+ 'marca': '#264653',+},+ inverno: {+ 'primário': 'hsl (45 39% 69%)',+ 'secundário': ' RGB (120 210 50) ',+' marca ':' HSL (54 93% 96%) ',+},})
      ],
   };

Agora você tem uma luz , um tema escuro e uma floresta !

Trocar de temas

Basta mudar a classe ou o atributo de tema de dados

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

Variantes

Com base no tema atual, estilos específicos podem ser aplicados usando variantes.

NOTA: No exemplo a seguir, as variantes não teriam efeito com data-theme='light'

   <!-Use a fonte "serif" apenas para o tema sombrio->
   <Div Data-theme = 'Dark' Class = 'Fonte-Sans Dark: Font-Serif'> ... <div> Fonte serif aqui </div> <!-Este botão é arredondado quando o tema é 'Dark' -> <Button class = 'Dark: Rounded'> Clique em mim </botão>
   </div>

Veja as opções para personalizar o nome da variante

Advertência: Grupo- {Modifier} Sempre use a variante do grupo antes da variante do tema.
   <html class = 'themark'> ... <div class = 'group'> <div class = 'tema-dark: Group hover: BG-RED-500'> A variante do grupo não funciona </div > <div class = 'Group hover: Theme-Dark: BG-RED-500'> ✅ A variante do grupo funciona corretamente </div> </div>
       </html>

Temas aninhados

Com o tempo de dados

Apenas ninhe os temas ...

   <html data-theMe = 'escuro'>
      ...
      <Div Data-theMe = 'Winter'>
         ...
      </div>

      <Div Data-theMe = 'Forest'>
         ...
      </div>
   </html>

Com classe

Para que as variantes funcionem corretamente em temas aninhados, um atributo vazio data-theme deve ser adicionado ao lado da class tema aninhada

   <html class = 'Dark'>
      ...
      <Div Data-Them Class = 'Winter'>
         ...
      </div>

      <Div Data-Them Class = 'Forest'>
         ...
      </div>
   </html>

Advertências:

Não defina opacidade na definição de cores Ao usar temas aninhados, é melhor não fornecer uma opacidade básica em suas definições de cores.

Com essa configuração, a opacidade 0.8 definida na cor primária do tema "pai" será herdada pela cor principal do tema "criança".

 createThemes ({
   Pai: {
       'Primário': 'HSL (50 50% 50% / 0,8)', // Não faça isso, a opacidade padrão se propagará ao tema da criança 'secundário': 'Darkblue',
   },
   criança: {
       'primário': 'turquesa', 'secundário': 'tomate',
   },})
 <html data-theMe = 'pai'>

   <Div Data-theme = 'Child'> <!-A cor primária tem uma opacidade 0,8 inesperada-> <Button Class = 'BG-Primary'> Clique em mim </botão>
      ... </div> </html>
Propriedades herdadas

As propriedades herdadas (por exemplo, "fontes-família") são herdadas por todos os descendentes , incluindo temas aninhados. Para impedir a propagação, os estilos base devem ser declarados novamente em temas aninhados

Comportamento inesperado

   <html class = 'tema-escuro font-sans tema-escuro: font-serif'> ... <div> ✅ serif está ativo foi herdado do tema dos pais </div>
        </html>

✅ funciona como esperado

   <html class = 'tema-escuro font-sans tem tema-escuro: font-serif'> ... <div> ✅ serif está ativo -Serif "> ✅ Sans está ativo </div>
      </html>

CSS Scheme de cores

createThemes também aceita uma função que expõe as funções light e dark .
Para aplicar a propriedade CSS color-scheme , basta envolver um tema com light ou dark . "

Consulte o MDN docs para obter mais detalhes sobre esse recurso.

Tailwind.config.js

 createThemes (({claro, escuro}) => ({
   'inverno': luz ({
       'Primário': 'SteelBlue', 'Base': 'Darkblue', 'Surface': '#f3f3f3',
   }),
   'floresta': escuro ({
       'Primário': 'Turquesa', 'Base': 'Tomato', 'Surface': '#4A4A4A',
   }),}))

Variáveis ​​CSS

O TW-Colors cria variáveis ​​CSS usando o formato --twc-[color name] Por padrão, elas contêm valores HSL.

Por exemplo, com a seguinte configuração, as variáveis --twc-primary , --twc-base , --twc-surface serão criadas.

Tailwind.config.js

   Module.exports = {// ... seus plugins de configuração de Tailwind: [createThemes ({'Winter': {
                'Primário': 'SteelBlue', 'Base': 'DarkBlue', 'Surface': '#f3f3f3',}, 'floresta': {
                'primário': 'turquesa', 'base': 'tomate', 'superfície': '#4a4a4a',},})],
   };

Exemplo de uso:

 .my-classe {color: hsl (var (-twc-primário));   Antecedentes: HSL (var (-TWC-primário) / 0,5);
}

Veja as opções para personalizar as variáveis ​​CSS

Opções

As opções podem ser passadas como o segundo argumento para o plug -in

 createThemes ({
   // suas cores configuram aqui ...}, {
   ProduCssVariable: (Colorname) => `--TWC-$ {colorname}`,
   ProductEtHemeclass: (themename) => `tema-$ {theMename}`
   ProductEtheMevariant: (themename) => `tema-$ {theMename}`
   DefaultTheme: 'Light'
   Estrito: Falso})

defaultTheme

O tema padrão a ser usado, pense nisso como um tema de fallback quando nenhum tema é declarado.

Exemplo: tema padrão simples

 createThemes ({
   'inverno': {
       'Primário': 'SteelBlue',
   },
   'Halloween': {
       'Primário': 'Crimson',
   },}, {
   DefaultTheme: 'Winter' // 'Winter' | 'Halloween'})

O tema padrão também pode ser escolhido de acordo com a preferência clara ou sombria do usuário (ver MDN prefere-se-scheme)

Exemplo: adaptação à preferência do usuário

 createThemes ({
   'inverno': {
       'Primário': 'SteelBlue',
   },
   'Halloween': {
       'Primário': 'Crimson',
   },}, {
   DefaultTheme: { / ** * Quando `@media (prefere-color-scheme: Light)` é comparado, * o tema padrão é o tema "inverno" * / luz: 'inverno',
       / ** * Quando `@media (prefere-cor-scheme: escuro)` é comparado, * o tema padrão é o tema "Halloween" */ escuro: 'Halloween',
    }})

estrito

Padrão : false

Se as cores false inválidas forem ignoradas.
Se as cores inválidas true produzirem um erro.

Exemplo

 createThemes ({
   'Natal': {
       // cor inválida 'primária': 'vermelha',
   },
   'Darkula': {
       'Primário': 'Crimson',
   },}, {
   // Um ​​erro será lançado
   Estrito: verdadeiro})

ProduCSSVariable

padrão : (colorName) => `--twc-${colorName}`

Personalize as variáveis ​​CSS geradas pelo plug -in.

Com a configuração abaixo, as seguintes variáveis ​​serão criadas:

  • --a-primary-z (em vez de twc-primário )

  • --a-secondary-z (em vez de twc-secundário )

  • --a-base-z (em vez de TWC-BASE )

 createThemes ({
   'luz': {
       'Primário': 'SteelBlue', 'secundário': 'Darkblue', 'Base': '#f3f3f3',
   },
   'escuro': {
       'primário': 'turquesa', 'secundário': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProduCSSVariable: (Colorname) => `--a-$ {colorname} -z`})

ProductEtheMeclass

padrão : (themeName) => themeName

Personalize os nomes de classe dos temas e variantes

Com a configuração abaixo, os seguintes nomes de nomes e variantes de temas serão criados:

  • theme-light (em vez de luz )

  • theme-dark (em vez de escuro )

 createThemes ({
   'luz': {
       'Primário': 'SteelBlue', 'secundário': 'Darkblue', 'Base': '#f3f3f3',
   },
   'escuro': {
       'primário': 'turquesa', 'secundário': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProductEtHemeclass: (themename) => `tema-$ {theMename}`})
 <html class = 'tema-dark'>
   ... <Button Class = 'tema-escuro: arredondado'> clique em mim </botão>
   ... </html>

ProductEtheMevariant

Padrão : o mesmo que produceThemeClass

Personalize as variantes

Com a configuração abaixo, as seguintes variantes serão criadas:

  • theme-light (em vez de luz )

  • theme-dark (em vez de escuro )

 createThemes ({
   'luz': {
       'Primário': 'SteelBlue', 'secundário': 'Darkblue', 'Base': '#f3f3f3',
   },
   'escuro': {
       'primário': 'turquesa', 'secundário': 'tomate', 'base': '#4a4a4a',
   },}, {
   ProductEtheMevariant: (themename) => `tema-$ {theMename}`})
 <html data-theMe = 'escuro'>
   ... <Button Class = 'tema-escuro: arredondado'> clique em mim </botão>
   ... </html>

Do mesmo autor

Apactação: Tiny 1KB Ferramenta de configuração para a API Fetch com padrão sensível

Por favor, compartilhe

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos