Help Wanted: Denim Mode product screenshots present too much contrast in Dark Mode

[cwarnermm]

Context

In the Mattermost Product Documentation, all product captures are taken with Denim.

However, when viewing the product documentation in Dark Mode, product captures are too bright and present too much contrast.

A darker Mattermost theme, such as Onyx may be better suited for Dark Mode screenshots.

However, we want to avoid having to maintain 2 sets of screenshots, one for Light Mode and another for Dark Mode.

What technical options are available to address this issue?

Example:

[yesbhautik]

To address the issue of high contrast in screenshots when viewed in Dark Mode, we can consider the following technical solutions:

1. CSS Filter: Apply CSS filters to adjust the brightness and contrast of the images dynamically based on the mode (Light or Dark) the user is in.

   .screenshot {
       filter: brightness(0.8) contrast(1.2);
   }

2. SVG Overlays: Use SVG overlays to adjust the appearance of the screenshots. This can help in blending the images better with the background.

3. Dynamic Image Rendering: Use JavaScript to detect the user's theme preference and dynamically adjust the image properties. This can be done by manipulating the CSS or using a library like darkmode-js.

4. CSS Variables: Define CSS variables for image adjustments and change their values based on the mode.

:root {
       --image-brightness: 1;
       --image-contrast: 1;
   }

   [data-theme="dark"] {
       --image-brightness: 0.8;
       --image-contrast: 1.2;
   }

   .screenshot {
       filter: brightness(var(--image-brightness)) contrast(var(--image-contrast));
   }

By implementing one or a combination of these solutions, we can achieve a more consistent appearance of screenshots across different viewing modes without maintaining separate sets of images.