Daniel Pietzsch

Nifty text highlight styling

Wanted to jot down this nice text highlighting CSS snippet I just discovered on basecamp.com:

With its varying opacity, it’s simulating a person’s variable pressure when marking text on an actual piece of paper. I like!

Here’s the CSS:

border-radius: 1em 0 1em 0;
background-image: linear-gradient(-100deg, rgba(250,247,133,0.3), rgba(250,247,133,0.7) 95%, rgba(250,247,133,0.1));

Instead of using <span class="highlight">, though, you should probably rather simply use the <mark> tag, which is more semantically correct.

Super simple Dark Mode

I just read the article “Dark Mode Support in Webkit” on the Webkit blog. Among other things, it describes how you can opt-in to have your website auto-darkened by Webkit (which means Safari in this case):

Not all web content is simple. For this reason Safari and WebKit do not auto-darken web content — documents will need to opt-in to dark mode. The main way to signal that your content supports dark mode it to adopt the new color-scheme style property […].

Specifying the values light and dark on the root element lets the engine know both modes are supported by the document. This changes the default text and background colors of the page to match the current system appearance. Also standard form controls, scrollbars, and other named system colors change their look automatically.

So, to opt-in, you add this bit of CSS:

:root {
  supported-color-schemes: light dark; /* For current Safari versions */
  color-scheme: light dark; /* Available with Safari TP 81 */
}

This will tell the browser that your website supports both light and dark modes, and will automatically darken your website when dark mode is selected in the OS preferences. Without any additional CSS (via @media (prefers-color-scheme: dark)). That’s a super simple and convenient way to have a dark theme.

Existing issues

[UPDATE 28.05.2019]

Got some feedback from the original article’s author:

However, it is not an auto-dark mode. That property gives you dark mode ready defaults for the body background and base text color, along with form controls. Any custom colors will need handled with the prefers-color-scheme media query.

And I also re-read the article and the spec regarding this topic. And the issues listed below are no bugs. According to the spec, the user agent should indeed only change the background and text colour plus form elements, and not much more.

So, I think the below still applies. But, that it’s not “perfect” is intentional and merely gives you a mechanism to opt-in to support a very basic version and is expected to be further extended and adjusted via custom CSS statements inside a prefers-color-scheme block.

[UPDATE END]

This automatic dark mode is not perfect. While updating my Focal Length Equivalent page to use it (which previously had a complete custom – but very similar – dark theme already), I noticed a few things:

• :hover and other pseudo-classes are not darkened.
• border-color and outline-color are not darkened.
• Link colour don’t seem to get adjusted.

For border-color and outline-color, I could remove those statements from the standard (light mode) CSS to rely on the page’s standard colours. Then, the borders got auto-darkened, too. For the :hover-issues, I kept my custom CSS rules around.

Verdict

Relying on this auto-dark mode reduced the number of CSS statements I had to overwrite in the @media (prefers-color-scheme: dark) section of my stylesheet and made it much simpler.

Generally, for simple sites likes this one, I think it’s very handy to be able to rely on Webkit to do most of the dark-mode work for you. And then only adjust things where you see the need for.

I am definitely going to experiment with this some more.

Automatic dark mode for focal length equivalents

My little Focal Length Equivalents tool now features “automatic dark mode” on supporting operating systems and browsers. Meaning, when you have your operating system set to prefer a “dark” styling – like macOS Mojave offers for example – and you are using a compatible browser, the page will show with a dark background and bright text. If your operating system is set to something else, it will show the default white background and black text.

Unlike for my blog, this solution uses CSS only. I simply put the required media query at the end of the CSS file(s) and by doing so, overwriting existing default colours with the ones used for dark mode.

/* AT THE END OF THE CSS FILE. DEFAULT STYLING ABOVE THIS MEDIA QUERY */
@media (prefers-color-scheme: dark) {
  body {
    color: #DDD;
    background-color: #222;
  }

  a { color: #88F; }
  a:visited { color: #AAF; }

  body > footer {
    border-top-color: white;
  }
  /* ETC ETC */
}

Overwriting the colours like this could become unmaintainable in a more complex setup, but for this little page, this works just fine.