Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Tema

Última atualização:

O sistema de temas somente CSS da Frutjam usa variáveis ​​CSS e um único atributo de dados. Alterne entre temas claros, escuros e personalizados sem JavaScript. Tokens de cores WCAG AA integrados, funcionam com Django, HTMX, Laravel e qualquer projeto Tailwind CSS v4.

Frutjam vem com um sistema de temas Berry – um conjunto de temas nomeados baseados em valores de cores OKLCH. Aplique um tema a todo o seu aplicativo ou aninhe temas em seções específicas usando o atributo data-theme. Somente CSS, sem necessidade de JavaScript, acessível por WCAG AA - funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.

Temas integrados

Frutjam inclui dois temas integrados prontos para uso:

Snowberry (claro)

O tema claro padrão. Aplicado automaticamente quando nenhum data-theme está definido.

html 
1
2
3
4
5
6
7
<html data-theme="snowberry">
  <!-- or use the alias -->
</html>

<html data-theme="light">
  <!-- same as snowberry -->
</html>

Amora escura (escuro)

O tema escuro integrado.

html 
1
2
3
4
5
6
7
<html data-theme="darkberry">
  <!-- or use the alias -->
</html>

<html data-theme="dark">
  <!-- same as darkberry -->
</html>

Aplicando um tema

Adicione data-theme a qualquer elemento HTML. O tema se estende a todas as crianças.

html 
1
2
3
4
5
6
<!-- Apply globally -->
<html data-theme="snowberry">
  <body>
    <!-- All components use snowberry theme -->
  </body>
</html>

Temas aninhados

Os temas podem ser aninhados — um elemento filho substitui o tema pai em sua subárvore.

html 
1
2
3
4
5
6
7
8
9
<html data-theme="snowberry">
  <section data-theme="darkberry">
    <!-- This section uses the dark theme -->
    <button class="btn btn-primary">Dark Button</button>
  </section>

  <!-- Back to light theme here -->
  <button class="btn btn-primary">Light Button</button>
</html>

Variante do modo escuro

Use o prefixo dark: do Tailwind - ele é ativado em data-theme="dark" e data-theme="darkberry".

html 
1
2
3
<p class="text-on-base dark:text-primary">
  Adapts to the active theme automatically.
</p>

Temas personalizados

Crie seu próprio tema definindo variáveis ​​CSS dentro de um seletor [data-theme]. Consulte a página Configuração para obter a referência completa da variável.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@layer theme {
  :is([data-theme="myberry"]) {
    --scheme-color: light;
    --border-radius: 0.5rem;
    --color-base: oklch(1 0 0);
    --color-primary: oklch(55% 0.22 142);
    --color-secondary: oklch(60% 0.18 280);
    --color-accent: oklch(70% 0.20 60);
  }
}
html 
1
2
3
<html data-theme="myberry">
  <!-- Your custom theme is active -->
</html>