HD Quiz Plugin – Issue with Dark Theme Compatibility
Dear HD Quiz Support Team,
I am using the HD Quiz plugin on my website, and I’ve noticed an issue when users view the site in dark mode. Specifically, the quiz result text becomes almost unreadable due to insufficient contrast between the text color and the background color (a screenshot is attached for reference). This negatively impacts the user experience.
I’ve tried to resolve the issue by making adjustments to the CSS, but I haven’t been able to fully fix the problem. I would greatly appreciate your assistance in addressing this issue. If you could provide guidance on how to implement proper dark theme compatibility or suggest a solution, it would be immensely helpful.
Thank you in advance for your time and support.
Hi LittNews,
HD Quiz inherits font colours from your site, and when your site toggles dark mode, it sets colours to white.
Taking a look at your site, it looks like the dark/light mode toggle your site uses a custom data attribute data-scheme on the body class to denote the active theme.
The dark theme specifically sets data-scheme="dark".
You can use this create custom CSS styles only for the dark theme.
body[data-scheme="dark"] .hdq_results_wrapper, body[data-scheme="dark"] .hdq_results_wrapper * {color:#000000 !important}
The above CSS will set the results and all subelements to use a black font colour.
I added the code in WP > Appearance > Customize > Additional CSS, and it worked on the desktop, but it still isn’t fixed on mobile. Could you please assist me with this issue?
clear your browser cache
Unfortunately, it still didn’t work.
If you haven’t already, make sure to clear out your site cache (looks like you are using litespeed) as well. If it works on desktop but not mobile, it’s probably because you are logged in and seeing the non cached version.
Respond to thread
This thread has been closed / marked as resolved.
You can reply to this thread, but it might be better to start a new thread if you need help.
You can also upload images to imgur and paste the links here. Just make sure that your images don't include any sensitive information.
Submit