Fancy Theme Toggle

atlas-ui/fancy-theme-toggle-html

FreeUtility

Theme Toggle from the classic Designer vs Developer meme, built with HTML, CSS, JavaScript and Motion.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://atlasui.dev/r/fancy-theme-toggle-html.json

Source

registry/html/atlasui/fancy-theme-toggle/index.htmlatlasui.dev/r/fancy-theme-toggle-html.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Fancy Theme Toggle - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <button role="switch" id="theme-toggle"></button>
11  </body>
12  <script type="module" src="script.js"></script>
13</html>

What it pulls in

npm packages

motion
lucide

Files it writes

registry/html/atlasui/fancy-theme-toggle/index.html
registry/html/atlasui/fancy-theme-toggle/style.css
registry/html/atlasui/fancy-theme-toggle/script.js

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbaranimated-mobile-navbar-html	atlas-ui	Utilities	Free	1 dep · 3 files
Blend Mouse Trailerblend-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Blob Mouse Trailerblob-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Box Revealbox-reveal-html	atlas-ui	Utilities	Free	1 dep · 3 files
Cascade Textcascade-text-html	atlas-ui	Utilities	Free	1 dep · 3 files
Dot And Circle Mouse Trailerdot-and-circle-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Hacker Texthacker-text-html	atlas-ui	Utilities	Free	no deps · 3 files
Letter Swapletter-swap-html	atlas-ui	Utilities	Free	1 dep · 3 files