Soy un falso principiante con HTML, CSS y Javascript (he hecho cosas de KhanAcademy en el pasado pero también he olvidado la mayor parte). Estoy trabajando para intentar obtener una página web simple con modo oscuro (con la menor cantidad de Javascript posible). El problema es que los enlaces tienen poco contraste en modo oscuro. Estoy usando este código para agregar una clase de .dark-mode al elemento del cuerpo de mi html y diseñarlo con CSS.
Javascript: function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); } CSS: html, body { background-color: ivory; color: black; } .dark-mode { background-color: #142514; color: blanchedalmond; } button.right { float: right; } HTML: <button class="right" onclick="myFunction()">Toggle Dark Mode</button>Intenté agregar esto a CSS, pero me doy cuenta de que la etiqueta no obtiene class="dark-mode".
CSS: a.dark-mode:link { color: lightskyblue; } a.dark-mode:visited { color: #6d4b8d; } a.dark-mode:hover { color: #ffffff; } a.dark-mode:active { color: #ff4040; text-decoration:none; font-weight:normal; }¿Podría alguien ayudarme a encontrar un método que sea liviano en Javascript para agregar la clase de modo oscuro a la etiqueta y al cuerpo o especificar que la etiqueta debe obtener estos atributos cuando el cuerpo tiene la clase de modo oscuro? Cualquier ayuda sería muy apreciada.
El problema es que está alternando una clase .dark-mode en su elemento <body/> , pero está escribiendo sus selectores CSS como si ellos mismos tuvieran una clase .dark-mode .
Este seleccionador:
a.dark-mode {}... apuntaría a un elemento que se ve así:
<a href="mysite.com" class="dark-mode">Link</a> Debido a que desea apuntar a todos los anclajes dentro de un <body/> con una clase de .dark-mode , querrá reescribir sus selectores como:
.dark-mode a:link { color: lightskyblue; } .dark-mode a:visited { color: #6d4b8d; } .dark-mode a:hover { color: #ffffff; } .dark-mode a:active { color: #ff4040; text-decoration:none; font-weight:normal; } ... que coincide con todos los anclajes dentro de un elemento con clase .dark-mode .