Text color Transition is is slower than background-color Transition (with same values for transition-CodePudding

So I'm working on a project for changing theme of the website and I added a transition on the * selector for colors and background-colors so that they change smoothly but the color of text is changing slower than background color of body !

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 >
      <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 >
        <button >Light</button>
        <button >Dark</button>
      </div>
    </div>
  </body>
</html>

I tried this also by add two classes with custom properties like --body-bg: #111 but the text transition is still slower than the transition in background color

CodePudding user response：

Consider a higher specificity alternative in your CSS to create a smoother transition. The * (all) selector is great for targeting every element on the page but due to your background transition happening to the whole HTML document you need to target the parent before anything else which is why you are seeing a delay of just a few milliseconds. By using :root or HTML as your selector you should get the expected result. Run the code snippet below to see if that resolves your issue, hope it helps!

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 >
      <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 >
        <button >Light</button>
        <button >Dark</button>
      </div>
    </div>
  </body>
</html>

Additional documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:root