From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/lazy-dev-dark-mode/index.html | 63 ------------------------------- 1 file changed, 63 deletions(-) delete mode 100644 build/posts/lazy-dev-dark-mode/index.html (limited to 'build/posts/lazy-dev-dark-mode') diff --git a/build/posts/lazy-dev-dark-mode/index.html b/build/posts/lazy-dev-dark-mode/index.html deleted file mode 100644 index 1cc4bd6..0000000 --- a/build/posts/lazy-dev-dark-mode/index.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - The Lazy Developer's Dark Mode - - - - - - - -
-

The Lazy Developer’s Dark Mode

-

2021-04-12

-

After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting dark mode for my visitors. I was using the proper CSS query to target those who had system-wide dark mode enabled, but I found that the code had far too many caveats and targeted too many custom classes.

-

So I thought to myself, “There has to be a simpler way…”

-

Introducing Dark Mode - The Lazy Way

-

Here is the default dark mode for my current website in all it’s glory:

-
@media (prefers-color-scheme: dark) {
-    body{background:#2d2d2d;filter:invert(1);}
-    img,.cp_embed_wrapper,pre{filter:invert(1);}
-}
-
-

Not much to look at, eh? Well, let’s still break it down.

-

First we set the body to use a nice dark background color (avoid using #000000 directly since that can cause some minor eye strain). Next we tell the browser to invert all the child elements by using filter:invert(1). At this point, you could consider your work done - but there are some edge case elements…

-

Images, CodePens & Code - Oh My!

-

Most of my articles on this site will include either an image(s), embedded CodePen examples or code snippets directly in the page. For these elements we probably don’t want to invert their color/text etc. All we need to do is run the filter property on these a second time (after the main body attribute):

-
@media (prefers-color-scheme: dark) {
-    img,.cp_embed_wrapper,pre{filter:invert(1);}
-}
-
-

Of course, YMMV depending on what other custom elements you want to avoid inverting.

-

Minor Caveats

-

I should mention that since my website doesn’t use any custom coloring for anchor links, inverting ahref elements works out of the box. Certain projects might still require some custom overrides if the inverted version of a certain custom color looks poor.

-

That’s it - enjoy being lazy!

- \ No newline at end of file -- cgit v1.2.3-54-g00ecf