Theming

Theme: dark

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>

Theming #

Code example #

Theming

Code example