Javascript Js | IMG alterando codigo cor BG

Kijin · 20 de abril de 2019

Sabe aqueles sites que possuem uma imagem ou um botão que ativa o modo noturno?

Então gostaria de saber como posso inserir ele no meu projeto. Porém gostaria de por uma imagem de uma lua e quando clicasse nela alterasse a cor do bg para uma da minha escolha, e também gostaria de saber se é possível fazer uma musica tocar no momento em que ativam o modo noturno.

Gostaria de por um código mas como sou novo em relação a Js, não sei nem por onde começar.

Obrigado!

<!Doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/scripts.js"></script>

    
<title>Portal - Dehill</title>
</head>
<body bgcolor="eebd30">
    
    
    <div id="logo">
    <img src="images/Logo.png" title="Logo-Dehill" alt="Logo do site">
    </div>
    
    <div id="github">
    <img src="images/github.png" title="GitHub - Dehill">
    </div>
    
    <div id="spotfy">
    <img src="images/spotfy.png" title="PlayList - Dehill">
    </div>
    
    <div id="sound">
     <embed src="" height="1" width="1" autostart="true">
    </div>
    
    
    <div class="text">
    
    </div>
    
    
</body>
</html>

O máximo que tem ai é o básico do HTML mesmo.

GabrielSennaMs · 22 de abril de 2019

Bom existe muitas maneira de criar um sistema que altere o tema do site.

Acabei de criar um pequeno script em JS(javascript) com a Biblioteca Jquery para alterar as classes dos elementos assim alterando a Cor de texto e o Background dos elementos.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
  <meta charset="utf-8">
  <title>Portal - Dehill</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <style>
    /* Class com o tema Light */
    .classLight{
      background: #ffffff;
      color: #000000;
      transition: 0.4s;
    }
    /* Class com o tema Dark */
    .classDark{
      background: #000000;
      color: #ffffff;
      transition: 0.4s;
    }
    /* Class para ajustar o botão no canto superior direito */
    .interruptor{
      position: fixed; /* Posição fixa */
      top: 20px;  /* Posição fixa a 20 px do top da página */
      right: 20px; /* Posição fixa a 20 px da direita da página */
      font-size: 24px; /* Tamanho da fonte do botão */
      text-decoration: none; /* Como o botão é um elemento do tipo "a" é melhor remover o sublinhamento dele*/
      color: #3CC6E8; /* Cor inicial do botão*/
    }
  </style>
</head>
<body class="classLight">

  <!-- Botão -->
  <a href="javascript:void(0)" class="interruptor">
    <i class="faz fa-moon"></i>
  </a>
  <!-- /Botão -->

  <!-- Codigo javascript utilizando a Biblioteca Jquery -->
  <script type="text/javascript">
    var tema = false // Variável que determina se o tema está ativo ou não
    $(function(){
      $(".interruptor").on("click", function(){
        tema = (tema == true)? false : true // Alterando a variável tema para ativo ou não
        if(tema == true){ // Condição para determinar a troca de tema 
          $(".interruptor").html('<i class="far fa-sun"></i>') // Alterando o icone no botão
          $(".interruptor").css("color", "#FFC47D") // Alterando a cor do botão
          $(".classLight").toggleClass("classDark classLight") // Selecinado todos os elemento com a class "classLight", removendo a class "classLight" e adicionado a class "classDark"
        }else{
          $(".interruptor").html('<i class="faz fa-moon"></i>') // Alterando o icone no botão
          $(".interruptor").css("color", "#3CC6E8") // Alterando a cor do botão
          $(".classDark").toggleClass("classDark classLight") // Selecinado todos os elemento com a class "classDark", removendo a class "classDark" e adicionado a class "classLigh"
        }
      })
    })
  </script>
  <!-- /Codigo javascript utilizando a Biblioteca Jquery -->

</body>
</html>