diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index 4fcb83027..49c4a44e6 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -59,8 +59,8 @@
 				}
 			}
 
-			if (localStorage.getItem('svelte:prefers-ts') !== 'false') {
-				for (const node of document.querySelectorAll('.ts-toggle')) {
+			if (localStorage.getItem('svelte:prefers-ts') === 'false') {
+				for (const node of document.querySelectorAll('.js-toggle')) {
 					node.checked = true;
 				}
 			}
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 089c62b9a..30b34e896 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -11,17 +11,17 @@
 	afterNavigate(update);
 
 	function update() {
-		const inputs = container.querySelectorAll('.ts-toggle') as NodeListOf<HTMLInputElement>;
+		const inputs = container.querySelectorAll('.js-toggle') as NodeListOf<HTMLInputElement>;
 
 		for (const input of inputs) {
-			input.checked = $prefers_ts;
+			input.checked = !$prefers_ts;
 		}
 	}
 
 	function toggle(e: Event) {
-		if ((e.target as HTMLElement).classList.contains('ts-toggle')) {
+		if ((e.target as HTMLElement).classList.contains('js-toggle')) {
 			const input = e.target as HTMLInputElement;
-			$prefers_ts = input.checked;
+			$prefers_ts = !input.checked;
 			fix_position(input, update);
 		}
 	}
@@ -32,7 +32,7 @@
 				.composedPath()
 				.find((node) => (node as HTMLElement).classList.contains('code-block')) as HTMLElement;
 
-			const ts = !!parent.querySelector('.ts-toggle:checked');
+			const ts = !parent.querySelector('.js-toggle:checked');
 			const code = parent.querySelector(`pre:${ts ? 'last' : 'first'}-of-type code`) as HTMLElement;
 
 			let result = '';
@@ -132,13 +132,13 @@
 					}
 				}
 
-				&:has(.ts-toggle:checked) {
-					.filename[data-ext='.js']::after {
-						content: '.ts';
+				&:has(.js-toggle:checked) {
+					.filename[data-ext='.ts']::after {
+						content: '.js';
 					}
 				}
 
-				.ts-toggle {
+				.js-toggle {
 					appearance: none;
 					display: flex;
 					align-items: center;
@@ -160,21 +160,21 @@
 
 					&::before {
 						content: 'JS';
+						opacity: 0.3;
 					}
 
 					&::after {
 						content: 'TS';
 						border-left: none;
-						opacity: 0.3;
 					}
 
 					&:checked {
 						&::before {
-							opacity: 0.3;
+							opacity: 1;
 						}
 
 						&::after {
-							opacity: 1;
+							opacity: 0.3;
 						}
 					}
 				}
@@ -236,11 +236,11 @@
 				}
 			}
 
-			&:has(.ts-toggle:checked) pre:first-of-type {
+			&:has(.js-toggle:not(:checked)) pre:first-of-type {
 				display: none;
 			}
 
-			&:has(.ts-toggle:not(:checked)) pre:last-of-type {
+			&:has(.js-toggle:checked) pre:last-of-type {
 				display: none;
 			}
 
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 6c2309a3b..5b7643646 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -171,7 +171,7 @@ export async function render_content_markdown(
 			}
 
 			if (converted) {
-				html += `<input class="ts-toggle" title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
+				html += `<input class="js-toggle" title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
 			}
 
 			if (options.copy) {