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 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>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
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 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>Additional documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:root