How to enable Dark Mode using Less

Question

I'd like to enable the Dark Mode in Magento 2.

Using plain CSS I know it easily achieved by doing:

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

How can I implement it in my Magento .less file instead?

I tried something like:

& when (@media = 'prefers-color-scheme: dark') {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

but it didn't work.

Answer 1

You can try below less like.

@black:  #000000;
@black1: #333333;
@white:  #ffffff;
@grey:   #dddddd;
@drak-grey: #555555;
@light-grey: #333333;


@media (prefers-color-scheme: dark) {
    .day.dark-scheme {
        background: @black1;
        color: @white;
    }
    .night.dark-scheme {
        background: black;
        color: @grey;
    }
}
@media (prefers-color-scheme: light) {
    .day.light-scheme {
        background: @white;
        color: @drak-grey;
    }
    .night.light-scheme {
        background: @light-grey;
        color: @black;
    }
}