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

Code example #

Code example