chore(docs): cleanup theming examples

docs/src/guide/node.md

@@ -68,7 +68,7 @@ import { VueFlow } from '@vue-flow/core'
 const elements = ref([
   {
     id: '1',
-    position: {x: 50, y: 50},
+    position: { x: 50, y: 50 },
     label: 'Node 1',
   }
 ]);
@@ -77,7 +77,7 @@ onMounted(() => {
   elements.value.push({
     id: '2',
     label: 'Node 2',
-    position: {x: 150, y: 50},
+    position: { x: 150, y: 50 },
   })
 })
 </script>

docs/src/guide/theming.md

@@ -1,8 +1,8 @@
 <script setup>
 import LogosJavascript from '~icons/logos/javascript';
-import LogosTypescript from '~icons/logos/typescript-icon';
 import { ref, h } from 'vue';
 import { Handle, Position, VueFlow } from '@vue-flow/core';
+import { Background } from '@vue-flow/background';
 
 const CustomNode = (props) => h('div', [
   h(Handle, { connectable: false, type: 'target', position: Position.Top }),
@@ -60,10 +60,11 @@ Here's how you can use CSS classes to add a pop of color or alter the font style
 ```
 
 <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded-lg h-50">
-  <VueFlow v-model="elements" :pan-activation-key-code="null" :pan-on-scroll="false" :zoom-on-scroll="false" :pan-on-drag="false" fit-view-on-init>
+  <VueFlow v-model="elements" fit-view-on-init>
     <template #node-custom="props">
       <CustomNode v-bind="props" />
     </template>
+    <Background />
   </VueFlow>
 </div>
 
@@ -86,14 +87,12 @@ Below are a couple of examples on how you can do this:
 
 Directly styling the Vue Flow component:
 
-```html{4-5}
+```vue{3-4}
-<div style="height: 300px">
+<VueFlow
-  <VueFlow
+  v-model="elements"
-    v-model="elements"
+  class="my-diagram-class"  
-    class="my-diagram-class"
+  :style="{ background: 'red' }"
-    :style="{ background: 'red' }"
+/>
-  />
-</div>
 ```
 
 Styling nodes/edges with a style or class attribute:
@@ -117,25 +116,6 @@ const nodes = ref([
 ])
 ```
 
-```ts{10-14} [<LogosTypescript />]
-import type { Node } from '@vue-flow/core';
-
-/* Customizing node by assigning class and style properties */
-const nodes = ref<Node[]>([
-  { 
-    id: '1', 
-    label: 'Node 1', 
-    position: { x: 250, y: 5 },
-    
-    // Add a class name to the node
-    class: 'my-custom-node-class',
-    
-    // You can pass an object containing CSSProperties or CSS variables
-    style: { backgroundColor: 'green', width: '200px', height: '100px' },
-  },
-])
-```
-
 :::
 
 ### [Redefining Styles with CSS variables](/typedocs/types/CSSVars)
@@ -167,20 +147,6 @@ const elements = ref([
 ])
 ```
 
-```ts{8-9} [<LogosTypescript />]
-import type { Elements } from '@vue-flow/core';
-
-const elements = ref<Elements>([
-  { 
-    id: '1', 
-    label: 'Node 1', 
-    position: { x: 100, y: 100 }, 
-    /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
-    style: { '--vf-node-color': 'blue' } 
-  },
-])
-```
-
 :::
 
 ## CSS Variables