Fancy Theme Toggle

{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fancy-theme-toggle-html", "title": "Fancy Theme Toggle", "description": "Theme Toggle from the classic Designer vs Developer meme, built with HTML, CSS, JavaScript and Motion.", "dependencies": [ "motion", "lucide" ], "files": [ { "path": "registry/html/atlasui/fancy-theme-toggle/index.html", "content": "\n\n \n \n \n Fancy Theme Toggle - Atlas UI\n \n \n \n \n \n \n\n", "type": "registry:file", "target": "~/fancy-theme-toggle/index.html" }, { "path": "registry/html/atlasui/fancy-theme-toggle/style.css", "content": ":root {\n --background: light-dark(\n oklch(100% 0.00011 271.152),\n oklch(18.22% 0.00002 271.152)\n );\n}\n\nhtml {\n color-scheme: light dark;\n}\n\nhtml[data-theme=\"light\"] {\n color-scheme: light;\n}\n\nhtml[data-theme=\"dark\"] {\n color-scheme: dark;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100svh;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#theme-toggle {\n position: relative;\n display: flex;\n width: 5rem;\n align-items: center;\n overflow: hidden;\n border-radius: 9999px;\n background-image: linear-gradient(\n to bottom,\n oklch(62.3% 0.214 259.815),\n oklch(80.9% 0.105 251.813)\n );\n padding: 0.375rem;\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, 0.3),\n inset 0 -2px 3px rgba(0, 0, 0, 0.1);\n border: none;\n cursor: pointer;\n}\n\n#thumb {\n position: relative;\n height: 1.75rem;\n width: 1.75rem;\n flex-shrink: 0;\n z-index: 1;\n border-radius: 9999px;\n background-image: linear-gradient(\n to bottom right,\n oklch(90.5% 0.182 98.111),\n oklch(85.2% 0.199 91.936)\n );\n box-shadow:\n inset 1px 1px 2px 0 rgb(255, 255, 255),\n 0 3px 9px 4px rgba(0, 0, 0, 0.141);\n will-change: transform;\n}\n\n#clouds,\n#stars {\n position: absolute;\n inset: 0;\n}\n\n.star {\n fill: oklch(70.7% 0.022 261.325);\n stroke-width: 0;\n position: absolute;\n}\n\n#stars {\n :nth-child(1) {\n top: 0.5rem;\n left: 0.5rem;\n height: 0.5rem;\n width: 0.5rem;\n }\n\n :nth-child(2) {\n top: 1rem;\n left: 1.25rem;\n height: 0.625rem;\n width: 0.625rem;\n }\n\n :nth-child(3) {\n top: 0.5rem;\n left: 2.5rem;\n height: 0.25rem;\n width: 0.25rem;\n }\n\n :nth-child(4) {\n top: 0.25rem;\n left: 1.75rem;\n height: 0.25rem;\n width: 0.25rem;\n }\n\n :nth-child(5) {\n bottom: 0.5rem;\n left: 0.5rem;\n height: 0.25rem;\n width: 0.25rem;\n }\n\n :nth-child(6) {\n bottom: 0.5rem;\n left: 2rem;\n height: 0.25rem;\n width: 0.25rem;\n }\n\n :nth-child(7) {\n bottom: 0.25rem;\n left: 1.25rem;\n height: 0.375rem;\n width: 0.375rem;\n }\n}\n\n#clouds {\n :nth-child(1) {\n top: 0.5rem;\n right: 0.5rem;\n height: 0.5rem;\n width: 0.5rem;\n }\n\n :nth-child(2) {\n top: 1rem;\n right: 1.25rem;\n height: 0.625rem;\n width: 0.625rem;\n }\n\n :nth-child(3) {\n top: 0.5rem;\n left: 2.5rem;\n height: 0.375rem;\n width: 0.375rem;\n }\n\n :nth-child(4) {\n right: 0.5rem;\n bottom: 0.25rem;\n height: 0.375rem;\n width: 0.375rem;\n }\n\n :nth-child(5) {\n bottom: 0.25rem;\n left: 2rem;\n height: 0.375rem;\n width: 0.375rem;\n }\n\n :nth-child(6) {\n bottom: 0.5rem;\n left: 2.75rem;\n height: 0.375rem;\n width: 0.375rem;\n }\n}\n\n.cloud {\n position: absolute;\n fill: rgb(255, 255, 255);\n stroke-width: 0;\n}\n\n#theme-toggle[data-theme=\"dark\"] {\n background-image: linear-gradient(\n to bottom,\n oklch(20.5% 0 0),\n oklch(26.9% 0 0)\n );\n\n #thumb {\n background-image: linear-gradient(\n to bottom right,\n oklch(92.8% 0.006 264.531),\n oklch(87.2% 0.01 258.338)\n );\n\n &::after {\n position: absolute;\n bottom: 0.375rem;\n left: 0.25rem;\n height: 0.75rem;\n width: 0.75rem;\n border-radius: 9999px;\n background-color: oklch(70.7% 0.022 261.325);\n box-shadow:\n 6px -10px 0 -3.5px oklch(70.7% 0.022 261.325),\n 10px 4px 0 -3px oklch(70.7% 0.022 261.325);\n content: \"\";\n }\n }\n}\n", "type": "registry:file", "target": "~/fancy-theme-toggle/style.css" }, { "path": "registry/html/atlasui/fancy-theme-toggle/script.js", "content": "import { createIcons, Sparkle, Cloud } from \"lucide\";\nimport { animate } from \"motion\";\n\nconst themeToggle = document.getElementById(\"theme-toggle\");\nconst thumb = document.createElement(\"div\");\nthumb.id = \"thumb\";\nthemeToggle.appendChild(thumb);\n\nconst savedTheme = localStorage.getItem(\"theme\");\nlet currentTheme;\n\nif (savedTheme) {\n currentTheme = savedTheme;\n} else {\n const systemDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n currentTheme = systemDark ? \"dark\" : \"light\";\n}\n\ndocument.documentElement.setAttribute(\"data-theme\", currentTheme);\nthemeToggle.setAttribute(\"data-theme\", currentTheme);\n\nconst stars = document.createElement(\"div\");\nstars.id = \"stars\";\nthemeToggle.appendChild(stars);\n\nfor (let i = 0; i < 7; i++) {\n const star = document.createElement(\"i\");\n star.dataset.lucide = \"sparkle\";\n star.classList.add(\"star\");\n stars.appendChild(star);\n}\n\nconst clouds = document.createElement(\"div\");\nclouds.id = \"clouds\";\nthemeToggle.appendChild(clouds);\n\nfor (let i = 0; i < 6; i++) {\n const cloud = document.createElement(\"i\");\n cloud.dataset.lucide = \"cloud\";\n cloud.classList.add(\"cloud\");\n clouds.appendChild(cloud);\n}\n\ncreateIcons({\n icons: {\n Sparkle,\n Cloud,\n },\n});\n\nconst DURATION = 0.2;\nconst EASE = \"easeOut\";\n\nconst SPRING = {\n type: \"spring\",\n stiffness: 420,\n damping: 32,\n mass: 0.6,\n};\n\nfunction getTravelDistance() {\n const toggleStyles = getComputedStyle(themeToggle);\n const paddingLeft = parseFloat(toggleStyles.paddingLeft);\n const paddingRight = parseFloat(toggleStyles.paddingRight);\n const innerWidth = themeToggle.clientWidth - paddingLeft - paddingRight;\n return innerWidth - thumb.offsetWidth;\n}\n\nconst initialTravel = getTravelDistance();\nstars.style.transform = \"translateY(-100%)\";\nclouds.style.transform = \"translateY(100%)\";\n\nif (currentTheme === \"dark\") {\n thumb.style.transform = `translateX(${initialTravel}px)`;\n animate(stars, { y: [\"-100%\", 0] }, { duration: DURATION, ease: EASE });\n} else {\n thumb.style.transform = \"translateX(0px)\";\n animate(clouds, { y: [\"100%\", 0] }, { duration: DURATION, ease: EASE });\n}\n\nthemeToggle.addEventListener(\"click\", () => {\n const current = document.documentElement.getAttribute(\"data-theme\");\n const next = current === \"light\" ? \"dark\" : \"light\";\n\n document.documentElement.setAttribute(\"data-theme\", next);\n themeToggle.setAttribute(\"data-theme\", next);\n localStorage.setItem(\"theme\", next);\n\n const thumbTravel = getTravelDistance();\n\n if (next === \"dark\") {\n animate(thumb, { x: [0, thumbTravel] }, SPRING);\n animate(clouds, { y: [0, \"100%\"] }, { duration: DURATION, ease: EASE });\n animate(stars, { y: [\"-100%\", 0] }, { duration: DURATION, ease: EASE });\n } else {\n animate(thumb, { x: [thumbTravel, 0] }, SPRING);\n animate(stars, { y: [0, \"-100%\"] }, { duration: DURATION, ease: EASE });\n animate(clouds, { y: [\"100%\", 0] }, { duration: DURATION, ease: EASE });\n }\n});\n", "type": "registry:file", "target": "~/fancy-theme-toggle/script.js" } ], "meta": { "framework": "html" }, "type": "registry:file" }