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" />
Enter fullscreen mode

Exit fullscreen mode

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

Circle

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" />
Enter fullscreen mode

Exit fullscreen mode

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:

SVG Arc

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" />
Enter fullscreen mode

Exit fullscreen mode

— and we’ve got this:

Complete Icon

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

physique {
  --dark-mode: 0;
}
Enter fullscreen mode

Exit fullscreen mode

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))));
}
Enter fullscreen mode

Exit fullscreen 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));
}
Enter fullscreen mode

Exit fullscreen mode

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);
})
Enter fullscreen mode

Exit fullscreen mode

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.

Add a Comment

Your email address will not be published. Required fields are marked *