Dynamic light/dark mode update in a website feedback project | XM Community
Skip to main content

I have a website feedback project connecting to a survey that uses a light theme (white background/black text). I would like to read a variable in the website data layer indicating whether the user is using light or dark mode and update my survey background and text color accordingly.
The logic I would like to implement is as follows:
Embedded data field "mode".
If mode is 'dark', update survey background to #111111 and all text color to #FFFFFF.
I tried using JavaScript (addOnload), but I could only figure out how to set the background color for a particular question as follows.
var mode = "${e://Field/mode}";
if (mode == "dark"){
jQuery("#"+this.questionId).css("background-color","#111111");
}
I could not figure out how to update the entire survey background or how to update text color. Would appreciate any leads/ideas on how to implement this.

https://community.qualtrics.com/XMcommunity/discussion/23742/dynamic-light-dark-mode-update-in-a-website-feedback-projectYou can use invert functionality as well. Something like the below, just modify your code and include it in Header>Source
jQuery('.SkinInner').css("filter","invert(100%)");
Hope it helps!


Leave a Reply