DEV Community

Discussion on: My New Favorite CSS Trick: will-change

View post
Collapse
 
bayuangora profile image
Bayu Angora •

I use this code for darkmode purpose:

* {
color: #ddd;
transition: color 1s, background 1s, border 1s, text-shadow 1s;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background: #000;
}
Enter fullscreen mode Exit fullscreen mode

Is it good if I add will-change to that code like this?

* {
color: #ddd;
transition: color 1s, background 1s, border 1s, text-shadow 1s;
will-change: transition, color, background, border, text-shadow;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background: #000;
will-change: background;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
highflyer910 profile image
Thea •

Applying will-change to the * selector is generally not recommended, as it can lead to unneeded optimizations across too many elements. Instead, try using will-change only on the specific elements that will animate or change colors/backgrounds/etc during the dark mode transitions.