Skip to content

THEMES_AND_STYLING.md

Latest commit

 

History

History
68 lines (48 loc) · 3.48 KB

THEMES_AND_STYLING.md

File metadata and controls

68 lines (48 loc) · 3.48 KB
Raw

🎨 Temas e Sistema Visual Glassmorphism

Guia completo sobre a identidade visual Glassmorphism utilizada no GlassHub Quasar, como funcionam os temas nativos e como criar combinacões customizadas através do Theme Studio.

✨ 1. O que é Glassmorphism?

O Glassmorphism é uma tendência de design moderna que simula o efeito de vidro fosco translúcido (frosted glass). No GlassHub Quasar, esse conceito é traduzido em vetores SVG puros utilizando:

  1. Transparência e Fundo Translúcido: rgba(15, 23, 42, 0.78)
  2. Reflexos Especulares de Luz: Gradientes em camadas superiores simulando incidência de luz sobre vidro.
  3. Bordas em Gradiente Neon: Combinação de cores vibrantes com gradiente (#06B6D4 Neon Cyan e #1D4ED8 Cobalt Blue).
  4. Sombras Projetadas Suaves (Drop Shadows): Sombras difusas <filter id="glassShadow"> para dar profundidade de camada.

🎭 2. Temas Predefinidos

O engine traz 10 temas pré-configurados:

Nome do Tema Chave na API Descrição
Glass Dark (Padrão) glass-dark Vidro fosco escuro cósmico com destaques Cyan e Azul Cobalt.
Glass Light glass-light Vidro translúcido claro com tipografia escura elegante.
Cosmic Cyan cosmic-cyan Tema ciano vibrante inspirado em nebulosas espaciais.
Cyber Purple cyber-purple Estética cyberpunk com degradê Roxo e Rosa Neon.
Emerald Matrix emerald-matrix Vidro esverdeado inspirado na matriz cibernética.
Solar Flare solar-flare Tons quentes de Laranja e Vermelho solar.
Catppuccin Mocha catppuccin-mocha Roxo pastel suave, ciano e azul no estilo Catppuccin.
Tokyo Night tokyo-night Azul noturno profundo com destaques magenta e ciano.
Nord Aurora nord-aurora Tons árticos frios com verde aurora e azul gélido.
Vaporwave Sunset vaporwave-sunset Estética retrô 80s com rosa neon, violeta e ciano.

Exemplo de uso de temas:

![Glass Dark](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&theme=glass-dark)
![Cyber Purple](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&theme=cyber-purple)
![Emerald Matrix](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&theme=emerald-matrix)

🌗 3. Adaptação Automática ao Modo Dark/Light do GitHub

Para fazer com que seu card mude de cor automaticamente se o visitante estiver usando o GitHub no Modo Claro ou Escuro, basta adicionar a flag auto_theme=true:

![Auto Theme](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&auto_theme=true)

Como funciona por baixo dos panos? O vetor SVG injeta uma regra CSS @media (prefers-color-scheme: light) diretamente no cabeçalho <style> do SVG. Quando o navegador do usuário alterna o tema do GitHub, o próprio SVG altera suas cores sem precisar recarregar a imagem!

🛠️ 4. Theme Studio (Personalização Hexadecimal)

Se você desejar aplicar uma paleta de cores própria, você pode passar os valores hexadecimais na URL:

  • bg: Cor do fundo da placa (ex: bg=0f172a)
  • border: Cor da borda translúcida (ex: border=06b6d4)
  • text: Cor da tipografia principal (ex: text=f8fafc)
  • glow_color: Cor do brilho e ícones (ex: glow_color=06b6d4)
![Custom Hex](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&bg=0f172a&border=06b6d4&text=ffffff&glow_color=06b6d4)