Split docs into multiple pages

docs/guide/theming.md

@@ -0,0 +1,62 @@
+# 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>
+```