import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as b,o as e,c as d,a as s,g as c,u as r,f as l,t as f,_ as v,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-6f8b1b4a"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D(`

The phoneClr and lightClr props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the Mockup a key.

Code example

<template>
  <Mockup 
    screen="screen.png" 
    :phoneClr="darkTheme ? '#fff' : '#222'"
    :key="darkTheme"
  />
</template>

<script setup>
import { ref } from 'vue';
import Mockup from 'vue-three-d-mockup';

const darkTheme = ref(true);
</script>

`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676666961000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=b(!0);return(_,n)=>(e(),d("div",null,[C,s("p",null,[(e(),c(o,{style:{width:"100%",height:"400px"},screen:r(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=A=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+f(a.value?"dark":"light"),1)]),u]))}});var E=v(m,[["__scopeId","data-v-6f8b1b4a"]]);export{x as __pageData,E as default};

Code example #

Code example