Thema-wissel met cirkel Nieuw

Weergavekeuze Licht, Donker of Systeem in een klein kassa-dashboard: het nieuwe thema onthult zich als cirkel vanaf de aangeklikte knop, alleen binnen het eigen blok. View Transitions met een clip-path-animatie op ::view-transition-new, zonder support of bij reduced motion wisselt het direct. Over pagina's heen bewaar je de keuze in localStorage en zet je hem vóór de eerste render; voor de onthulling zelf is geen paginawissel nodig.

Bakkerij Mulder · kassa

Omzet vandaag, di 7 okt€ 2.184,50+12% op vorige dinsdag

142 bonnenGem. € 15,38Pin 81%

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Thema-wissel met cirkel · NedDev · eigen werk. -->
<div class="jouw-container">
<!-- Scoped: alleen .vtw__box krijgt tijdens de wissel view-transition-name: vtw-box; de rest van de pagina doet niet mee.
  Hele site: zet de naam op <html> (of laat hem weg en gebruik ::view-transition-new(root)), bewaar de keuze in localStorage
  en zet data-theme in een klein inline script in de <head>, zodat een volgende pagina direct in het juiste thema opent.
  Multi-page overgangen tussen pagina's: @view-transition { navigation: auto; }.
  Reduced motion: sla startViewTransition over (zie JS) en/of @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } -->
<div class="vtw">
  <div class="vtw__box" data-thema="licht">
    <div class="vtw__top">
      <span class="vtw__logo">Bakkerij Mulder · kassa</span>
      <div class="vtw__seg" role="group" aria-label="Weergave">
        <button class="vtw__opt" type="button" data-t="licht" aria-pressed="true"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg>Licht</button>
        <button class="vtw__opt" type="button" data-t="donker" aria-pressed="false"><svg 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>Donker</button>
        <button class="vtw__opt" type="button" data-t="systeem" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4.5" width="18" height="12" rx="1.5"/><path d="M9 20h6M12 16.5V20"/></svg>Systeem</button>
      </div>
    </div>
    <div class="vtw__main">
      <div class="vtw__kpi"><small>Omzet vandaag, di 7 okt</small><b>€ 2.184,50</b><span>+12% op vorige dinsdag</span></div>
      <div class="vtw__chart" aria-hidden="true"><i style="height:48%"></i><i style="height:62%"></i><i style="height:55%"></i><i style="height:71%"></i><i style="height:88%"></i><i style="height:100%"></i><i class="is-nu" style="height:66%"></i></div>
    </div>
    <div class="vtw__foot"><span>142 bonnen</span><span>Gem. € 15,38</span><span>Pin 81%</span></div>
  </div>
  <span class="vtw__sr" aria-live="polite"></span>
</div>
</div>

/* Thema-wissel met cirkel · NedDev · eigen werk. */
.vtw{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif}
.vtw__box{--vtw-bg:#fff;--vtw-fg:#0a0a0a;--vtw-mut:rgba(10,10,10,.58);--vtw-line:rgba(10,10,10,.1);--vtw-seg:#f4f3f1;--vtw-bar:#d9d6d1;position:absolute;inset:12px;display:flex;flex-direction:column;gap:8px;padding:11px 13px;border-radius:6px;background:var(--vtw-bg);color:var(--vtw-fg);box-shadow:inset 0 0 0 1px var(--vtw-line)}
.vtw__box[data-thema="donker"]{--vtw-bg:#121212;--vtw-fg:#f4f3f1;--vtw-mut:rgba(244,243,241,.62);--vtw-line:rgba(244,243,241,.14);--vtw-seg:#1f1f1f;--vtw-bar:#3a3a3a}
.vtw__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vtw__logo{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vtw__seg{display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--vtw-seg);flex:none}
.vtw__opt{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:4px 8px;border-radius:999px;color:var(--vtw-mut);cursor:pointer;transition:color .15s,background-color .15s}
.vtw__opt svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vtw__opt:hover{color:var(--vtw-fg)}
.vtw__opt[aria-pressed="true"]{background:var(--vtw-bg);color:var(--vtw-fg);box-shadow:0 1px 2px rgba(10,10,10,.18)}
.vtw__opt:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.vtw__main{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.vtw__kpi small{display:block;font-size:10.5px;color:var(--vtw-mut)}
.vtw__kpi b{display:block;font-family:'JetBrains Mono',monospace;font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:3px 0 2px}
.vtw__kpi span{font-size:10.5px;color:#1f8a4c}
.vtw__box[data-thema="donker"] .vtw__kpi span{color:#5fd08f}
.vtw__chart{flex:1;max-width:170px;height:70%;display:flex;align-items:flex-end;gap:4px}
.vtw__chart i{flex:1;background:var(--vtw-bar);border-radius:2px 2px 0 0}
.vtw__chart i.is-nu{background:#F5480F}
.vtw__foot{display:flex;gap:12px;border-top:1px solid var(--vtw-line);padding-top:7px;font:500 10px 'JetBrains Mono',monospace;color:var(--vtw-mut);white-space:nowrap}
.vtw__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:420px){.vtw__box{inset:8px;padding:9px 10px}.vtw__logo{font-size:11px}.vtw__opt{padding:4px 6px;font-size:10.5px}.vtw__opt svg{display:none}.vtw__kpi b{font-size:18px}.vtw__foot span:last-child{display:none}}
::view-transition-group(vtw-box){animation:none}
::view-transition-old(vtw-box),::view-transition-new(vtw-box){animation:none;mix-blend-mode:normal}

// Thema-wissel met cirkel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vtw');if(!w)return;var box=w.querySelector('.vtw__box'),opts=[].slice.call(w.querySelectorAll('.vtw__opt')),sr=w.querySelector('.vtw__sr');
var rm=matchMedia('(prefers-reduced-motion: reduce)'),dark=matchMedia('(prefers-color-scheme: dark)');var keuze='licht',busy=false;
function resolve(k){return k==='systeem'?(dark.matches?'donker':'licht'):k;}
function setPressed(){opts.forEach(function(o){o.setAttribute('aria-pressed',o.dataset.t===keuze?'true':'false');});}
function pick(btn){var k=btn.dataset.t;if(k===keuze||busy)return;var nieuw=resolve(k),oud=box.dataset.thema;keuze=k;
var upd=function(){box.dataset.thema=nieuw;setPressed();};sr.textContent='Weergave: '+btn.textContent.trim()+(k==='systeem'?' ('+nieuw+')':'');
if(nieuw===oud||!document.startViewTransition||rm.matches){upd();return;}
var b=box.getBoundingClientRect(),r=btn.getBoundingClientRect();var cx=r.left+r.width/2-b.left,cy=r.top+r.height/2-b.top;var R=Math.hypot(Math.max(cx,b.width-cx),Math.max(cy,b.height-cy));
busy=true;box.style.viewTransitionName='vtw-box';var t=document.startViewTransition(upd);
t.ready.then(function(){document.documentElement.animate({clipPath:['circle(0px at '+cx+'px '+cy+'px)','circle('+R+'px at '+cx+'px '+cy+'px)']},{duration:520,easing:'cubic-bezier(.4,0,.2,1)',pseudoElement:'::view-transition-new(vtw-box)'});}).catch(function(){});
t.finished.finally(function(){box.style.viewTransitionName='';busy=false;});}
opts.forEach(function(o){o.addEventListener('click',function(){pick(o);});});
dark.addEventListener&&dark.addEventListener('change',function(){if(keuze==='systeem'){box.dataset.thema=resolve('systeem');}});
}
init(document.querySelector('.jouw-container'));

Meer uit componenten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →