From 59b3b077758942f4b45a07fa52e856df8edeea3a Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Fri, 14 Jun 2024 09:24:07 -0400 Subject: Further minimal improvements, reducing code base --- _posts/2022-04-18-safari-default-dark-mode.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to '_posts/2022-04-18-safari-default-dark-mode.md') diff --git a/_posts/2022-04-18-safari-default-dark-mode.md b/_posts/2022-04-18-safari-default-dark-mode.md index 91095b4..b5c2401 100644 --- a/_posts/2022-04-18-safari-default-dark-mode.md +++ b/_posts/2022-04-18-safari-default-dark-mode.md @@ -15,9 +15,9 @@ A common practice is to include a `@media` query via CSS to target styling chang Adding the following meta tag inside your document's `head` element, you can enable dark mode instantly with zero configuration: - - - +```html + +``` There are minor caveats: @@ -42,15 +42,15 @@ Even though by adding the color-scheme meta tag we get ourselves good dark mode Luckily for us there is a simple solution using minimal amounts of CSS[^1]: - - @supports (color-scheme: dark light) { - @media screen and (prefers-color-scheme: dark) { - a:link {color: #9e9eff;} - a:visited {color: #d0adf0;} - a:active {color: red;} - } +```scss +@supports (color-scheme: dark light) { + @media screen and (prefers-color-scheme: dark) { + a:link {color: #9e9eff;} + a:visited {color: #d0adf0;} + a:active {color: red;} } - +} +``` We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding... -- cgit v1.2.3-54-g00ecf