diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index 9e07408cc3f8..3fe7d7e1ddcb 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/packages/website/src/components/editor/useSandboxServices.ts
@@ -10,6 +10,7 @@ import type {
 
 import { sandboxSingleton } from './loadSandbox';
 import { editorEmbedId } from './EditorEmbed';
+import { useColorMode } from '@docusaurus/theme-common';
 
 export interface SandboxServicesProps {
   readonly jsx?: boolean;
@@ -34,6 +35,7 @@ export const useSandboxServices = (
 ): Error | SandboxServices | undefined => {
   const [services, setServices] = useState<Error | SandboxServices>();
   const [loadedTs, setLoadedTs] = useState<string>(props.ts);
+  const { isDarkTheme } = useColorMode();
 
   useEffect(() => {
     if (props.ts !== loadedTs) {
@@ -74,6 +76,9 @@ export const useSandboxServices = (
           main,
           ts,
         );
+        sandboxInstance.monaco.editor.setTheme(
+          isDarkTheme ? 'vs-dark' : 'vs-light',
+        );
 
         const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
           sandboxInstance.getCompilerOptions(),