Is it possible to merge @media & class rules?-CodePudding

I wonder if it is possible to merge the @media & body.dark to avoid duplication?

Example:

:root {
  --color: #000;
  --bg: #fff;
  --hover: #eee;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color: #fff;
    --bg: #000;
    --hover: #555;
  }  
}

body.dark {
  --color: #fff;
  --bg: #000;
  --hover: #555;
}

CodePudding user response：

For the specific example given you could turn things round

:root, body.dark {
  --color: #fff;
  --bg: #000;
  --hover: #555;
}

@media screen and (prefers-color-scheme: light) {
  :root {
    --color: #000;
    --bg: #fff;
    --hover: #eee;
  }  
}