I added some custom CSS to make my Ruby theme dark-mode friendly. But Comments and Subscribe button iframes stays with white background in dark mode. Check screenshot:
Interestingly, comments section automatically converts texts to white, so it tries to adapt. I don’t have anything special in my custom CSS for iframes (should I?) and I think those iframes should stay as transparent, since subscribe button floating over content.
Anyone knows the reason and have a suggestion to fix this? (My website if you want to check: https://muratcorlu.com)
For the reference, here is the style that I use for dark mode:
@media (prefers-color-scheme: dark) {
:root {
--color-darker-gray: #efefef;
--color-primary-text: #efefef;
--color-white: #000;
--color-black: #fff;
--color-secondary-text: #ddd;
--color-lighter-gray: #111;
--color-light-gray: #222;
--color-mid-gray: #ccc;
--color-dark-gray: #bbb;
--primary-color: var(--ghost-accent-color, #2ec4b6);
--primary-text-color: var(--color-primary-text);
--secondary-text-color: var(--color-secondary-text);
--white-color: var(--color-white);
--light-gray-color: var(--color-light-gray);
--mid-gray-color: var(--color-mid-gray);
--dark-gray-color: var(--color-dark-gray);
--black-color: var(--color-black);
}
body {
color-scheme: dark;
background-color: #000;
}
body:not(.post-template):not(.page-template) {
background-image: linear-gradient(0deg,#333 65%,#000);
}
img {
filter: brightness(.8) contrast(1.2);
}
.post-feed .featured .post-excerpt, .post-feed .featured .post-more, .post-feed .featured .post-title {
color: var(--color-primary-text);
}
}