O modo escuro se tornou uma preferência popular, então você deve procurar apoiá-lo em seus sites e aplicativos da web.

Nos últimos anos, o modo escuro ganhou popularidade significativa como opção de interface do usuário. Oferece um fundo mais escuro complementado por texto mais claro, o que não só reduz o cansaço visual, mas também conserva a vida útil da bateria, especialmente em telas OLED.

Descubra como você pode adicionar uma opção de modo escuro aos seus sites e aplicativos da web, usando uma combinação de CSS e JavaScript.

Compreendendo o modo escuro

O modo escuro é um esquema de cores alternativo para o seu site que troca o tradicional fundo claro por um escuro. Torna suas páginas mais agradáveis ​​aos olhos, especialmente em condições de pouca luz. O modo escuro se tornou um recurso padrão em muitos sites e aplicativos devido à sua natureza amigável.

Configurando Seu Projeto

Antes de implementar isso, certifique-se de ter um projeto configurado e pronto para trabalhar. Você deve ter seus arquivos HTML, CSS e JavaScript organizados de forma estruturada.

instagram viewer

O código HTML

Comece com a seguinte marcação para o conteúdo da sua página. Um visitante poderá usar o tema__switcher elemento para alternar entre o modo escuro e claro.

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

O código CSS

Adicione o seguinte CSS para estilizar o exemplo. Isso funcionará como o modo claro padrão, que mais tarde você aumentará com novos estilos para uma visualização no modo escuro.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

No momento, sua interface deve ficar assim:

Implementando o modo escuro usando CSS e JavaScript

Para implementar o modo escuro, você definirá sua aparência usando CSS. Em seguida, você usará JavaScript para alternar entre os modos claro e escuro.

Criando as Classes Temáticas

Use uma classe para cada tema para poder alternar facilmente entre os dois modos. Para um projeto mais completo, você deve considerar como o modo escuro pode afetar todos os aspectos do seu design.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Selecionando os Elementos Interativos

Adicione o seguinte JavaScript ao seu script.js arquivo. O primeiro pedaço de código simplesmente seleciona os elementos que você usará para lidar com a alternância.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Adicionando a funcionalidade de alternância

Em seguida, use o seguinte JavaScript para alternar entre o modo claro (luz) e modo escuro (escuro) Aulas. Observe que também é uma boa ideia alterar a chave seletora para indicar o modo atual. Este código faz isso com um filtro CSS.

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

Isso faz com que sua página mude de tema com um clique no contêiner de alternância.

Aprimorando o modo escuro com JavaScript

Considere as duas melhorias a seguir que podem tornar seus sites no modo escuro mais agradáveis ​​de usar para seus visitantes.

Detectando preferências do usuário

Isso envolve verificar o tema do sistema do usuário antes que o site carregue e ajustar seu site para corresponder. Veja como você pode fazer isso usando o matchMedia função:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

Agora, qualquer usuário que visitar seu site verá um design que corresponde ao tema atual do seu dispositivo.

Persistindo a preferência do usuário com armazenamento local

Para melhorar ainda mais a experiência do usuário, usar armazenamento local para lembrar o modo escolhido pelo usuário nas sessões. Isso garante que eles não precisem selecionar repetidamente o modo preferido.

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

Abraçando o design centrado no usuário

O modo escuro vai além da aparência; trata-se de colocar o conforto e as preferências do usuário em primeiro lugar. Seguindo essa abordagem, você pode criar interfaces fáceis de usar e incentivar visitas repetidas. Ao codificar e projetar, priorize o bem-estar do usuário e ofereça uma experiência digital melhor para seus leitores.