mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
63 lines
1.2 KiB
Markdown
63 lines
1.2 KiB
Markdown
# Theming
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import Mockup from '../../src/Mockup.vue'
|
|
import screenImage from '../assets/screen.png';
|
|
|
|
const darkTheme = ref(true);
|
|
</script>
|
|
|
|
<Mockup
|
|
style="width: 100%; height: 400px;"
|
|
:screen="screenImage"
|
|
:phoneClr="darkTheme ? '#fff' : '#222'"
|
|
:key="darkTheme"
|
|
/>
|
|
|
|
<div>
|
|
<button
|
|
class="button"
|
|
@click="darkTheme = !darkTheme"
|
|
>
|
|
Toggle theme
|
|
</button>
|
|
Theme: {{ darkTheme ? 'dark' : 'light' }}
|
|
</div>
|
|
|
|
<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
|
|
|
|
```vue
|
|
<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>
|
|
```
|