Applying CSS Filters to an iframe

Posted 9 Mar. 2021 | 3 min read.

Slight change of topic with this post, as I'm covering a small personal victory. It's a fairly bespoke issue, but if you want to know how to embed .NET Fiddle code into a Gridsome markdown post, and/or you want to know how to apply CSS filters to an iframe to create a "dark mode" version, read on!

I've written a couple posts about C# on this site, and I intend to write many more. The problem I have however, is that it would be much nicer to be able to show the code working, rather than just write about it.

Front-end technologies (particularly everything JavaScript) already have these tools, such as CodePen, CodeSandbox, JSFiddle, and many (many) more.

For C# and .NET however, there seems to be very few. Of those, only one worked well for me - .NET Fiddle.

It's a great tool, and it was incredibly easy to embed the code into my site, simply by adding the iframe directly into the markdown page:

<iframe
    loading="lazy"
    width="100%" 
    height="475" 
    src="https://dotnetfiddle.net/Widget/6xeOaS"
    frameborder="0">
</iframe>

Let's take a look at the result:

If you hit run, the code executes. Perfect! Almost...

It's too bright!

There's one minor issue however - there's no dark mode!

It's not a deal breaker, but I much prefer to look at this site with dark mode turned on, simply to avoid eye strain.

And a large white box in the middle of an otherwise dark page can definitely strain the eyes.

Ideally, I would apply CSS to style the individual elements however I want, however that becomes difficult when embedding an iframe.

However, something I found interesting was that I could style the iframe using CSS filters. I'd previously only seen these used on an image, so it was a surprise when it worked!

To do so, let's first give the iframe a class to target:

<iframe 
    class="dotnetfiddle"    loading="lazy"
    width="100%" 
    height="475" 
    src="https://dotnetfiddle.net/Widget/6xeOaS"
    frameborder="0">
</iframe>

When the site going into dark mode, I add a data-theme attribute to the body, setting it to "dark" for dark mode.

Let's use filters when in dark mode, by targeting the data-theme attribute and the .dotnetfiddle class:

  body[data-theme="dark"] .dotnetfiddle {
      filter: invert(95%) hue-rotate(180deg);
  }

First, we're inverting the iframe by 95%. This inverts the light gray bits to dark gray, and white bits to a very dark gray.

Second, we use a hue-rotate. Inverting the iframe will invert all of the colours, but hue-rotate will only change the hue.

How does this affect the result? Well, the elements with no hue (i.e., everything that is grayscale) will not be affected.

By using a hue-rotate of 180 degrees, we get the following result:

If you're already on the light theme, please try it out by clicking "Turn off the lights" at the top of the page (or the little sun/moon in the top right on mobile view).

I admit, this is not the best solution. Using filters like this is a bit of a hack, at least for a few reasons:

  • If .NET Fiddle change their colour scheme, things might look odd (particularly if they opt out of a grayscale background).
  • If the browser doesn't support it, then nothing happens (please, update your browser).
  • The colours are not exact, and the text is less readable.

But, it works! And hopefully it's a good solution while I'm waiting for .NET Fiddle to create a dark theme. I may try to inject CSS to make it more adapted to my colour scheme later.

CSSPersonal projects