how-to-make-an-animated-day-and-night-toggle-switch

[utterances-bot]

How to Make an Animated Day and Night Toggle Switch - Webtips

Learn how you can make an animated day and night toggle switch with CSS to switch between a light and a dark theme of your app.

https://webtips.dev/how-to-make-an-animated-day-and-night-toggle-switch

[fez7yoe]

Hello, after testing step by step according to the process, I found an issue. It seems that setting the corner radius of the .wave to 100% doesn't have any effect; the wave remains square with just a slight rounding.

[flowforfrank]

Hello, after testing step by step according to the process, I found an issue. It seems that setting the corner radius of the .wave to 100% doesn't have any effect; the wave remains square with just a slight rounding.

Hey @fez7yoe,

Thank you for your comment! You're correct, this seems to be a somewhat recent bug in Chromium. I tested the feature in Firefox and it works as expected. However, there are several ways we can work around this. For example, we could:

• Increase the size of a radial gradient background
• Increase the size of the element itself through width and height attributes
• Scale the element using a transform rule.

To give you a concrete example, we can change the CSS rules for the .wave element as follows to fix the issue in Chrome using the scaling solution:

.wave {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #212121;
    transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.wave.active {
    transform: scale(999);
}

• Set the position to fixed to avoid layout shifts when scaling the element
• Set a slightly bigger width and height, so that we can avoid using a large scale value
• Set the background color to the color of the dark theme
• For the transition rule, we need to pass transform, as we transition the transform property when the .active class is applied.

The .active class applies a transform rule where the element is scaled up over time to recreate the same effect we originally had with the box-shadow property. Note that you can grab the full source code in one go in this GitHub repository.

Hope this helps. Please let me know if you have any further questions!