Themes using multiple images

Avatar

Avatar

Prashant_Nair01

Avatar

Prashant_Nair01

Prashant_Nair01

04-11-2020

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?  

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

kiranparab

Avatar

kiranparab

kiranparab

05-11-2020

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.

Answers (1)

Answers (1)

Avatar

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

05-11-2020

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