summaryrefslogtreecommitdiff
path: root/posts/html-dark-mode.md
diff options
context:
space:
mode:
authorBradley Taunt <brad@bt.ht>2023-11-27 12:25:51 -0500
committerBradley Taunt <brad@bt.ht>2023-11-27 12:25:51 -0500
commit14d227d46a2177a8928333894252d6299f531097 (patch)
treed41d48383d012f53823c9816a820e4e88c572c41 /posts/html-dark-mode.md
parentf6eed1a8c2f4fbf91fac9edd11e50f5c0ec939a2 (diff)
Trying to render posts all at once
Diffstat (limited to 'posts/html-dark-mode.md')
-rw-r--r--posts/html-dark-mode.md30
1 files changed, 30 insertions, 0 deletions
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*.
+
+```
+<meta name="color-scheme" content="dark light">
+```
+
+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!
+