docs(website): correct theme color blink when playground is initializ…

…ed (#4870)
typescript-eslint · Apr 26, 2022 · acb5310 · acb5310
1 parent f3cf87b
commit acb5310
Showing 1 changed file with 5 additions and 0 deletions.
diff --git 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(),