vue-three-d-mockup/docs/guide/theming.md

Theming

<script setup> import { ref } from 'vue'; import Mockup from '../../src/Mockup.vue' import screenImage from '../assets/screen.png'; const darkTheme = ref(true); </script>

Toggle theme Theme: {{ darkTheme ? 'dark' : 'light' }}

<style scoped> .button { display: inline-block; padding: 8px 16px; border-radius: 4px; background-color: var(--vp-c-brand); border: 1px solid var(--vp-c-brand); color: var(--vp-c-white); text-decoration: none; font-size: 16px; margin: 0 8px; } </style>

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>