fix(dashboard): propagate dark mode to code blocks inside list items (#7667)

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>