From cad65af4da8d1ee473f65e9787cd71ccc68c6998 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 19 Oct 2026 13:13:44 -0400
Subject: [PATCH] docs: fix playground crash, badge link and deprecated theme
 switching

- Provide codeBlockSettings in the playground app so the app bar renders
- Link the active library badge by plugin id instead of theme
- Use theme.change() instead of the deprecated theme.global.name assignment
---
 src/documentation/layout/AppBar.vue      | 6 +++---
 src/playground/configs/PlaygroundApp.vue | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/documentation/layout/AppBar.vue b/src/documentation/layout/AppBar.vue
index 89db2ad..712ef76 100644
--- a/src/documentation/layout/AppBar.vue
+++ b/src/documentation/layout/AppBar.vue
@@ -57,7 +57,7 @@
 			v-if="isSmAndUp"
 			class="me-2 d-flex justify-center"
 			:class="`badge-${codeBlockSettings.plugin.id}`"
-			:href="codeBlockSettings.theme === 'prismjs'
+			:href="codeBlockSettings.plugin.id === 'prismjs'
 				? links.prismjs
 				: links.highlightjs
 				"
@@ -155,13 +155,13 @@ function getTheme(): void {
 		return;
 	}
 
-	theme.global.name.value = themeName.value;
+	theme.change(themeName.value as string);
 	emit('changedTheme', themeName.value);
 }
 
 function setTheme(): void {
 	themeName.value = store.setTheme(themeName.value as string);
-	theme.global.name.value = themeName.value;
+	theme.change(themeName.value as string);
 }
 
 function toggleDrawer(): void {
diff --git a/src/playground/configs/PlaygroundApp.vue b/src/playground/configs/PlaygroundApp.vue
index d444b38..bd89018 100644
--- a/src/playground/configs/PlaygroundApp.vue
+++ b/src/playground/configs/PlaygroundApp.vue
@@ -51,6 +51,12 @@ const selectedTheme = ref('neon-bunny');
 
 provide('selectedLibrary', selectedLibrary);
 provide('selectedTheme', selectedTheme);
+
+// AppBar reads the active library from codeBlockSettings //
+provide('codeBlockSettings', reactive({
+	plugin: selectedLibrary,
+	theme: selectedTheme,
+}));
 </script>