About this snippet

Switch between dark and light themes smoothly. We use the View Transitions API, so you get an impressive circle reveal animation without complex math or canvas.

Size
3.4 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
147

Collections

Related snippets

<div class="theme-demo">
  <header>
    <h2>Modern Dashboard</h2>
    <button id="theme-switcher" aria-label="Toggle Theme">
      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
    </button>
  </header>
  
  <div class="demo-card">
    <h3>Welcome back!</h3>
    <p>This layout uses the native View Transitions API to create a stunning ripple effect when you toggle the theme.</p>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --bg: #ffffff;
  --text: #111827;
  --card-bg: #f3f4f6;
  --primary: #3b82f6;
}

:root.dark {
  --bg: #0f172a;
  --text: #f8fafc;
  --card-bg: #1e293b;
  --primary: #60a5fa;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.theme-demo {
  width: 100%;
  max-width: 500px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

header h2 {
  margin: 0;
}

#theme-switcher {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.demo-card {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 16px;
  text-align: center;
}

.demo-card h3 {
  color: var(--primary);
  margin-top: 0;
}

/* View Transition Styles */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
  animation: circle-in 0.7s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.dark::view-transition-old(root) {
  z-index: 9999;
  animation: circle-out 0.7s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.dark::view-transition-new(root) {
  z-index: 1;
  animation: none;
}

@keyframes circle-in {
  from {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
  }
}

@keyframes circle-out {
  from {
    clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
  }
  to {
    clip-path: circle(0% at var(--click-x, 50%) var(--click-y, 50%));
  }
}
document.getElementById("theme-switcher").addEventListener("click", (e) => {
  document.documentElement.style.setProperty("--click-x", e.clientX + "px");
  document.documentElement.style.setProperty("--click-y", e.clientY + "px");
  
  if (!document.startViewTransition) {
    document.documentElement.classList.toggle("dark");
    return;
  }
  
  document.startViewTransition(() => {
    document.documentElement.classList.toggle("dark");
  });
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save