CODEWITHSUNDEEP
csscolor-scheme
Hung Tran
Hung Tran

Reputation: 141

The color-scheme property does not seem to work well with gradients

I'm using the CSS color-scheme property to render my app in light or dark mode. But I have problems getting it to work with gradient-images.

CSS function with colors as input do not seem to re-evaluate.

Here is my example:

:root {
  color-scheme: light dark;
}

div {
  font-family: Verdana;
  width: 200px;
  margin: 5px;
  padding: 5px;
  color: CanvasText;
  font-weight: bold;
  border: 2px solid light-dark(silver, blue);
  background-image: linear-gradient(Canvas, light-dark(silver, blue));
}

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}
<div>
  Normal <input value="normal" />
</div>

<div class="light">
  Light <input value="light" />
</div>

<div class="dark">
  Dark <input value="dark" />
</div>

If system is set to light mode for example, the div has color-scheme of light dark (inherited from root), and the gradient becomes white-silver. But for the div with dark-class, it does not change to black-blue gradient. I've tested it in Chrome and Safari.

The border color and input field colors all change as expected, but not the gradient colors.

However, Firefox seems to work perfectly and adjust the gradient colors correctly.

Upvotes: 1

Views: 67

Answers (1)

Hung Tran
Hung Tran

Reputation: 141

It seems like using a CSS variable and then assigning it to the background-image seems to work.

div {
  --background: linear-gradient(Canvas, light-dark(silver, blue));
  background-image: var(--background);
}

Upvotes: 0

Related Questions