alteração tema escuro mconta mcursos

assets/css/mconta.css

@@ -2,6 +2,13 @@
     padding: 10px;
     text-align: center;
 }
+
 .formas-de-pagamento{
-    border: 1px solid black;
+    padding: 15px;
+    border-radius: 10px;
+}
+.formas-de-pagamento:hover{
+    background-color: #46aa2e;
+    color: white;
+    transition: all 1s;
 }

assets/js/main.js

@@ -8,6 +8,7 @@ const linkMenuLateral = document.querySelectorAll(".link-menu-lateral")
 const Main = document.querySelector('.main')
 const planosLink = document.querySelectorAll(".link-planos-lista")
 const textoConteudo = document.querySelectorAll(".texto-conteudo")
+const cursoBasicoNomeHtml = document.querySelectorAll('.curso-basico-nome-html')
 
 
 temaEscuro.onclick = function(){
@@ -16,7 +17,6 @@ temaEscuro.onclick = function(){
         document.body.style.backgroundColor = "#282c27"
         temaEscuro.textContent = "Tema Claro" 
         menuListaItem[0].style.backgroundColor = "#282c27"
-        menuListaItem[0].style.color = "#FFFFFF"
         menuListaItem[1].style.backgroundColor = "#282c27"
         menuListaItem[2].style.backgroundColor = "#282c27"
         input.style.backgroundColor = "#282c27"
@@ -30,6 +30,9 @@ temaEscuro.onclick = function(){
 
 
         Main.style.color = "#FFFFFF"
+        cursoBasicoNomeHtml[0].style.color = "FFFFFF"
+
+
 
 
 

assets/js/mconta.js

@@ -0,0 +1,38 @@
+const temaEscuro = document.querySelector(".tema-escuro")
+const input = document.querySelector(".input-pesquisa")
+const usuario = document.querySelector(".usuario")
+const Main = document.querySelector('.main')
+
+
+
+
+
+
+
+
+
+temaEscuro.onclick = function(){
+
+    if (temaEscuro.textContent == "Tema Escuro"){
+        document.body.style.backgroundColor = "#282c27"
+        temaEscuro.textContent = "Tema Claro" 
+        input.style.backgroundColor = "#282c27"
+        input.style.color = "#FFFFFF"
+        usuario.style.backgroundColor = "#282c27"
+        usuario.style.color = "#FFFFFF"
+        Main.style.color = "#FFFFFF"
+
+    } else {
+        document.body.style.backgroundColor = "#e8f8e6"
+        temaEscuro.textContent = "Tema Escuro"
+        input.style.backgroundColor = "#e8f8e6"
+        input.style.color = "#000000"
+        usuario.style.backgroundColor = "#e8f8e6"
+        usuario.style.color = "#000000"
+        Main.style.color = "#000000"
+
+
+
+    }
+}
+console.log(temaEscuro)

assets/js/mcursos.js

@@ -0,0 +1,38 @@
+const temaEscuro = document.querySelector(".tema-escuro")
+const input = document.querySelector(".input-pesquisa")
+const usuario = document.querySelector(".usuario")
+const Main = document.querySelector('.main')
+
+
+
+
+
+
+
+
+
+temaEscuro.onclick = function(){
+
+    if (temaEscuro.textContent == "Tema Escuro"){
+        document.body.style.backgroundColor = "#282c27"
+        temaEscuro.textContent = "Tema Claro" 
+        input.style.backgroundColor = "#282c27"
+        input.style.color = "#FFFFFF"
+        usuario.style.backgroundColor = "#282c27"
+        usuario.style.color = "#FFFFFF"
+        Main.style.color = "#FFFFFF"
+
+    } else {
+        document.body.style.backgroundColor = "#e8f8e6"
+        temaEscuro.textContent = "Tema Escuro"
+        input.style.backgroundColor = "#e8f8e6"
+        input.style.color = "#000000"
+        usuario.style.backgroundColor = "#e8f8e6"
+        usuario.style.color = "#000000"
+        Main.style.color = "#000000"
+
+
+
+    }
+}
+console.log(temaEscuro)

assets/pages/mconta.html

@@ -18,9 +18,6 @@
              <input class="input-pesquisa" type="search" placeholder="Pesquisar cursos" name="" id="">
          </div>
         </div>
-         <div class="cabecalho-menu">
-
-         </div>
          <div class="cabecalho-conta">
              <div class="usuario">
                  <img src="../img/avatar-do-usuario.png" alt="" class="usu-img">
@@ -43,9 +40,10 @@
              <p>Informações de contato: meuEmail@gmail.com</p>
             </div>
             <div class="formas-de-pagamento">
-                <p><a href="#">Meus pagamentos</a></p>
+                <p>Meus pagamentos</p>
          </div>
         </div>
      </section>
+     <script src="../js/mconta.js"></script>
 </body>
 </html>

assets/pages/mcursos.html

@@ -61,5 +61,6 @@ <h3 class="curso-basico-nome">Cartografia</h3>
          </div>
      </div>
     </section>
+    <script src="../js/mcursos.js"></script>
 </body>
 </html>