Cores de Sistema CSS: Aproveitando o Estilo do Sistema Operacional

Fonte: Anto.pt

1. O Que São Cores de Sistema CSS?

As cores de sistema CSS são valores pré-definidos que correspondem às cores utilizadas pelo sistema operacional do usuário, permitindo que seus sites se integrem visualmente ao ambiente do usuário.

2. Cores de Sistema Principais

Valor CSS Descrição Exemplo de Uso
Canvas Cor de fundo de aplicativos background: Canvas;
CanvasText Cor do texto sobre Canvas color: CanvasText;
ButtonFace Cor de fundo de botões background: ButtonFace;
ButtonText Cor do texto em botões color: ButtonText;
Highlight Cor de seleção de itens background: Highlight;
HighlightText Cor do texto sobre Highlight color: HighlightText;

3. Benefícios das Cores de Sistema

4. Exemplo Prático

<style>
    body {
        background: Canvas;
        color: CanvasText;
        font-family: system-ui;
    }
    
    button {
        background: ButtonFace;
        color: ButtonText;
        padding: 0.5rem 1rem;
        border: 1px solid ButtonBorder;
    }
    
    ::selection {
        background: Highlight;
        color: HighlightText;
    }
</style>

5. Boas Práticas

Atenção: Algumas cores de sistema estão depreciadas na CSS3. Use com cautela.
  1. Sempre defina pares de foreground/background (ex: Canvas + CanvasText)
  2. Teste em diferentes sistemas operacionais
  3. Forneça fallbacks para navegadores antigos
  4. Combine com @media (prefers-color-scheme) para melhor controle

6. Referências