diff --git a/.changeset/dull-knives-fall.md b/.changeset/dull-knives-fall.md
new file mode 100644
index 000000000..e91d2c44c
--- /dev/null
+++ b/.changeset/dull-knives-fall.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Fix the way snippet colors are being set
diff --git a/packages/components/src/Snippet.tsx b/packages/components/src/Snippet.tsx
index 53119c544..deaf754e1 100644
--- a/packages/components/src/Snippet.tsx
+++ b/packages/components/src/Snippet.tsx
@@ -1,3 +1,4 @@
+import { cx } from 'classix';
 import Prism from 'prismjs';
 import { type JSX, useLayoutEffect, useRef } from 'react';
 
@@ -152,7 +153,10 @@ export function Snippet({
 				</div>
 			)}
 			<div
-				className={`${styles.snippet} ${className ?? ''} ${withCopyButton ? styles.copyable : ''} ${useDefaultHighlighting ? styles.useDefaultHighlighting : ''}`}
+				className={cx(styles.snippet, className, {
+					[styles.copyable]: withCopyButton,
+					[styles.useDefaultHighlighting]: useDefaultHighlighting,
+				})}
 			>
 				<pre
 					className={withLineNumbers ? styles['line-numbers'] : ''}
diff --git a/packages/components/src/styles/Snippet.module.css b/packages/components/src/styles/Snippet.module.css
index a9a75e386..0f367158f 100644
--- a/packages/components/src/styles/Snippet.module.css
+++ b/packages/components/src/styles/Snippet.module.css
@@ -83,7 +83,7 @@
 	background: #3c4200;
 }
 
-.snippet pre[class*='language-'].line-numbers {
+.snippet :global(pre[class*='language-'].line-numbers) {
 	line-height: 0.625rem;
 	padding-bottom: var(--lp-spacing-400);
 	padding-top: var(--lp-spacing-400);
@@ -92,36 +92,36 @@
 	z-index: var(--stacking-above-new-context);
 }
 
-.snippet .line-numbers .line-numbers-rows {
+.snippet :global(.line-numbers .line-numbers-rows) {
 	border: none;
 	left: -3em;
 	width: 2em;
 }
 
-.snippet .token.operator,
-.snippet .token.punctuation {
+.snippet :global(.token.operator),
+.snippet :global(.token.punctuation) {
 	color: var(--lp-color-text-ui-primary-base);
 }
 
-.snippet .token.function {
+.snippet :global(.token.function) {
 	color: var(--lp-color-text-code-function);
 	font-weight: var(--lp-font-weight-regular);
 }
 
-.snippet .token.tag {
+.snippet :global(.token.tag) {
 	color: var(--lp-color-text-code-tag);
 }
 
-.token.attr-value,
-.token.string {
+.snippet :global(.token.attr-value),
+.snippet :global(.token.string) {
 	color: var(--lp-color-text-code-string);
 }
 
-.snippet .token.property {
+.snippet :global(.token.property) {
 	color: var(--lp-color-text-code-keyword);
 }
 
-.snippet .token.keyword {
+.snippet :global(.token.keyword) {
 	color: var(--lp-color-text-code-keyword);
 }