From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/lazy-dev-dark-mode/index.html | 60 +++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 build/lazy-dev-dark-mode/index.html (limited to 'build/lazy-dev-dark-mode/index.html') diff --git a/build/lazy-dev-dark-mode/index.html b/build/lazy-dev-dark-mode/index.html new file mode 100644 index 0000000..f73276f --- /dev/null +++ b/build/lazy-dev-dark-mode/index.html @@ -0,0 +1,60 @@ + + + + + + + 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