NOTA: Alguns dos exemplos interativos podem usar CSS que você ainda não aprendeu. Não se preocupe em tentar entender todo o código. O objetivo dos exemplos é mostrar prévias desses conceitos de design para que você entenda melhor como as coisas funcionam. O modo escuro é um recurso especial em aplicações web onde você pode alterar o esquema de cores claro padrão para um esquema de cores escuro. Isso ajuda a reduzir a fadiga ocular e melhorar a legibilidade em condições de pouca luz. Ao projetar seus recursos de modo escuro, é importante entender as melhores práticas para garantir que seu recurso de modo escuro seja eficaz e fácil de usar. Ative o editor interativo e clique no botão Toggle Dark Mode no exemplo abaixo para ver como o modo escuro funciona.

<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">Toggle Dark Mode</button>

<div class="content">
  <p>This is a simple dark mode example.</p>
</div>

<script src="index.js"></script>

body {
  background: #f5f5f5;
  color: #222;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
}

button {
  margin: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

body.dark {
  background: #121212;
  color: #e0e0e0;
}

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

A primeira consideração é evitar cores saturadas no modo escuro. Cores saturadas são cores que são brilhantes e intensas. Por exemplo, um botão magenta brilhante contra um fundo cinza escuro pode ser muito intenso e causar cansaço visual. Em vez disso, você deve usar cores dessaturadas no modo escuro. Cores dessaturadas são cores que são menos intensas, têm um nível de saturação mais baixo e são mais confortáveis de olhar no modo escuro. To see the previews, you will need to enable the interactive editor.

<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">Toggle Dark Mode</button>

<div class="content">
  <h1>Color Saturation in Dark Mode</h1>
  <p>Compare the two buttons below. The first uses a saturated color, the second is desaturated for better accessibility in dark mode.</p>

  <div class="buttons">
    <button class="saturated">Saturated Button</button>
    <button class="desaturated">Desaturated Button</button>
  </div>
</div>

<script src="index.js"></script>

body {
  background-color: #f0f0f0;
  color: #111;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
  padding: 1rem;
}

button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 1rem;
  transition: background 0.3s, color 0.3s;
}

.buttons button {
  border: none;
}

.saturated {
  background-color: #ff00ff; 
  color: white;
}

.desaturated {
  background-color: #c472b5; 
  color: white;
}

body.dark {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark .saturated {
  background-color: #ff00ff; 
  color: black;
}

body.dark .desaturated {
  background-color: #925f88; 
  color: white;
}

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Outra consideração com o modo escuro é o uso de fundos preto puro com texto branco. Embora esse alto contraste possa ser eficaz, ele também pode ser muito agressivo para os olhos. Em vez disso, considere usar um fundo cinza escuro com texto cinza claro para um contraste mais suave. O texto será mais fácil para os olhos e mais confortável para ler no modo escuro. To see the previews, you will need to enable the interactive editor.

<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">Toggle Dark Mode</button>

<div class="content">
  <h1>Dark Mode Contrast Comparison</h1>
  <p>Compare the two sections below. One uses pure black and white, the other uses dark gray and light gray for better readability.</p>

  <div class="dark-mode-examples">
    <div class="box harsh-dark">
      <h2>High Contrast</h2>
      <p>Pure black background with white text. While readable, it can be harsh on the eyes.</p>
    </div>

    <div class="box soft-dark">
      <h2>Soft Contrast</h2>
      <p>Dark gray background with light gray text. Easier to read and more comfortable for long periods.</p>
    </div>
  </div>
</div>

<script src="index.js"></script>

body {
  background-color: #f0f0f0;
  color: #111;
  font-family: sans-serif;
  padding: 1rem;
  transition: background 0.3s, color 0.3s;
}

button {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.dark-mode-examples {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.box {
  padding: 1rem;
  border-radius: 8px;
  width: 300px;
  transition: background 0.3s, color 0.3s;
}

.box {
  background-color: #ffffff;
  color: #111;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.dark .box.harsh-dark {
  background-color: #000000; 
  color: #ffffff;           
}

body.dark .box.soft-dark {
  background-color: #1e1e1e; 
  color: #cccccc;           
}

body.dark {
  background-color: #121212;
  color: #e0e0e0;
}

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Outra consideração é o uso do modo escuro com a identidade da marca do site. Uma identidade de marca é um conjunto de elementos visuais que representam uma marca, como o logo, as cores e a tipografia. Ao implementar o modo escuro, você deve considerar como o recurso de modo escuro é consistente com as cores e o estilo da sua marca. É aceitável ter o ícone da marca e os botões com saturação total, enquanto os elementos ao redor estão dessaturados. Em geral, quando se trata de design, você sempre deve estar atento à experiência do usuário e aos níveis de contraste. O modo escuro não é exceção e, seguindo essas melhores práticas, você pode criar um recurso de modo escuro que seja eficaz e fácil de usar.