Tidy up the light bit of theming

web/src/components/IdeConsole/IdeConsole.js

@@ -1,5 +1,6 @@
 import { useContext, useEffect } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
+import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
 
 const IdeConsole = () => {
   const { state } = useContext(IdeContext)
@@ -9,21 +10,19 @@ const IdeConsole = () => {
       element.scrollTop = element.scrollHeight - element.clientHeight
     }
   }, [state.consoleMessages])
-  const matchEditorVsDarkThemeBg = { backgroundColor: 'rgb(30,30,30)' }
+
-  const matchEditorVsDarkThemeText = { color: 'rgb(212,212,212)' }
-  const matchEditorVsDarkThemeTextBrown = { color: 'rgb(206,144,120)' }
   return (
-    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkThemeBg}>
+    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkTheme.Bg}>
       <div>
         {state.consoleMessages?.map(({ type, message, time }, index) => (
           <pre
             className="font-mono text-sm"
-            style={matchEditorVsDarkThemeText}
+            style={matchEditorVsDarkTheme.Text}
             key={message + index}
           >
             <div
               className="text-xs font-bold pt-2"
-              style={matchEditorVsDarkThemeTextBrown}
+              style={matchEditorVsDarkTheme.TextBrown}
             >
               {time?.toLocaleString()}
             </div>

web/src/components/IdeContainer/IdeContainer.js

@@ -2,7 +2,7 @@ import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import IdeEditor from 'src/components/IdeEditor'
+import IdeEditor, { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
@@ -67,7 +67,7 @@ const IdeContainer = () => {
               renderToolbar={() => (
                 <div
                   className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
-                  style={{ backgroundColor: 'rgb(55,55,55)' }}
+                  style={matchEditorVsDarkTheme.lighterBg}
                 >
                   {id}
                   {id === 'Editor' && ` (${state.ideType})`}

web/src/components/IdeEditor/IdeEditor.js

@@ -4,6 +4,14 @@ import { codeStorageKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 const Editor = lazy(() => import('@monaco-editor/react'))
 
+export const matchEditorVsDarkTheme = {
+  // Some colors to roughly match the vs-dark editor theme
+  Bg: { backgroundColor: 'rgb(30,30,30)' },
+  lighterBg: { backgroundColor: 'rgb(55,55,55)' },
+  Text: { color: 'rgb(212,212,212)' },
+  TextBrown: { color: 'rgb(206,144,120)' },
+}
+
 const IdeEditor = () => {
   const { state, thunkDispatch } = useContext(IdeContext)
   const ideTypeToLanguageMap = {