Así que estoy trabajando en un proyecto para cambiar el tema del sitio web y agregué una transición en el selector * para colores y colores de fondo para que cambien suavemente pero el color del texto cambia más lento que el color de fondo del cuerpo.
const html = document.querySelector("html") lightThemeButton = document.querySelector(".light-theme-button") darkThemeButton = document.querySelector(".dark-theme-button") lightThemeButton.addEventListener("click", () => { html.style.colorScheme = "light" }) darkThemeButton.addEventListener("click", () => { html.style.colorScheme = "dark" }) *, *::before, *::after { transition: background-color 250ms ease, color 250ms ease; } .container { width: 100%; max-width: 1000px; margin: auto; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script defer src="script.js"></script> <title>Transition</title> </head> <body> <div class="container"> <section> <h1>Hello World</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum quia assumenda similique in eveniet porro beatae hic? Saepe, earum? </p> </section> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime a excepturi blanditiis aliquid earum alias ex, saepe est modi. </p> <div class="theme-button-wraper"> <button class="light-theme-button">Light</button> <button class="dark-theme-button">Dark</button> </div> </div> </body> </html> Probé esto también agregando dos clases con propiedades personalizadas como --body-bg: #111 pero la transición del texto sigue siendo más lenta que la transición en el color de fondo
Considere una alternativa de mayor especificidad en su CSS para crear una transición más suave. El selector * (todos) es excelente para apuntar a cada elemento de la página, pero debido a que la transición de fondo ocurre en todo el documento HTML, debe apuntar al padre antes que nada, por lo que está viendo un retraso de solo unos pocos milisegundos. Al usar :root o HTML como su selector, debería obtener el resultado esperado. Ejecute el fragmento de código a continuación para ver si eso resuelve su problema, ¡espero que ayude!
const html = document.querySelector("html") lightThemeButton = document.querySelector(".light-theme-button") darkThemeButton = document.querySelector(".dark-theme-button") lightThemeButton.addEventListener("click", () => { html.style.colorScheme = "light" }) darkThemeButton.addEventListener("click", () => { html.style.colorScheme = "dark" }) :root { transition: all 0.25s ease-out; } .container { width: 100%; max-width: 1000px; margin: auto; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script defer src="script.js"></script> <title>Transition</title> </head> <body> <div class="container"> <section> <h1>Hello World</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum quia assumenda similique in eveniet porro beatae hic? Saepe, earum? </p> </section> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime a excepturi blanditiis aliquid earum alias ex, saepe est modi. </p> <div class="theme-button-wraper"> <button class="light-theme-button">Light</button> <button class="dark-theme-button">Dark</button> </div> </div> </body> </html>Documentación adicional: https://developer.mozilla.org/en-US/docs/Web/CSS/:root