2

I have a block with some media query rule applied to it, something like this:

<style>
@media (prefers-color-scheme: dark) {
  div{ background:  black; color: white; }
}

@media (prefers-color-scheme: light) {
  div { background: white; color: black; }
}
</style>
<div>
some content
</div>

And I need to toggle the media query from JS, somehow like that:

document.querySelector('div').media['prefers-color-scheme'] = 'light'; // or 'dark'

Is there such a DOM API? Is this possible?

UPD: I don't want to change the rule, I want to "emulate" changing external conditions.

Thank you.

shau-kote
  • 1,110
  • 3
  • 12
  • 24
  • https://xyproblem.info/ – SuperStormer Oct 16 '21 at 03:05
  • @kmoser I don't want to change the rule, I want to "emulate" changing external conditions. – shau-kote Oct 16 '21 at 03:25
  • @SuperStormer Sorry, I try not to overload other people with redundant details. **For example**: I have a component, it changes its color theme through CSS media query; then I make a demo (internal "fiddle") for the component and want to have a toggle «change theme» in order to a user of the demo (developer or designer) can view the component in both color themes. – shau-kote Oct 16 '21 at 03:33
  • 2
    @shau-kote https://stackoverflow.com/questions/15655621/force-media-query-to-be-applied/37271031 – kmoser Oct 16 '21 at 03:53
  • I realise this may sound a bit simplistic, but if the need is for the developer or designer (ie a professional, not the general user) to see what really happens when light or dark mode is selected isn't the most reliable way to ask them to select those modes in their browser. – A Haworth Oct 16 '21 at 04:31

0 Answers0