• 2020-04-14

    Perfect darkmode colors with hue-rotate

    Author

    Jens Törnell

    Comments

    Start a discussion

    A perfect blue color on a white background is not always a perfect blue color on a background color.

    To fix it we can use hue-rotate(180deg); to get the same contrast difference on a black background.

    Full page

    HTML

    <div class="darkmode">Text</div>

    CSS

    div {
  color: blue;
  background: #fff;
}

.darkmode {
  filter: invert(1) hue-rotate(180deg);
}

    Sources