Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Themes using multiple images

Prashant_Nair01
Level 1
Level 1

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?  

1 Accepted Solution
kiranparab
Correct answer by
Level 4
Level 4

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.

View solution in original post

2 Replies
Anudeep_Garnepudi
Community Advisor
Community Advisor

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
Correct answer by
Level 4
Level 4

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.

View solution in original post