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>