Usando a condicional IF do CSS

Aprenda como aplicar a nova função if() do CSS para alternar entre temas claro e escuro sem precisar de classes adicionais.

Gunnar Correa

07/11/2025 2 minutos

O CSS vem evoluindo constantemente, e uma das adições mais interessantes é a função if(). Ela permite criar condições diretamente no CSS, sem depender de JavaScript para alternar valores ou aplicar temas.

Neste artigo, você verá um exemplo prático de como usar if() com a função style() para alternar automaticamente entre o modo dark e light, usando apenas variáveis CSS.

Entendendo o if() e o style()

A função if() avalia condições e aplica o primeiro valor verdadeiro. É como um switch ou if/else em JavaScript, mas diretamente no CSS.

Já a função style() permite comparar o valor de uma variável CSS, algo que var() não faz.

Exemplo simplificado:

plaintext

color: if(
  style(--theme: dark): #eee;
  style(--theme: light): #000;
  else: #333;
);

Se --theme for dark, o texto ficará claro; se for light, escuro; e caso não seja nenhum dos dois, cinza.

Integrando com JavaScript

plaintext

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Usando CSS condicional com if()</title>

    <style>
        :root {
            --theme: light;
            --color-white: #fff;
            --color-black: #000;
            --color-grey: #eee;
        }

        body {
            background-color:
                if(style(--theme: dark): var(--color-black);
                    style(--theme: light): var(--color-white);
                    else: var(--color-grey);
                );
        }
    </style>

</head>

<body>

    <button id="toggle">Trocar tema</button>

    <script>
        let isLight = true;
        let getTheme = () => isLight ? 'light' : 'dark';

        document.querySelector('#toggle').addEventListener('click', () => {
            isLight = !isLight;
            document.documentElement.style.setProperty('--theme', getTheme());
        });
    </script>

</body>

</html>

Considerações

Essa função ainda é experimental, disponível em versões mais recentes do Chrome Canary e Safari Tech Preview. Mesmo assim, ela representa um avanço enorme rumo a um CSS mais inteligente e autônomo.

Aproveite também para assistir a nossa videoaula complementar, disponível abaixo.