WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di PNL
610
PNL
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
30 March 2025
Un codice di ytr3d3
30 March 2025
Un codice di ytr3d3
18 June 2025
Interfaccia utente di DarkSpace
HTML
Copy
Theme Switch Button
CSS
Copy
body { overflow: hidden; display: flex; justify-content: center; align-items: center; justify-content: center; height: 100vh; } .theme-switch { --toggle-size: 30px; --container-width: 5.625em; --container-height: 2.5em; --container-light-bg: #3D7EAE; --circle-container-diameter: 3.375em; --sun-moon-diameter: 2.125em; --sun-bg: #ECCA2F; --moon-bg: #C4C9D1; --spot-color: #959DB1; --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1); } .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font-size: 30px; } .container { width: 5.625em; height: var(--container-height); background-color: var(--container-light-bg); border-radius: 6.25em; overflow: hidden; cursor: pointer; -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; position: relative; } .container::before { content: ""; position: absolute; z-index: 1; inset: 0; -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; } .checkbox { display: none; } .circle-container { width: 3.375em; height: 3.375em; background-color: rgba(255, 255, 255, 0.1); position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset); border-radius: 6.25em; -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); -o-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); pointer-events: none; } .sun-moon-container { pointer-events: auto; position: relative; z-index: 2; width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto; border-radius: 6.25em; background-color: var(--sun-bg); -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); overflow: hidden; -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; } .moon { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg); border-radius: inherit; -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; position: relative; } .spot { position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em; border-radius: 6.25em; background-color: var(--spot-color); -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; } .spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; } .spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; } .checkbox:checked+.container { background-color: #1D1F2C; } .checkbox:checked+.container .circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); } .checkbox:checked+.container .circle-container:hover { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em) } .circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); } .checkbox:checked+.container .moon { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */