diff --git a/src/styles.css b/src/styles.css
index b6ef8c2876..41f7d2f8aa 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -10,7 +10,7 @@
 		color-scheme: light;
 	}
 
-	html[data-theme="dark"] {
+	html[data-theme*="dark"] {
 		color-scheme: dark;
 	}
 
@@ -23,8 +23,8 @@
 		scrollbar-color: #778292 #e7ecf2;
 		scrollbar-width: thin;
 	}
-	html[data-theme="dark"],
-	html[data-theme="dark"] .custom-scrollbar {
+	html[data-theme*="dark"],
+	html[data-theme*="dark"] .custom-scrollbar {
 		scrollbar-color: #8a99ae #313c50;
 		scrollbar-width: thin;
 	}
@@ -133,6 +133,6 @@ html {
 	--twoslash-cursor: #24292E;
 }
 
-html[data-theme="dark"] {
+html[data-theme*="dark"] {
 	--twoslash-cursor: #BABED8;
 }
\ No newline at end of file
diff --git a/src/styles/expressive-code.css b/src/styles/expressive-code.css
index 4a1908c87e..60d77e2ab1 100644
--- a/src/styles/expressive-code.css
+++ b/src/styles/expressive-code.css
@@ -50,7 +50,7 @@ html .expressive-code-overrides .expressive-code .copy button div {
 	--tmLineBrdCol: hsl(222.77deg 38.21% 51.76% / 55.57%);
 }
 
-html[data-theme="dark"]
+html[data-theme*="dark"]
 	.expressive-code-overrides
 	.expressive-code
 	.ec-line.mark {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4d4f2e1b24..8a6248f4c2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,7 @@ export default {
 		"./src/**/*.{js,jsx,ts,tsx,md,mdx}",
 		"./content/**/*.{js,jsx,ts,tsx,md,mdx}",
 	],
-	darkMode: ["selector", "[data-theme='dark']"],
+	darkMode: ["selector", "[data-theme*='dark']"],
 	theme: {
 		fontSize: {
 			xs: ["0.75rem", { lineHeight: "1rem" }],