Error: text color is not loaded properly in dark mode.
kowyo opened this issue · comments
The link to the website is https://www.huang-zifeng.com/
Please let me know if I could offer any details of the error.
Try to set data-theme to auto.
Thanks, it does work. But it is kind of different with the demo shown on cusdis.com(the background seems inconsistent). Can I just inverse the color of the text but the background remains? Thanks in advance for any advice given.
Thanks, it does work. But it is kind of different with the demo shown on cusdis.com(the background seems inconsistent). Can I just inverse the color of the text but the background remains? Thanks in advance for any advice given.
Hi, I happened being trapped on the same problem. I found it's due the style="color-scheme: dark;" on the html element inside the iframe. Remove the statement here solved my problem.
Thank you! But it seems that I will need to deploy cusdis myself to modify the html element, make it a little inconvenient for hosted-service user. Hope someone could PR it. Anyway, this issue is fixed for me, thanks again~
This issue tripped me up on the hosted service too. I identified the problem to be the stylesheet (style.css) specifying among other styles, this type of CSS:
.dark .dark\:text-gray-100 { --tw-text-opacity: 1; color:rgba(243,244,246,var(--tw-text-opacity)) }
This requires that the tags with class "dark: text-gray-100" be descendants of tags with class "dark". However, the srcdoc html doesn't have any elements with class "dark". So for me, auto mode doesn't work.
I resolved this by injecting the corrected CSS using a hack similar to Barth, though the style replace was handled with a page load trigger (delayed) rather than the mutation observer.