Themes using multiple images

[Prashant_Nair01]

We have a requirement where we need to change the image contrast based on theme (Light and Dark). As a standard approach we tried the CSS filter property (https://developer.mozilla.org/en-US/docs/Web/CSS/filter) to adjust the image contrast.

However, the business is suggesting to use 2 sets of images - one for dark theme and one for light. To achieve this, every component which involves images would need the capability to allow the authors to author two different images.

Is this a feasible approach considering we also have multifield dialogs? Is it recommended to use different images based on theme as a general practice for a website?

If yes, we need to store all the authored image paths in a data attribute in HTL so that these image paths can be accessed at run time based on user selection of theme. Is there any other better way to achieve this?  

[Anudeep_Garnepudi]

Hi @Prashant_Nair01 

How about giving an option(radio) to author to select whether it is a Dark or Light image. Based on the selection add a css class do styling.

AG

[kiranparab · Accepted solution]

Adobe Target using Adobe Launch will help in this usecase to define default(Light) and dark image variations depends on the Theme selection instead of playing the CSSFilter approach

These might help to think better about your usecase.