diff options
Diffstat (limited to '_posts/2022-04-18-safari-default-dark-mode.md')
| -rw-r--r-- | _posts/2022-04-18-safari-default-dark-mode.md | 22 |
1 files changed, 11 insertions, 11 deletions
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: - - <meta name="color-scheme" content="dark light" /> - +```html +<meta name="color-scheme" content="dark light" /> +``` 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... |