Testing light and dark mode

[rafal2228]

Hey, I wanted to ask if it would be possible to configure loki to override prefers-color-scheme so that we would be able to test both light and dark mode variants of our components. I saw this reply from @oblador , but I'm unsure if this is already implemented/how to set it.

[techeverri]

I don't really know the use case, but have you tried using a Storybook plugin?
e.g. 🔗 https://storybook.js.org/addons/storybook-addon-css-user-preferences

[rafal2228]

@techeverri the use case is more CI-focused. We're using loki to take screenshots of our internal component library and we're in a process of adding light/dark mode support (which is based upon media queries). I don't see an option to toggle the color mode on the fly in the plugin you have linked. I was rather looking for the possibility of setting two distinct configurations options in loki config to toggle that

---

After doing some digging I think I was able to understand @oblador reply. Currently, loki only allows specifying desired media type via configuration/cli options. This one is getting passed to Emulation.setEmulatedMedia in launchNewTab function of target-chrome-core package. After extending locally this code with additional parameter features like so:

  if (options.media || options.features) {
    const params = {};

    if (options.media) {
      params.media = options.media;
    }

    if (options.features) {
      params.features = options.features;
    }

    await Emulation.setEmulatedMedia(params);
  }

I'm able to configure desired media overrides and emulate light/dark mode on per configuration basis in loki.config.js file. Do you think it would be possible to add this feature to loki? If necessary I would be happy to make a PR for it