papopporking-oss/opencode-nextjs-standard

Cores do daisyUI 5

Nomes de cores do daisyUI

• primary: A cor principal da marca.
• primary-content: Cor de conteúdo de primeiro plano para uso sobre primary.
• secondary: Uma cor secundária opcional da marca.
• secondary-content: Cor de conteúdo de primeiro plano para uso sobre secondary.
• accent: Uma cor de destaque opcional da marca.
• accent-content: Cor de conteúdo de primeiro plano para uso sobre accent.
• neutral: Uma cor neutra escura para áreas de UI que não usam cores saturadas.
• neutral-content: Cor de conteúdo de primeiro plano para uso sobre neutral.
• base-100: A cor de superfície base da página para fundos em branco.
• base-200: Um tom base mais escuro que dá elevação.
• base-300: Um tom base ainda mais escuro que dá mais elevação.
• base-content: Cor de conteúdo de primeiro plano para uso sobre uma cor base.
• info: Cor para mensagens de informação e ajuda.
• info-content: Cor de conteúdo de primeiro plano para uso sobre info.
• success: Cor para mensagens de sucesso e estado seguro.
• success-content: Cor de conteúdo de primeiro plano para uso sobre success.
• warning: Cor para mensagens de aviso e cautela.
• warning-content: Cor de conteúdo de primeiro plano para uso sobre warning.
• error: Cor para mensagens de erro, perigo e ação destrutiva.
• error-content: Cor de conteúdo de primeiro plano para uso sobre error.

Regras de cores do daisyUI

1. O daisyUI adiciona nomes de cores semânticas às cores do Tailwind CSS.
2. Use nomes de cores do daisyUI em classes utilitárias como você usa outros nomes de cores do Tailwind CSS. Por exemplo, bg-primary usa a cor primária para o fundo.
3. O valor de cada nome de cor do daisyUI é uma variável. Assim, a cor pode mudar com o tema.
4. Não use dark: com nomes de cores do daisyUI.
5. Se possível, use apenas nomes de cores do daisyUI. Isso permite que as cores mudem automaticamente com o tema.
6. Se você usar um nome de cor do Tailwind CSS, como red-500, sua cor permanece a mesma em todos os temas.
7. Se você usar um nome de cor do daisyUI, como primary, sua cor muda com o tema.
8. Evite nomes de cores do Tailwind CSS para texto. Por exemplo, text-gray-800 sobre bg-base-100 se torna ilegível em um tema escuro porque bg-base-100 é escuro.
9. As cores *-content devem ter contraste claro com suas cores relacionadas.
10. Use cores base-* para a maior parte da página. Use a variante padrão para todos os elementos. Use primary apenas para o elemento mais importante da página. Use-o apenas uma vez.
11. Em casos raros, você pode usar uma cor do Tailwind CSS se o conteúdo precisar manter a mesma cor em todos os temas. Por exemplo, você pode usar text-red-500 em vez de text-error. Para um ícone SVG ou gráfico, uma cor fixa pode ser necessária.

Ativar e aplicar temas

A configuração padrão ativa light e dark. No plugin daisyUI, selecione temas específicos, todos os temas ou nenhum tema embutido:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

• Use themes: all; para ativar todos os temas embutidos.
• Use themes: false; para desativar todos os temas embutidos. Geralmente, faça isso antes de definir apenas temas personalizados.
• Adicione data-theme="NOME_DO_TEMA" a <html> ou a um elemento aninhado. Você pode aninhar temas sem limite de profundidade.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Tema aninhado</div>
  </section>
</html>

Tema personalizado do daisyUI com cores personalizadas

Um arquivo CSS que contém Tailwind CSS, daisyUI e um tema personalizado do daisyUI tem esta estrutura:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* definir como padrão */
  prefersdark: false; /* definir como modo escuro padrão (prefers-color-scheme:dark) */
  color-scheme: light; /* cor da UI fornecida pelo navegador */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* raio da borda de seletores (checkbox, toggle, badge) */
  --radius-field: 0.25rem; /* raio da borda de campos (button, input, select, tab) */
  --radius-box: 0.5rem; /* raio da borda de caixas (card, modal, alert) */
  /* valores preferidos para --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* tamanho base de seletores (checkbox, toggle, badge). O valor deve ser 0.25rem a menos que intencionalmente queiramos seletores maiores. Se for o caso, pode ser 0.28125 ou 0.3125. Se intencionalmente quisermos seletores menores, pode ser 0.21875 ou 0.1875 */
  --size-field: 0.25rem; /* tamanho base de campos (button, input, select, tab). O valor deve ser 0.25rem a menos que intencionalmente queiramos campos maiores. Se for o caso, pode ser 0.28125 ou 0.3125. Se intencionalmente quisermos campos menores, pode ser 0.21875 ou 0.1875 */

  --border: 1px; /* tamanho da borda. O valor deve ser 1px a menos que intencionalmente queiramos bordas mais espessas. Se for o caso, pode ser 1.5px ou 2px. Se intencionalmente quisermos bordas mais finas, pode ser 0.5px */

  --depth: 1; /* apenas 0 ou 1 - Adiciona uma sombra e um sutil efeito 3D de profundidade aos componentes */
  --noise: 0; /* apenas 0 ou 1 - Adiciona um sutil efeito de ruído (granulação) aos componentes */
}

Regras

• Você deve incluir todas as variáveis CSS do exemplo.
• As cores podem usar o formato OKLCH, hexadecimal ou outro.
• Se você gerar um tema personalizado, não inclua os comentários do exemplo. Dê apenas o código.

Opcional: Use a ferramenta visual em https://daisyui.com/theme-generator/ para criar um tema personalizado.

Alterar um tema embutido

Use o nome do tema embutido. Altere apenas os valores necessários. O daisyUI herda os outros valores:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

Para um tema CDN personalizado, defina as mesmas variáveis em um seletor. O seletor deve corresponder ao data-theme selecionado e ao controlador de tema:

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* defina as variáveis restantes do tema personalizado */
}

Para fazer a variante dark: do Tailwind seguir um ou mais temas do daisyUI, defina uma variante personalizada:

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));