From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/html-dark-mode/index.html | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) (limited to 'build/html-dark-mode/index.html') diff --git a/build/html-dark-mode/index.html b/build/html-dark-mode/index.html index 5ea7a85..2499d84 100644 --- a/build/html-dark-mode/index.html +++ b/build/html-dark-mode/index.html @@ -1,37 +1,46 @@ - + HTML Dark Mode - - + + +
-

HTML Dark Mode

+

HTML Dark Mode

+

2023-04-11

-

I wrote an article back in 2021 called The Lazy Developer's Dark + +

I wrote an article back in 2021 called The Lazy Developer’s Dark Mode where I explained how to implement -a very basic "dark mode" by using the prefers-color-scheme CSS attribute. +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.

+

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">
+
+
<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

+ +

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 but it doesn't hurt to repeat it here. -Safari still has minor ahref / link color issue when defaulting to browser dark +post 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.

+

Hopefully this helps others to add dark mode to their existing websites and projects with minimal effort!