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.
This thread has either been marked as complete or has been automatically closed due to inactivity. Please consider opening a new support thread for help.