Light/Dark Mode Transition

\r\n \r\n \r\n \r\n \r\n

","css":":root {\r\n --dark: #333;\r\n}\r\n\r\n.dark-mode {\r\n background-color: var(--dark);\r\n color: #f1f1f1;\r\n}\r\n\r\nbody {\r\n overflow: hidden;\r\n background-color: #f1f1f1;\r\n color: #333;\r\n transition: background-color 0.5s, color 0.5s;\r\n}\r\n\r\n.switch-circle {\r\n width: 10px;\r\n height: 10px;\r\n background-color: var(--dark);\r\n border-radius: 50%;\r\n position: relative;\r\n z-index: -1;\r\n transition: transform 1s ease;\r\n top: -20;\r\n left: -20;\r\n\r\n}\r\n\r\n.switch-circle.active {\r\n transform: scale(300);\r\n}\r\n\r\n#toggle {\r\n background-color: #007bff;\r\n color: #fff;\r\n border: none;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n#toggle:hover {\r\n background-color: #0056b3;\r\n}\r\n\r\n\r\n.container {\r\n text-align: center;\r\n margin-top: 50px;\r\n}\r\n\r\n.switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 60px;\r\n height: 34px;\r\n}\r\n\r\n.switch input {\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n.slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: #ccc;\r\n transition: 0.4s;\r\n border-radius: 34px;\r\n}\r\n\r\n.slider:before {\r\n position: absolute;\r\n content: \"\";\r\n height: 26px;\r\n width: 26px;\r\n left: 4px;\r\n bottom: 4px;\r\n background-color: white;\r\n transition: 0.4s;\r\n border-radius: 50%;\r\n}\r\n\r\ninput:checked+.slider {\r\n background-color: #2196F3;\r\n}\r\n\r\ninput:checked+.slider:before {\r\n transform: translateX(26px);\r\n}\r\n\r\n.slider.round {\r\n border-radius: 34px;\r\n}\r\n\r\n.slider.round:before {\r\n border-radius: 50%;\r\n}","js":"var switchCircle = document.getElementById(\"switch-c\");\r\n\r\n\r\nfunction toggle() {\r\n switchCircle.classList.toggle(\"dark\");\r\n switchCircle.classList.toggle(\"active\");\r\n\r\n document.body.classList.toggle('dark')\r\n // switchCircle.addEventListener(\"animationend\", animationComplete);\r\n}\r\n\r\n\r\nconst modeSwitch = document.getElementById('modeSwitch');\r\n\r\nmodeSwitch.addEventListener('change', () => {\r\n switchCircle.classList.toggle(\"active\");\r\n document.body.classList.toggle('dark-mode');\r\n});\r\n","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"Y9NgvK","description":"Dark Mode Scale Transtion","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": ["https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"], "typescriptActive": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":507}],"profiles":{"username":"abdulmumin"}}]