Automatic Dark Mode CSS

Hello,

I would like to implement @media (prefers-color-scheme: dark) on my websites in a way where browsers serve the dark mode website if the system is in dark mode.

How do I go about doing it in Sparkle?

Thank you!

I don’t really know if embedded code would work for that but you can try.

1 Like

My bad, I missed to mention that I did try that at first, but the code just showed up on the page without having any effect.

That’s because Sparkle is not based on code internally, so it essentially ignores any code in the page for canvas viewing, but it will pass it through in preview and in the generated site.

1 Like

I will see what I can do. I did Preview, and the code was right there. Maybe I am not putting in the code correctly. Will check. :slight_smile:

I’m interested if it works. And more important , how do you do it :wink:

I am using this code as a starting point to see if it even works:

@media (prefers-color-scheme: dark) {
:root {
–color-background: #38444c;
–color-border: #697278;
–color-text-default: #f0f2f3;
–color-base: #293238;
–color-accent: #ec1a62; }
}

I am a CSS noob, so there is a high chance I am doing this incorrectly. This code does nothing in Sparkle, the embedded code box just gets displayed in Preview.

Images show Sparkle WYSIWYG and resultant Live Preview.

12%20AM 35%20AM

@phoenix1386, Try wrapping it into a “<style>”. So it would like…

 <style>
 copies amounts of CSS code
 </style>
1 Like

Unfortunately, not working. I wonder what might I be doing wrong. :thinking:

@phoenix1386, The other issue could be that you have placed the CSS on the canvas inside the “embed” element, instead of the panel that appears when it is selected on the far right labelled “Embedded Content”?

But you must also remember that Sparkle generates its own CSS so what you place could be challenged by Sparkle’s overriding CSS? I have not looked into doing this so what I have offered here is my best take on it, sorry…

1 Like

The code is placed in EmbeddedContent. :smiley:

I understand Sparkle creates its own CSS so there could be issues, yes. I’m just hoping to be able to implement this in my designs now as I am redoing some websites for 2020.

You could try embedding an external stylesheet using Google Tag Manager.

  • Enable GTM in Sparkle > Page Settings > Google Analytics
  • Add the code to GTM using a Custom HTML tag.

Checked out Google Tag Manager. I am new to it so I need to go through it. What this means is that currently I have no quick way of doing it. Could I edit a CSS after Sparkle is done publishing it or would that break something?

I am just trying to work this out on a demo site, so no worry of losing anything.

The CSS would be in its own file (outside of Sparkle) so no worry about breaking anything inside of sparkle.

1 Like