[Dúvida] dark mode em site com mais de uma página

Oi Isabela, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Isso ocorre porque, ao navegar para uma nova página, a informação sobre o tema escolhido é perdida e o tema padrão (dark) é restaurado.

Uma solução para esse problema é utilizar o Armazenamento Local (Local Storage) do navegador para guardar a preferência de tema do usuário. Dessa forma, quando o usuário alterar o tema em uma página, a escolha será armazenada no navegador e poderá ser recuperada em outras páginas do mesmo site.

Para isso vamos fazer algumas alterações no seu arquivo JavaScript:

// Função para definir o tema
function setTheme(theme) {
  document.body.classList.remove("light", "dark");
  document.body.classList.add(theme);
  localStorage.setItem('theme', theme);
}

// Função para alternar o tema ao clicar no botão
document.querySelector("#btn").addEventListener("click", () => {
  const isLight = document.body.classList.contains("light");
  setTheme(isLight ? "dark" : "light");
});

// Função para carregar o tema ao abrir a página
function loadTheme() {
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    setTheme(storedTheme);
  } else {
    setTheme("dark"); // Tema padrão
  }
}

// Carregar o tema ao abrir a página
document.addEventListener('DOMContentLoaded', loadTheme);

// Código restante (se não houver outras funções)

const menu = document.querySelector(".mobile__menu__icon")
const navlist = document.querySelector(".nav__list")

menu.addEventListener("click", () => {
  menu.classList.toggle("active")
  navlist.classList.toggle("active")
})

Dessa forma, o tema escolhido pelo usuário será mantido mesmo ao navegar para outras páginas do seu site. Ele será carregado automaticamente ao abrir cada página, proporcionando uma experiência mais consistente.

Lembre-se de que, com o Armazenamento Local, a preferência do usuário será mantida apenas no dispositivo local. Se o usuário acessar o site de outro dispositivo ou navegador, a preferência de tema não será aplicada, pois o Local Storage é específico para cada dispositivo.

Espero que essas orientações sejam úteis para você implementar a persistência do tema em seu portfólio. Se precisar de mais ajuda ou tiver alguma outra dúvida, fique à vontade para perguntar! Boa sorte com o seu projeto!