Ascendendo as luzes... ou não: Modo escuro no blogger

Em um momento de pura curiosidade e um pouco de desconforto visual, decidi fazer as minhas pesquisas "rs". Meus olhos, cansados do brilho constante da tela, me inspiraram a questionar: 

“E se eu pudesse trazer um pouco de alívio não só para mim, mas também para os leitores do meu blog?”.

Foi assim que surgiu a ideia de criar um botão de Modo Escuro para o Blogger. Com a ajuda do Copilot, minha ferramenta de assistência de codificação, mergulhei em pesquisas e experimentos. O objetivo era claro: desenvolver um código que não apenas oferecesse conforto visual, mas também adicionasse um toque de personalização ao meu blog.

O resultado? Um código funcional que permite aos usuários alternar entre o modo claro e escuro com um simples clique. Mais do que uma característica estética, o botão de Modo Escuro reflete uma curiosidade, proporcionando uma experiência de leitura mais agradável para todos.

Espero que essa funcionalidade traga tanto conforto para seus olhos quanto trouxe para os meus. E que inspire outros a explorarem suas próprias curiosidades, pois, às vezes, é de onde menos esperamos que surgem as melhores ideias.

<style>

  #outer-wrapper {

      background: #f2f6f8; /* Cor de fundo clara */

      transition: background 0.3s; /* Suaviza a transição de cores */

  }

  #outer-wrapper.dark-mode {

      background: #161516; /* Cor de fundo escura */

  }

  .dark-mode-toggle {

      position: fixed;

      bottom: 10px; /* Distância da parte inferior da tela */

      left: 10px; /* Distância da parte esquerda da tela */

      cursor: pointer;

      border: 2px solid #CE2020; /* Adiciona uma borda vermelha */

      width: 60px; /* Largura do botão */

      height: 30px; /* Altura do botão */

      border-radius: 15px; /* Arredonda as bordas do botão */

      background: linear-gradient(to right, #161516 50%, #f2f6f8 50%);

      background-size: 200% 100%;

      background-position: right bottom;

      transition: all 0.3s ease-in-out;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 0 10px;

  }

  .dark-mode-toggle:before {

      content: '';

      position: absolute;

      top: 5px; /* Posiciona o círculo dentro do botão */

      right: 5px; /* Posiciona o círculo dentro do botão */

      width: 20px; /* Tamanho do círculo */

      height: 20px; /* Tamanho do círculo */

      border-radius: 50%; /* Torna o círculo perfeitamente redondo */

      background: #fff; /* Cor de fundo do círculo */

      transition: all 0.3s ease-in-out;

      box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra do círculo */

  }

  .dark-mode-toggle .sun-icon {

      font-size: 18px;

      color: #CE2020;

      display: none; /* O ícone do sol começa oculto */

  }

  .dark-mode-toggle .moon-icon {

      font-size: 18px;

      color: #CE2020;

  }

  #outer-wrapper.dark-mode .dark-mode-toggle {

      background-position: left bottom;

  }

  #outer-wrapper.dark-mode .dark-mode-toggle:before {

      right: 35px; /* Move o círculo para o lado esquerdo */

  }

  #outer-wrapper.dark-mode .dark-mode-toggle .moon-icon {

      display: none; /* Oculta o ícone da lua no modo escuro */

  }

  #outer-wrapper.dark-mode .dark-mode-toggle .sun-icon {

      display: block; /* Mostra o ícone do sol no modo escuro */

  }

              #outer-wrapper.dark-mode .post-nav p,
              #outer-wrapper.dark-mode .post-nav .post-nav-active p {
                      color: #fff;  /* Cor de texto para o modo escuro */
             }

</style>{codeBox}

Código inserido no footer;

<button class='dark-mode-toggle' onclick='toggleDarkMode()'>

  <span class="sun-icon">☀️</span>

  <span class="moon-icon">🌙</span>

</button>

<script>

function toggleDarkMode() {

    var wrapper = document.getElementById("outer-wrapper");

    wrapper.classList.toggle("dark-mode");

    // Salva o estado no localStorage

    if (wrapper.classList.contains("dark-mode")) {

        localStorage.setItem('darkMode', 'enabled');

    } else {

        localStorage.setItem('darkMode', 'disabled');

    }

}

// Verifica o estado atual ao carregar a página

document.addEventListener('DOMContentLoaded', (event) => {

    if (localStorage.getItem('darkMode') === 'enabled') {

        document.getElementById("outer-wrapper").classList.add("dark-mode");

    }

});

</script>{codeBox}

Receba nossas atualizações

* obrigatório

Endereço de e-mail * Seu melhor e-mail