0

He creado una página web de login y register (inicio de sesión y registro) para un futuro proyecto. De momento solo es HTML, CSS y muy poco de JS.

http://naivemedia.epizy.com/

Me gustaría que la revisen, que la prueben, miren el código fuente de los archivos HTML y el CSS, y me digan qué puedo o debo modificar, y si es posible, cómo hacer que el botón que está para cambiar de modo claro a oscuro quede centrado en la página de registro.

const theme_btn = document.querySelector('#btn-toggle');
const body = document.querySelector("body");

theme_btn.addEventListener('click', () => {
  body.classList.toggle('dark-theme')
});
.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ccc;
  border-radius: 50%;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #80aeff;
  border-color: #90b9ff;
}
<body class="dark-theme">
  <div class="dark">
    <a href="#" class="social-icon" id="btn-toggle">
      <i class="fas fa-moon"></i>
    </a>
  </div>
</body>

Muchas gracias.

4
  • Te invito a leer Cómo preguntar, tu pregunta puede quedar cerrada por estar basada en opiniones, si quieres ayudar, entonces yo optaría por dejar solo la duda final y para ir sobre esa línea entonces proveas aquí el código mínimo necesario para un ejemplo mínimo verificable
    – user128299
    Commented el 29 ene. 2021 a las 1:48
  • Hola, BetaM. Listo, ya he modificado la pregunta, he agregado en el título lo que verdaderamente estoy buscando y conseguí meter código HTML, CSS y JS del botón de Dark-Mode. Igualmente, creo que era todo claro desde antes, teniendo en cuenta que está la página web para ser probada. Pero bueno, espero que alguien me pueda responder mí duda.
    – user211209
    Commented el 29 ene. 2021 a las 1:56
  • hablas de centrado horizontal y vertical ¿cierto?
    – user128299
    Commented el 29 ene. 2021 a las 2:06
  • Solo horizontal. Si entras a la página web desde un PC (aún no está optimizado ese botón para verse responsive), verás que el botón de dark-modo está en el centro en un eje X (0) pero hacia abajo en un eje Y (-10). Después en la página de registro está en X (-10) y en Y (-10) cuando busco que la X sea 0.
    – user211209
    Commented el 29 ene. 2021 a las 2:09

1 respuesta 1

1

Prueba con lo siguiente:

const theme_btn = document.querySelector('#btn-toggle');
const body = document.querySelector("body");

theme_btn.addEventListener('click', () => {
  body.classList.toggle('dark-theme')
});
.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ccc;
  border-radius: 50%;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #80aeff;
  border-color: #90b9ff;
}

.dark {
    text-align: center;
}

.dark .social-icon {
  display: inline-flex;
}
<body class="dark-theme">
  <div class="dark">
    <a href="#" class="social-icon" id="btn-toggle">
      <i class="fas fa-moon"></i>
    </a>
  </div>
</body>

La magia esta en usar la clase .dark para centrar el texto con text-align:center; y modificar el display:flex; por display:inline-flex; de la clase .social-icon lo aislé para que solo afecte si esta dentro del div .dark, esto para evitar que afecte otros elementos con la misma clase.

1
  • ¡Muchísimas gracias! He necesitado aplicar un par de modificaciones, pero a fin de cuentas he logrado completar la que buscaba. Un saludo.
    – user211209
    Commented el 29 ene. 2021 a las 23:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.