@mayank1513/nthul
Version:
Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.
2 lines (1 loc) • 818 B
CSS
.nthul--color-switch{all:unset;position:relative;box-shadow:none;color:#aaa;border-radius:50%;border:1px dashed gray;cursor:pointer;--size: 25px;height:var(--size);width:var(--size);transition:all .3s ease-in-out 0s}.system.nthul--color-switch:after{position:absolute;height:100%;width:100%;top:0;left:0;font-weight:600;font-size:calc(1 * var(--size) / 2);display:flex;align-items:center;justify-content:center;content:"A"}.light.nthul--color-switch{box-shadow:0 0 50px 10px #ff0;background-color:#ff0;border:1px solid orangered}.dark.nthul--color-switch{box-shadow:calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;border:none;background:transparent;animation:swing linear .5s}@keyframes swing{40%{transform:rotate(-15deg)}80%{transform:rotate(10deg)}0%,to{transform:rotate(0)}}