Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 23, 2022 06:06 am GMT

Re-creating Apples Dark Mode Icon

A couple of weeks ago, while fiddling around with my iPhone's Control Center, I noticed a new icon: "Dark Mode":

Apple Dark Mode Icon

I've seen plenty "Dark Mode"-icons most of them involving the sun and the moon but this one is so simple and intuitive.

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

First, we need 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 light backgrounds as well:


Now, the semi-circle is a bit more complicated. For this, we need an Arc.

In SVG, this is called A, and is within a path:

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

While you can manually code arcs, it's much easier to use a tool for it. Here's an online tool, you can use.

Now, we have this:


Let's add two more 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 have this:

Complete Icon

Now for the fun part! Let's add a single CSS Custom Property, that can either be 0 or 1:

body {  --dark-mode: 0;}

Using this property, we'll set the background-color of the page:

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

In hsl, the third paramter is lightness. 0% is black, while 100% is white. So we'll multiply 100% with either 1 (dark mode on) or 0 (dark mode off).

We'll use the same property to invert and rotate the icon:

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

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

How you toggle the property is up to you. The "no-JS"-way could be a checkbox, while the JS-way could be something like this:

element.addEventListener('click', () => {  const current ="--dark-mode") - 0;"--dark-mode", 1 - current);})

First, get the current status using getPropertyValue(). Convert it to a numeric value by subtracting a 0 (old JS-hack!), then set the opposite value using setProperty().

Here's a Codepen demo:

NOTE: In the Codepen, I've added the JS-toggle-function to the svg itself. In production, add proper semantics, like a <button> or similar.

Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To