From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- posts/html-dark-mode.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 posts/html-dark-mode.md (limited to 'posts/html-dark-mode.md') diff --git a/posts/html-dark-mode.md b/posts/html-dark-mode.md new file mode 100644 index 0000000..224699f --- /dev/null +++ b/posts/html-dark-mode.md @@ -0,0 +1,30 @@ +# HTML Dark Mode + +2023-04-11 + +I wrote an article back in 2021 called [The Lazy Developer's Dark +Mode](https://bt.ht/lazy-dev-dark-mode/) where I explained how to implement +a very basic "dark mode" by using the `prefers-color-scheme` CSS attribute. +This stills works perfectly fine, and in fact there is a cleaner variation of +this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode for Free](https://jacksonchen666.com/posts/2023-04-09/13-47-16/). + +But today I wanted to show how to add dark mode functionality to a website +without *any CSS at all*. + +``` + +``` + +Add that line inside the `head` tags on your HTML files and you're good to go. + +## Minor Caveat + +I mentioned this same issue on the official [barf blog +post](https://barf.bt.ht/dark-mode/) but it doesn't hurt to repeat it here. +Safari still has minor ahref / link color issue when defaulting to browser dark +mode. If supporting that browser is a deal-breaker for you, I suggest looking +at my [hacky solution](https://bt.ht/safari-default-dark-mode/). + +Hopefully this helps others to add dark mode to their existing websites and +projects with minimal effort! + -- cgit v1.2.3-54-g00ecf