Re-creating Apple’s Dark Mode Icon

A few weeks in the past, whereas fiddling round with my iPhone’s Management Heart, I seen a brand new icon: “Darkish Mode”:

I’ve seen lots “Darkish Mode”-icons — most of them involving the solar and the moon — however this one is so easy and intuitive.

Let’s re-create it in SVG, and add some CSS magic!

First, we want a circle:

<circle r="195" cx="200" cy="200" fill="#FFF" stroke="#000" stroke-width="10" />

I’ve added a black stroke, so the icon works on gentle backgrounds as nicely:

Now, the semi-circle is a little more difficult. For this, we want an Arc.

In SVG, that is referred to as A, and is inside a path:

<path d=" M 200 375 A 175 175 0 0 1 200 2" />

Whilst you can manually code arcs, it is a lot simpler to make use of a instrument for it. Here’s an online tool, you can use.

Now, we’ve got this:

Let’s add two extra semi-circles

<path d=" M 200 300 A 100 100 0 0 1 200 100" fill="#FFF" />
<path d=" M 200 100 A 100 100 180 0 1 200 300" />

— and we’ve got this:

Now for the enjoyable half! Let’s add a single CSS Customized Property, that may both be 0 or 1:

physique {
  --dark-mode: 0;
}

Utilizing this property, we’ll set the background-color of the web page:

physique {
  background-color: hsl(0, 0%, calc(100% * (1 - var(--dark-mode))));
}

In hsl, the third paramter is lightness. 0% is black, whereas 100% is white. So we’ll multiply 100% with both 1 (darkish mode on) or 0 (darkish mode off).

We’ll use the identical property to invert and rotate the icon:

.class {
  filter: invert(var(--dark-mode));
  remodel: rotate(calc(var(--dark-mode) * 180deg));
}

Now, should you change the --dark-mode-property to 1, the icon will invert and rotate, and the background of the web page will change to black.

The way you toggle the property is as much as you. The “no-JS”-way could possibly be a checkbox, whereas the JS-way could possibly be one thing like this:

ingredient.addEventListener('click on', () => {
  const present = doc.physique.model.getPropertyValue("--dark-mode") - 0;
  doc.physique.model.setProperty("--dark-mode", 1 - present);
})

First, get the present standing utilizing getPropertyValue(). Convert it to a numeric worth by subtracting a 0 (outdated JS-hack!), then set the other worth utilizing setProperty().

This is a Codepen demo:

NOTE: Within the Codepen, I’ve added the JS-toggle-function to the svg itself. In manufacturing, add correct semantics, like a <button> or related.