Corrección de estilos al cambiar temas | Login y Register

[vicenteroa]

Descripción

Actualmente, al cambiar al tema oscuro en las páginas de inicio de sesión y registro, los colores predeterminados no se aplican correctamente. Esto resulta en una experiencia visual inconsistente y puede dificultar la legibilidad y usabilidad de las páginas.

Evidencias

Inicio de sesión

Registro

Tareas

1.Revisar y ajustar el código CSS en los archivos register.astro y signin.astro para que utilicen las variables de CSS definidas en la lógica del tema (themeIcon.astro).

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }

  :root {
  --background-color-light: #28A7DC; /* Color de fondo para modo claro */
  --background-color-dark: #191a1b;  /* Color de fondo para modo oscuro */

  --background-color-chat: #f0f0f0;
  --background-color-chat-dark: #191a1b;
}

2.Modificar los estilos de las páginas de inicio de sesión y registro para que se adapten correctamente al tema oscuro, utilizando las variables de CSS del tema correspondiente.

3.Realizar pruebas exhaustivas para garantizar que los colores y estilos se apliquen de manera coherente y adecuada tanto en el tema claro como en el oscuro.

4.Documentar los cambios realizados , comentando acá en la issues

[vicenteroa]

FIX ERROR

Equipo.😉 , les comento los cambios que hice en el código para que se mantengan informados sobre las soluciones realizados en el error de los temas oscuro y claro de la pagina de CardioCare-IA

Signin.astro

Se agrego un div en donde contiene todo el formulario para agregarle la variable usada para los temas puesto en themeIcon.astro y se agrego las siguientes líneas

ASTRO

<Layout title="Iniciar sesión">
  <Header
    texto1="Inicio de Sesión"
    link1="register"
    texto2="Novedades"
    link2=""
    texto3="Nuestro Sistema"
    link3=""
    texto4="Chat"
    link4="/src/pages/chat.astro"
  />

  <div class="cont-form"> <!--DIV QUE CONTIENE EL FORMULARIO ⬇️-->

  <h1>Iniciar sesión</h1>
  <p class="registration-text">
    ¿Eres nuevo aquí? <a href="/register">Crear una cuenta</a></p>
  <form action="/api/auth/signin" method="post">
    <label for="email" for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="password">Contraseña</label>
    <input type="password" name="password" id="password" />
    <button type="submit">Iniciar sesión</button>
  </form>

  </div>
</Layout>

CSS

  .cont-form{
    background-color:var(--background-color); // SE USA LA VARIABLE PARA LOS TEMAS CLARO/OSCURO
    transition: background-color 0.8s ease; // SE UTILIZA UN PEQUEÑA TRANSICION ENTRE CADA TEMA ✅
  }
 label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--background-color-chat-dark); // SE LE AGREGA EL COLOR POR DEFECTO PARA LOS LABEL 
  }
  input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color:var(--background-color-chat-dark); // SE AGREGA TAMBIEN EL COLOR DE TEXTO
  }

register.astro

Para este caso es prácticamente lo mismo les dejo los cambios y añadimientos

ASTRO

<Layout title="Iniciar sesión">
  <Header
    texto1="Inicio de Sesión"
    link1="register"
    texto2="Novedades"
    link2=""
    texto3="Nuestro Sistema"
    link3=""
    texto4="Chat"
    link4="/src/pages/chat.astro"
  />
  <div class="cont-form"> <!--DIV QUE CONTIENE EL FORMULARIO ⬇️-->

  <h1>Iniciar sesión</h1>
  <p class="registration-text">
    ¿Eres nuevo aquí? <a href="/register">Crear una cuenta</a></p>
  <form action="/api/auth/signin" method="post">
    <label for="email" for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="password">Contraseña</label>
    <input type="password" name="password" id="password" />
    <button type="submit">Iniciar sesión</button>
  </form>

  </div>
</Layout>

  .cont-form{
    background-color:var(--background-color); // SE USA LA VARIABLE PARA LOS TEMAS CLARO/OSCURO
    transition: background-color 0.8s ease; // SE UTILIZA UN PEQUEÑA TRANSICION ENTRE CADA TEMA ✅
  }
 label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--background-color-chat-dark); // SE LE AGREGA EL COLOR POR DEFECTO PARA LOS LABEL 
  }
  input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color:var(--background-color-chat-dark); // SE AGREGA TAMBIEN EL COLOR DE TEXTO
  }

Comentarios

Todo estos cambios se hicieron en la rama dev que es la de desarrollo