From fbe9a38c42a53271b27ee0bf51a664c8774d0617 Mon Sep 17 00:00:00 2001
From: Strands <148874030+MostimaBridges@users.noreply.github.com>
Date: Sun, 19 Apr 2026 13:01:33 +0800
Subject: [PATCH] fix(dashboard): propagate dark mode to code blocks inside
 list items (#7667)

---
 .../shared/ThemeAwareMarkdownCodeBlock.vue    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue b/dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue
index f90127218..9d25b7efe 100644
--- a/dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue
+++ b/dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, inject, type Ref } from "vue";
 import { MarkdownCodeBlockNode } from "markstream-vue";
 import { useAttrs } from "vue";
 
@@ -21,20 +21,21 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(
-  defineProps<{
-    node: Record<string, unknown>;
-    isDark?: boolean;
-  }>(),
-  {
-    isDark: false,
-  },
+const props = defineProps<{
+  node: Record<string, unknown>;
+  isDark?: boolean;
+}>();
+
+const injectedIsDark = inject<Ref<boolean> | boolean>("isDark", undefined);
+const effectiveIsDark = computed(
+  () => props.isDark ?? (injectedIsDark instanceof Object && 'value' in injectedIsDark ? injectedIsDark.value : injectedIsDark) ?? false,
 );
 
 const attrs = useAttrs();
 const forwardedBindings = computed(() => ({
   ...attrs,
   ...props,
+  isDark: effectiveIsDark.value,
 }));
-const themeRenderKey = computed(() => (props.isDark ? "dark" : "light"));
+const themeRenderKey = computed(() => (effectiveIsDark.value ? "dark" : "light"));
 </script>