From d7e8944bc822eae140cabb6ade5494e54c2f17f4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Feb 2026 16:09:43 +0000
Subject: [PATCH 1/3] Initial plan


From 3c82af1f798eca000d5f3eccc6927f295026a22f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Feb 2026 16:13:48 +0000
Subject: [PATCH 2/3] Add light background color for non-dark theme examples

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
---
 site/.vitepress/theme/components/T8Example.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/site/.vitepress/theme/components/T8Example.vue b/site/.vitepress/theme/components/T8Example.vue
index a241749..16bc983 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 === '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;

From 72fed342eac68cefdcdf9cc10b3148cf200e590b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Feb 2026 16:14:38 +0000
Subject: [PATCH 3/3] Improve theme detection to handle multiple CSS classes

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
---
 site/.vitepress/theme/components/T8Example.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/.vitepress/theme/components/T8Example.vue b/site/.vitepress/theme/components/T8Example.vue
index 16bc983..50dd365 100644
--- a/site/.vitepress/theme/components/T8Example.vue
+++ b/site/.vitepress/theme/components/T8Example.vue
@@ -25,7 +25,7 @@ let textInstance: any = null;
 
 // Determine if the theme is dark based on mode or containerClass
 const isDarkTheme = computed(() => {
-  return props.mode === 'dark' || props.containerClass === 'dark';
+  return props.mode === 'dark' || props.containerClass?.includes('dark');
 });
 
 onMounted(async () => {