diff --git a/site/.vitepress/theme/components/T8Example.vue b/site/.vitepress/theme/components/T8Example.vue
index a241749..50dd365 100644
--- a/site/.vitepress/theme/components/T8Example.vue
+++ b/site/.vitepress/theme/components/T8Example.vue
@@ -6,12 +6,12 @@
     <div v-if="showCode" class="code-display">
       <pre><code>{{ syntax }}</code></pre>
     </div>
-    <div class="render-container" :class="containerClass" ref="container"></div>
+    <div class="render-container" :class="[containerClass, { light: !isDarkTheme }]" ref="container"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 const props = defineProps<{
   syntax: string;
@@ -23,6 +23,11 @@ const container = ref<HTMLElement | null>(null);
 const showCode = ref(false);
 let textInstance: any = null;
 
+// Determine if the theme is dark based on mode or containerClass
+const isDarkTheme = computed(() => {
+  return props.mode === 'dark' || props.containerClass?.includes('dark');
+});
+
 onMounted(async () => {
   if (!container.value) return;
 
@@ -138,6 +143,10 @@ onBeforeUnmount(() => {
   background-color: var(--vp-c-bg);
 }
 
+.render-container.light {
+  background-color: #ffffff;
+}
+
 .render-container.dark {
   background-color: #1a1a1a;
   color: #ffffff;