Bootstrap: Modo Escuro

Q: P: Posso fazer apenas partes da página usarem modo escuro?

R: Sim. data-bs-theme="dark" pode ser aplicado a qualquer elemento HTML, afetando apenas seu conteúdo interno. Testes mostram que modo escuro seccional + claro global podem ser misturados.

Última atualização: 2026-08-26

1. Introdução ao Curso

(1) Pré-requisitos

Fluxo de Personalização Sass do Bootstrap (Lição 20)
Noções básicas de Propriedades Customizadas CSS (variáveis CSS)
Noções básicas de Manipulação DOM com JavaScript

(2) 🎯 O que você vai aprender

Habilitar o modo escuro usando o atributo data-bs-theme
Implementar um botão de alternância de tema + persistência em localStorage
Seguir automaticamente a preferência prefers-color-scheme do sistema
Personalizar variáveis CSS do modo escuro
Dominar técnicas de adaptação de imagens e componentes no modo escuro

(3) O Problema

O painel administrativo da Charlie precisa de um botão de alternância "Modo Dia/Noite". A implementação tradicional exige escrever dois conjuntos de estilos para cada componente, o que é extremamente custoso de manter e propenso a omissões de estilo durante a troca.

(4) A Solução

O Bootstrap 5.3 introduz suporte nativo a modo escuro. Usando o atributo data-bs-theme="dark", a página inteira ou componentes individuais podem alternar entre os temas claro/escuro, com todos os estilos de componentes se adaptando automaticamente. A troca global de tema é alcançada com apenas uma mudança de atributo.

(5) Benefício

Charlie só precisa adicionar um botão de alternância. Uma única mudança no atributo data-bs-theme habilita a troca global de tema, e todos os estilos de componentes se adaptam automaticamente ao modo escuro sem precisar escrever manualmente nenhum estilo de sobrescrita escura.

2. Modo Escuro Básico

▶ Exemplo: Demonstração Básica de Modo Escuro

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Modo Escuro</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <!-- Seção do modo claro -->
    <h5>Modo Claro (padrão)</h5>
    <div class="card p-3 mb-3">
      <p>Este card usa o tema claro padrão.</p>
      <button class="btn btn-primary">Botão</button>
    </div>

    <!-- Seção do modo escuro -->
    <div data-bs-theme="dark">
      <h5>Modo Escuro</h5>
      <div class="card p-3 mb-3">
        <p>Este card se adapta automaticamente ao tema escuro.</p>
        <button class="btn btn-primary">Botão</button>
        <div class="alert alert-warning mt-2">Alerta também se adapta.</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

3. Três Escopos

Escopo	Sintaxe	Descrição
Global	`<html data-bs-theme="dark">`	A página inteira fica em modo escuro
Seccional	`<div data-bs-theme="dark">`	Os componentes dentro do contêiner especificado ficam escuros
Componente	`<div class="card" data-bs-theme="dark">`	Um único card fica escuro

HTML

<!-- Modo escuro global -->
<html data-bs-theme="dark">
  <!-- todos os componentes usam o tema escuro -->
</html>

▶ Experimente

4. Botão de Alternância de Tema

HTML

<button id="themeToggle" class="btn btn-outline-primary">
  <i class="bi bi-moon"></i> Modo Escuro
</button>

<script>
  const toggle = document.getElementById('themeToggle')
  toggle.addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme')
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    toggle.innerHTML = next === 'dark'
      ? '<i class="bi bi-sun"></i> Modo Claro'
      : '<i class="bi bi-moon"></i> Modo Escuro'
  })
</script>

▶ Experimente

(1) Lembrando a Preferência do Usuário

HTML

<script>
  // Verifica a preferência salva ao carregar
  const saved = localStorage.getItem('theme')
  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  }

  document.getElementById('themeToggle').addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme') || 'light'
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    localStorage.setItem('theme', next)
  })
</script>

▶ Experimente

5. Seguindo Automaticamente a Preferência do Sistema

HTML

<script>
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
  const saved = localStorage.getItem('theme')

  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  } else if (prefersDark.matches) {
    document.documentElement.setAttribute('data-bs-theme', 'dark')
  }

  // Ouve a mudança de tema do sistema
  prefersDark.addEventListener('change', (e) => {
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light')
    }
  })
</script>

▶ Experimente

6. Variáveis CSS para Modo Escuro

O Bootstrap 5.3 usa propriedades customizadas CSS para a troca de tema. Você pode sobrescrever diretamente variáveis do modo escuro no seu CSS:

CSS

/* Cores customizadas do modo escuro */
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1a2e;
  --bs-body-color: #e0e0e0;
  --bs-primary: #bb86fc;
  --bs-primary-rgb: 187, 134, 252;
  --bs-card-bg: #16213e;
  --bs-border-color: #2a2a4a;
}

▶ Experimente

(1) Abordagem Sass

SCSS

// scss/custom.scss
$enable-dark-mode: true;

// Sobrescrever cores do modo escuro
$dark-bg: #1a1a2e;
$dark-card-bg: #16213e;
$primary-dark: #bb86fc;

// Importar Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

▶ Experimente

7. Adaptação de Imagem no Modo Escuro

HTML

<style>
.dark-show { display: none; }
[data-bs-theme="dark"] .dark-show { display: block; }
[data-bs-theme="dark"] .dark-hide { display: none; }
</style>
<img src="logo-light.png" class="dark-hide" alt="Logo claro">
<img src="logo-dark.png" class="dark-show" alt="Logo escuro">

▶ Experimente

8. Exemplos Abrangentes

▶ Exemplo: Página Completa de Alternância de Modo Escuro

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alternância de Modo Escuro</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-moon-stars me-2"></i>Demonstração de Tema</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto align-items-center">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Recursos</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Preços</a></li>
          <li class="nav-item ms-2">
            <button id="themeToggle" class="btn btn-outline-primary btn-sm rounded-pill">
              <i class="bi bi-moon"></i> <span id="themeLabel">Escuro</span>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-5">
    <h1>Demonstração de Modo Escuro</h1>
    <p class="lead">Clique no botão de alternância para trocar entre os temas claro e escuro.</p>

    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Componente Card</h5>
          <p>Se adapta automaticamente ao tema.</p>
          <button class="btn btn-primary">Primário</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Exemplo de Alerta</h5>
          <div class="alert alert-success mt-2">Alerta de sucesso</div>
          <div class="alert alert-danger">Alerta de perigo</div>
          <div class="alert alert-info">Alerta de informação</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Elementos de Formulário</h5>
          <input type="text" class="form-control mb-2" placeholder="Campo de input">
          <select class="form-select mb-2"><option>Opção 1</option></select>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="ck"><label class="form-check-label" for="ck">Marque-me</label></div>
        </div>
      </div>
    </div>

    <div class="card p-4">
      <h5>Tabela</h5>
      <table class="table">
        <thead><tr><th>Nome</th><th>Função</th><th>Status</th></tr></thead>
        <tbody>
          <tr><td>Alice</td><td>Admin</td><td><span class="badge bg-success">Ativo</span></td></tr>
          <tr><td>Bob</td><td>Editor</td><td><span class="badge bg-warning">Pendente</span></td></tr>
          <tr><td>Charlie</td><td>Visualizador</td><td><span class="badge bg-secondary">Inativo</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const toggle = document.getElementById('themeToggle');
    const label = document.getElementById('themeLabel');
    const icon = toggle.querySelector('i');

    function setTheme(theme) {
      document.documentElement.setAttribute('data-bs-theme', theme);
      localStorage.setItem('theme', theme);
      const isDark = theme === 'dark';
      label.textContent = isDark ? 'Escuro' : 'Claro';
      icon.className = isDark ? 'bi bi-moon' : 'bi bi-sun';
    }

    const saved = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    setTheme(saved || (prefersDark.matches ? 'dark' : 'light'));

    toggle.addEventListener('click', () => {
      const current = document.documentElement.getAttribute('data-bs-theme');
      setTheme(current === 'dark' ? 'light' : 'dark');
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Experimente

▶ Exemplo: Modo Escuro Sass + Variáveis CSS

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modo Escuro + Sass</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --brand-primary: #6f42c1;
      --brand-accent: #e83e8c;
    }
    [data-bs-theme="dark"] {
      --brand-primary: #bb86fc;
      --brand-accent: #ff4081;
      --custom-bg: #1a1a2e;
      --custom-card-bg: #16213e;
    }
    .custom-section {
      background: var(--custom-bg, #f8f9fa);
      padding: 2rem;
      border-radius: 0.5rem;
    }
    .custom-card-css {
      background: var(--custom-card-bg, #ffffff);
      border: 1px solid var(--bs-border-color, #dee2e6);
      border-radius: 0.5rem;
      padding: 1.5rem;
    }
    .brand-icon { color: var(--brand-primary); font-size: 2rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Sass + Variáveis CSS</h5>
      <button class="btn btn-outline-primary btn-sm" onclick="document.documentElement.setAttribute('data-bs-theme', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark')">
        <i class="bi bi-arrow-repeat"></i> Alternar Tema
      </button>
    </div>

    <div class="custom-section">
      <h5>Seção Customizada</h5>
      <p>O fundo usa a variável CSS <code>--custom-bg</code>, muda com o tema.</p>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-palette brand-icon d-block mb-2"></i>
          <h6>Cor de Marca</h6>
          <p class="text-body-secondary small">Primário: <code>--brand-primary</code> muda por tema.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Card Bootstrap</h5>
          <p class="text-body-secondary">Suporte nativo a modo escuro.</p>
          <button class="btn btn-primary">Botão</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-heart brand-icon d-block mb-2"></i>
          <h6>Cor de Destaque</h6>
          <p class="text-body-secondary small">Destaque: <code>--brand-accent</code> para realces.</p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Experimente

▶ Exemplo: Troca de Imagem no Modo Escuro

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Troca de Imagem no Modo Escuro</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Troca de Imagem para Modo Escuro</h5>
      <button class="btn btn-outline-primary btn-sm rounded-pill" onclick="toggleTheme()">
        <i class="bi bi-moon"></i> Alternar
      </button>
    </div>

    <div class="row g-4">
      <div class="col-md-6">
        <div class="card p-4">
          <h5>Método 1: CSS Personalizado de Visibilidade por Tema</h5>
          <p class="text-body-secondary">Mostra imagem diferente por tema.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <i class="bi bi-sun-fill fs-1 text-warning dark-hide"></i>
            <i class="bi bi-moon-fill fs-1 text-primary dark-show"></i>
            <p class="mt-2 mb-0"><span class="dark-hide">☀️ Imagem Modo Claro</span><span class="dark-show">🌙 Imagem Modo Escuro</span></p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card p-4">
          <h5>Método 2: Filtro CSS</h5>
          <p class="text-body-secondary">Inverte cores para modo escuro.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <img src="https://via.placeholder.com/200x100/0d6efd/fff?text=Logo" class="img-fluid dark-invert" alt="Logo" style="max-width:200px;">
          </div>
          <style>
            [data-bs-theme="dark"] .dark-invert {
              filter: invert(0.85) hue-rotate(180deg);
            }
          </style>
        </div>
      </div>
    </div>

    <div class="card p-4 mt-3">
      <h5>Método 3: elemento picture</h5>
      <div class="text-center">
        <picture>
          <source srcset="https://via.placeholder.com/400x100/1a1a2e/bb86fc?text=Dark+Logo" media="(prefers-color-scheme: dark)" id="darkSource">
          <img src="https://via.placeholder.com/400x100/0d6efd/fff?text=Light+Logo" class="img-fluid rounded-3" alt="Logo Responsivo" style="max-width:400px;">
        </picture>
      </div>
    </div>
  </div>

  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
    }
  </script>
</body>
</html>

▶ Experimente

▶ Exemplo: Página de Modo Escuro Parcial

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modo Escuro Parcial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Demonstração de Modo Escuro Seccional</h5>
    <p class="text-body-secondary">Diferentes seções da mesma página usam temas diferentes.</p>

    <!-- Card claro -->
    <div class="row g-4">
      <div class="col-md-6">
        <div data-bs-theme="light">
          <div class="card p-4 border-0 shadow-sm">
            <h5>☀️ Seção Clara</h5>
            <p>Esta seção permanece clara independentemente do tema global.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primário</button>
              <button class="btn btn-outline-secondary">Secundário</button>
            </div>
            <div class="alert alert-info mt-3">Alerta modo claro</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Valor</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Card escuro -->
      <div class="col-md-6">
        <div data-bs-theme="dark">
          <div class="card p-4 border-0 shadow-sm">
            <h5>🌙 Seção Escura</h5>
            <p>Esta seção permanece escura — útil para painéis.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primário</button>
              <button class="btn btn-outline-secondary">Secundário</button>
            </div>
            <div class="alert alert-info mt-3">Alerta modo escuro</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Valor</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Card misto: componentes com temas individuais -->
    <h5 class="mt-5">Temas em Nível de Componente</h5>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card p-3" data-bs-theme="light" style="width:200px;">
        <h6>Card Claro</h6>
        <button class="btn btn-primary btn-sm">Botão</button>
      </div>
      <div class="card p-3" data-bs-theme="dark" style="width:200px;">
        <h6>Card Escuro</h6>
        <button class="btn btn-primary btn-sm">Botão</button>
      </div>
      <div class="card p-3" style="width:200px;">
        <h6>📕 Segue Global</h6>
        <button class="btn btn-primary btn-sm">Botão</button>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

(1) Arquitetura do Sistema de Modo Escuro

graph TD
    subgraph "Fontes de Tema"
        A1[Usuário Clica no Botão de Alternância]
        A2[Preferência do Sistema matchMedia]
        A3[Armazenamento localStorage]
    end

    subgraph "Aplicação de Tema"
        B[data-bs-theme attribute]
        C[Troca de Variável CSS]
        D[Redesenho do Estilo do Componente]
    end

    subgraph "Detecção de Tema"
        E[window.matchMedia<br/>prefers-color-scheme]
        F[getAttribute<br/>data-bs-theme]
        G[localStorage.getItem]
    end

    A1 --> B
    A2 --> B
    A3 --> B
    B --> C
    C --> D

    E --> A2
    F --> A1
    G --> A3

(2) Tabela de Variáveis CSS do Modo Escuro

Nome da Variável	Padrão Claro	Padrão Escuro	Propósito
`--bs-body-bg`	`#fff`	`#212529`	Cor de fundo da página
`--bs-body-color`	`#212529`	`#dee2e6`	Cor do texto do corpo
`--bs-card-bg`	`#fff`	`#2b3035`	Cor de fundo do card
`--bs-border-color`	`#dee2e6`	`#495057`	Cor de borda
`--bs-primary`	`#0d6efd`	`#6ea8fe`	Cor primária do tema
`--bs-secondary`	`#6c757d`	`#adb5bd`	Cor secundária
`--bs-navbar-color`	`rgba(0,0,0,0.55)`	`rgba(255,255,255,0.55)`	Cor do texto da navbar

(3) Tabela de Comparação de Métodos de Detecção de Tema

Método	Implementação	Vantagens	Desvantagens	Cenário Recomendado
Alternância Manual pelo Usuário	JS + `localStorage`	Controle do usuário, persistência de preferência	Requer elemento de UI adicional	Todas as aplicações
Seguimento Automático do Sistema	`matchMedia('prefers-color-scheme')`	Adaptação perfeita, suporte de navegador moderno	Não alterna offline	Sites de notícias, blogs
Auto-Troca Baseada em Hora	JS verificando hora atual	Escuro automático à noite	Pode não coincidir com preferência	Aplicações de leitura
Parâmetro URL + Cookie	Leitura no servidor	Sem flash de conteúdo no primeiro carregamento	Implementação complexa	Páginas críticas para SEO

(4) Tabela da Propriedade CSS `color-scheme`

Valor da Propriedade	Efeito	Descrição
`color-scheme: light`	Navegador usa scrollbar e controles de formulário claros	Valor padrão
`color-scheme: dark`	Navegador usa scrollbar e controles de formulário escuros	Para uso com modo escuro
`color-scheme: light dark`	Navegador seleciona automaticamente pela preferência do sistema	Recomendado para configuração global
`color-scheme: normal`	Nenhum esquema definido	Navegador decide
`<meta name="color-scheme" content="light dark">`	Declarado no head do HTML	Configuração global rápida sem CSS

❓ Perguntas Frequentes

📖 Resumo

data-bs-theme="dark" habilita o modo escuro, aplicado a html, um contêiner ou um componente
Troca de tema: JS modifica o atributo data-bs-theme + localStorage salva a preferência
Preferência do sistema: matchMedia('prefers-color-scheme: dark') segue automaticamente
Sobrescrita de variável CSS: [data-bs-theme="dark"] { --bs-body-bg: ... }
Imagens: CSS personalizado com seletores [data-bs-theme] controla a visibilidade em diferentes temas

📝 Exercícios

⭐ Adicione um botão de alternância de modo escuro ao site corporativo da Lição 19. O botão deve trocar o tema global, com a preferência armazenada em localStorage.
⭐⭐ Personalize um conjunto de variáveis de marca escuras: fundo #0d1117 (estilo GitHub), fundo de card #161b22, cor primária #58a6ff.
⭐⭐⭐ Exiba cards claros e escuros na mesma página (defina data-bs-theme respectivamente), e compare as diferenças em cor de texto, fundo, borda e botões.

Lição Anterior: Personalização Sass · Próxima Lição: Otimização de Desempenho e Implantação

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

Bootstrap: Modo Escuro

1. Introdução ao Curso

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) O Problema

(4) A Solução

(5) Benefício

2. Modo Escuro Básico

▶ Exemplo: Demonstração Básica de Modo Escuro

3. Três Escopos

4. Botão de Alternância de Tema

(1) Lembrando a Preferência do Usuário

5. Seguindo Automaticamente a Preferência do Sistema

6. Variáveis CSS para Modo Escuro

(1) Abordagem Sass

7. Adaptação de Imagem no Modo Escuro

8. Exemplos Abrangentes

▶ Exemplo: Página Completa de Alternância de Modo Escuro

▶ Exemplo: Modo Escuro Sass + Variáveis CSS

▶ Exemplo: Troca de Imagem no Modo Escuro

▶ Exemplo: Página de Modo Escuro Parcial

(1) Arquitetura do Sistema de Modo Escuro

(2) Tabela de Variáveis CSS do Modo Escuro

(3) Tabela de Comparação de Métodos de Detecção de Tema

(4) Tabela da Propriedade CSS color-scheme

❓ Perguntas Frequentes

📖 Resumo

📝 Exercícios

(4) Tabela da Propriedade CSS `color-scheme`