feat(client): create editor system theme (#49717)

client/src/components/layouts/default.tsx

@@ -50,7 +50,6 @@ import './fonts.css';
 import './global.css';
 import './variables.css';
 import './rtl-layout.css';
-import { Themes } from '../settings/theme';
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
@@ -132,7 +131,7 @@ function DefaultLayout({
   isChallenge = false,
   block,
   superBlock,
-  theme = Themes.Default,
+  theme,
   showCodeAlly,
   user,
   fetchUser,

client/src/templates/Challenges/classic/editor.tsx

@@ -149,7 +149,7 @@ const mapStateToProps = createSelector(
     previewOpen: boolean,
     isResetting: boolean,
     isSignedIn: boolean,
-    { theme = Themes.Default }: { theme: Themes },
+    { theme }: { theme: Themes },
     tests: [{ text: string; testString: string }],
     isChallengeCompleted: boolean
   ) => ({
@@ -1234,13 +1234,18 @@ const Editor = (props: EditorProps): JSX.Element => {
     });
   }
 
-  const { isSignedIn, theme } = props;
+  const { theme } = props;
+
   const preferDarkScheme = window.matchMedia(
     '(prefers-color-scheme: dark)'
   ).matches;
-  const isDarkTheme =
-    theme === Themes.Night || (preferDarkScheme && !isSignedIn);
-  const editorTheme = isDarkTheme ? 'vs-dark-custom' : 'vs-custom';
+  const editorSystemTheme = preferDarkScheme ? 'vs-dark-custom' : 'vs-custom';
+  const editorTheme =
+    theme === Themes.Night
+      ? 'vs-dark-custom'
+      : theme === Themes.Default
+      ? 'vs-custom'
+      : editorSystemTheme;
   return (
     <Suspense fallback={<Loader loaderDelay={600} />}>
       <span className='notranslate'>

client/src/templates/Challenges/classic/multifile-editor.tsx

@@ -53,7 +53,7 @@ const mapStateToProps = createSelector(
     canFocus: boolean,
     output: string[],
     open,
-    { theme = Themes.Default }: { theme: Themes }
+    { theme }: { theme: Themes }
   ) => ({
     visibleEditors,
     canFocus: open ? false : canFocus,