Comments and subscribe iframes with dark mode

Themes
1

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:

image
image2510×3072 510 KB

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);
    }
}
2

Hi,

i found there were a few elements that didn’t have the correct styling applied so didn’t work correctly in dark mode.

Try using this theme:

and then change the colours to the ones you have above in this file:

Hopefully that solves your problem.

3

I think I solved the problem. I’m not completely sure about the reason for now(there is a short explanation in this article), but removing color-scheme definitions from my css addition, solved the problem.

So, simply, removing color-scheme: dark; line fixed the issue for me.