# I Made the Most Over Engineered Dark Mode Toggle

## Метаданные

- **Канал:** Tom Is Loading
- **YouTube:** https://www.youtube.com/watch?v=QsG2MVD5t6k
- **Дата:** 03.05.2026
- **Длительность:** 2:58
- **Просмотры:** 5,105

## Описание

I made this super fancy dark mode toggle with React, TailwindCSS, and Framer Motion a few years back, and I FINALLY just managed to wedge it into one of my projects haha. It's a fun example of how simple key framing with Framer Motion can create super fun results.

## Содержание

### [0:00](https://www.youtube.com/watch?v=QsG2MVD5t6k) Segment 1 (00:00 - 02:00)

Today is a good day. I finally got a chance to use my super over engineered dark mode toggle. So, for reference, if you guys have followed me for a while, I run a website called hover. dev. It's like a component library for animated UI components, but point being, the very first component I ever made for Hover was this dark mode toggle. At the time, this was probably like 3 years ago, there was a bunch of demos going around on Dribbble and stuff of people kind of designing these dark mode toggles, and I just actually went ahead and made one. I've never had a project where I could actually use it. Now, I have this personal project that I'm playing around where it kind of makes sense. So, after I put this in, I figured I would take a second to show you guys actually how this is made because it's super, super simple. So, I am inside of my sidebar component. This is all a big React, Tailwind CSS, and the animations are with Framer Motion. There's a bunch of kind of boilerplate stuff that doesn't really matter. You'll notice that this is a button with a role of switch as opposed to like an input of type uh checkbox. You could use either way. And this wrapping button is really just giving it the color. So, like if I comment out the thumb and the stars and clouds, you'll see that now we just kind of have our gradient here in the background. But, the one thing that's actually worth noting on this wrapping button is that what we're doing to change like the position of the thumb, so like the little moon that becomes the sun or whatever, like how that animates back and forth, is if I look right here, we'll see that when this is checked, I go flex of justify start, else we go justify end. And using Framer Motion, if I come down here to the thumb component, there isn't like any, you know, fancy uh actual animation or key framing going on here. All that I have is this layout prop, and that will automatically do the checking of the position whenever it changes. So, it'll run this layout animation of moving the thumb from the bottom to the top without me having to do anything fancy, so it's really nice. That's super, super simple. As far as the actual animations of the little like the moon spots and the sun spots and stuff like that, we can look into those. So, if I look at the sun center, that is literally just like, you know, an a div with a background of this amber color. And then, whenever we're actually on uh light mode, we just do animate pulse, which is just an animation that comes with Tailwind CSS that gives us that like pulsing color on the sun right there. For the moon spots, literally just initial of X of a little bit of a negative X translate with some opacity. So, you see whenever I move the moon in, kind of animates in a little bit from the left. And then for these little stars and the little clouds that kind of pop in, those are super simple, too. So, if I come down and look at, say, the stars, these are basically just key frames. So, in Framer Motion, you have your animate prop, and if you pass that in an array like this, it acts as like key frames. So, instead of just going from one value to another, you can pass in a list and it will go through all of them. So, we're saying scale from 75% to 100% back to 75% on this star. Same with opacity. And then each of these I just kind of did manually and made them just a little bit different from one of the next, so they're kind of bigger or smaller. And then it's pretty much the same thing down with the clouds. So, if I go down to the clouds, one of the clouds look like this. We have key frames on the X axis. You'll see this has a longer list, so it has more kind of stops in the key frames, as well as an opacity kind of fade in and out. And I'm changing the duration on each of these, as well. So, some of the clouds then move a little bit slower than the others, which gives you that kind of like little parallax effect where some of the clouds are moving faster and the other ones are moving slower. So, yeah, super simple. Check it out on my website or make it yourself. Super easy.

---
*Источник: https://ekstraktznaniy.ru/video/51686*