Stackbit Liquid Tags are not dark mode friendly

[mauro-codes]

Describe the bug

I just created my static blog with Stackbit using the DEV integration and changed some basic styles to support dark mode on my site.
The problem is that DEV liquid tags are renderer using iframes. It seems like those iframes are not supporting dark mode right

To Reproduce

1. Create a static site with Stackbit using DEV integration. At least one of your articles should have DEV liquid tags to see the problem.
2. Apply style changes to your site using the steps described in my DEV article: https://dev.to/maurogarcia_19/add-dark-mode-support-to-your-dev-static-blog-generated-via-stackbit-3475
3. Setup your mac or PC to use dark mode.
4. Publish your static site and checkout the liquid tags. Should be hard to read because the text is black.

Expected behavior

DEV liquid tags should check the user preferences to apply different styles. This could be accomplish using media queries like:

@media (prefers-color-scheme: dark) {
    color:white
}

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 77.0.3865.90

Additional context

I'm currently using the dark appearance in macOS:

[emgoto]

So I gave this a little bit of thought -

• Right now Dev.to lets you choose between some color schemes on the settings page
• Then throughout the .scss files, we have color: var(--theme-secondary-color, $medium-gray); which lets the theme the user has chosen determine the colors they see on the page

My first question is, are the liquid tags we see inside of Stackbit using the same .scss files as the ones we see when we browse Dev?

Because then the problem that arises if we start applying @media (prefers-color-scheme: dark) throughout those files is that if a user is browsing Dev with the default white colour scheme, but they prefer dark mode, then they're going to see all the liquid tags in dark mode but see everything else as white.