Theme Toggle Reveal Nieuw

<!-- Theme Toggle Reveal · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="ttr"><div class="ttr__box" data-theme="light"><div class="ttr__top"><span class="ttr__logo">Studio Visser</span><button class="ttr__btn" aria-label="Wissel licht en donker thema"><svg class="ttr__sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8"/></svg><svg class="ttr__moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg></button></div>
<span class="ttr__kick">Architecten · Leiden</span><p class="ttr__h">Woningen die over vijftig jaar nog kloppen.</p><span class="ttr__meta">071 123 4567 · studio@voorbeeld.nl</span></div></div>
</div>

/* Theme Toggle Reveal · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.ttr{position:absolute;inset:0;background:#f4f3f1;display:flex;align-items:center;justify-content:center;font-family:'Switzer',system-ui,sans-serif}
.ttr__box{--ttr-bg:#fff;--ttr-fg:#0a0a0a;--ttr-mut:rgba(10,10,10,.6);position:absolute;inset:14px;border-radius:6px;background:var(--ttr-bg);color:var(--ttr-fg);padding:12px 16px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(10,10,10,.1);container-type:size}
.ttr__box[data-theme="dark"]{--ttr-bg:#0a0a0a;--ttr-fg:#f4f3f1;--ttr-mut:rgba(244,243,241,.6);box-shadow:none}
.ttr__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.ttr__logo{font-weight:700;font-size:13px}
.ttr__btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--ttr-fg);background:none;color:var(--ttr-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ttr__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ttr__moon{display:none}.ttr__box[data-theme="dark"] .ttr__moon{display:block;fill:#F5480F;stroke:#F5480F}.ttr__box[data-theme="dark"] .ttr__sun{display:none}
.ttr__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.ttr__h{margin:6px 0 8px;font:800 min(6.4cqw,15cqh)/1.25 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;max-width:15em}
.ttr__meta{font-size:11px;color:var(--ttr-mut)}
::view-transition-old(ttr-box),::view-transition-new(ttr-box){animation:none;mix-blend-mode:normal;height:100%}
::view-transition-group(ttr-box){animation-duration:.6s}

// Theme Toggle Reveal · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ttr')||root;var box=root.querySelector('.ttr__box'),btn=root.querySelector('.ttr__btn');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,busy=false;
function flip(){box.dataset.theme=box.dataset.theme==='dark'?'light':'dark';}
btn.addEventListener('click',function(){if(busy)return;if(!document.startViewTransition||reduce){flip();return;}busy=true;var r=box.getBoundingClientRect(),b=btn.getBoundingClientRect();var cx=b.left+b.width/2-r.left,cy=b.top+b.height/2-r.top;var R=Math.hypot(Math.max(cx,r.width-cx),Math.max(cy,r.height-cy));
box.style.viewTransitionName='ttr-box';var vt=document.startViewTransition(flip);
vt.ready.then(function(){document.documentElement.animate({clipPath:['circle(0px at '+cx+'px '+cy+'px)','circle('+R+'px at '+cx+'px '+cy+'px)']},{duration:600,easing:'cubic-bezier(.7,0,.3,1)',pseudoElement:'::view-transition-new(ttr-box)'});}).catch(function(){});
vt.finished.then(function(){box.style.viewTransitionName='';busy=false;},function(){box.style.viewTransitionName='';busy=false;});});
}
init(document.querySelector('.jouw-container'));