Expand my Community achievements bar.

We are excited to introduce our latest innovation to enhance the Adobe Campaign user experience — the Adobe Campaign v8 Web User Interface!
SOLVED

Dark Mode. Customizing the style on Mobile devices

Avatar

Level 2

I am approaching you, because I have a request where I need to control the dark mode event when it is set on a mobile device.

Is there any possibility of controlling it through the design of a transactional message?

What I have tried first is to control it by configuring the HTML code, using a media query but it is not working.

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @Sukrity_Wadhwa,

Well, not in that way. I was not possible to customize what I wanted throught the platform so I played with the background colors, the images and fonts.

 

Thanks

 

Regards!

View solution in original post

7 Replies

Avatar

Employee Advisor

Hi Bravoga,

Can you elaborate on what you mean by "control the dark mode event"? Looking at previous documentation and posts in this forum, we don't have much in the way of dark mode handling.

 

Related post:

https://experienceleaguecommunities.adobe.com/t5/adobe-campaign-standard/understand-and-tracking-dar...

Avatar

Level 2

Hi Craig,
Thanks for your reply!
Sure, what I meant Is that because of marketing design reasons I need to respect the original design and to try to not let it to be affected by the dark mode when a mobile device has it active.
For example, if in origin, I have a black font over a white backgroung. The automatic reaction o f a device with the dark mode active is to change the contrast turning the font into white colour and the background into black.
So what I am trying is to force or change the style of my message using Adobe Campaign in order to apply the same aspect of the light mode (original design), in the dark mode.

For achieving that I am inserting @media queries, in the responsive section of the style, like for example,
@media (prefers-color-scheme: dark) {
    .darkMode {
    background-color: rgb(255,255,255) !important;
    color: rgb(137, 137, 137) !important;
    }
}
If you need a real context or more details just tell me.

Thanks in advance Craig.

 

Avatar

Employee Advisor

Thanks Bravoga,

 

I'm not sure if there is a way to force the style. Doing a bit of web searching, another popular option is creating a specific notification to be used when dark more is leveraged. That said, someone else in the community who knows the coding aspect of this would need to chime in further.

 

 

Avatar

Level 2

Hi Craig,
Thanks again for your answer.
I will check again and dig a bit more having your reply on mind.

Avatar

Administrator

Hi @bravoga1977,

Were you able to find a way to resolve this? Please let us know.

Thanks!



Sukrity Wadhwa

Avatar

Correct answer by
Level 2

Hi @Sukrity_Wadhwa,

Well, not in that way. I was not possible to customize what I wanted throught the platform so I played with the background colors, the images and fonts.

 

Thanks

 

Regards!

Avatar

Administrator

Alright! Thanks for the update. 



Sukrity Wadhwa