react18-themes/client/index.css

Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.

.react18-themes--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!important}[data-csp=system] .react18-themes--color-switch:after,[data-csp=system]~.react18-themes--color-switch:after,[data-csp=system]~* .react18-themes--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"}[data-csp=dark] .react18-themes--color-switch,[data-csp=dark]~.react18-themes--color-switch,[data-csp=dark]~* .react18-themes--color-switch{box-shadow:calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;border:none;background:transparent;animation:react18-themes--swing linear .5s}[data-csp=light] .react18-themes--color-switch,[data-csp=light]~.react18-themes--color-switch,[data-csp=light]~* .react18-themes--color-switch{box-shadow:0 0 50px 10px #ff0;background-color:#ff0;border:1px solid orangered}@keyframes react18-themes--swing{40%{transform:rotate(-15deg)}80%{transform:rotate(10deg)}0%,to{transform:rotate(0)}}