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

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

Code example #

Code example