Merge pull request #187 from microsoft/dark

Adds dark mode to the site

Author: Orta

packages/sandbox/src/index.ts

@@ -1,6 +1,6 @@
 import { createCompilerHost } from './createCompilerHost'
 import { detectNewImportsToAcquireTypeFor } from './typeAcquisition'
-import { sandboxTheme } from './theme'
+import { sandboxTheme, sandboxThemeDark } from './theme'
 import { TypeScriptWorker } from './tsWorker'
 import {
   getDefaultSandboxCompilerOptions,
@@ -105,6 +105,7 @@ export const createTypeScriptSandbox = (
 
   const model = monaco.editor.createModel(defaultText, language, filePath)
   monaco.editor.defineTheme('sandbox', sandboxTheme)
+  monaco.editor.defineTheme('sandbox-dark', sandboxThemeDark)
   monaco.editor.setTheme('sandbox')
 
   const monacoSettings = Object.assign({ model }, sharedEditorOptions, config.monacoSettings || {})

packages/sandbox/src/theme.ts

@@ -1,13 +1,7 @@
 const blue = '3771EF'
 const darkerBlue = '1142AF'
-const darkestBlue = '09235D'
-
-const yellow = 'F3DF51'
-const darkYellow = 'AEA811'
-const darkerYellow = '65610A'
 
 const grey = '84864d'
-const green = '12CD0E'
 const greenDark = '10990D'
 const greenLight = '54F351'
 
@@ -69,3 +63,18 @@ export const sandboxTheme: import('monaco-editor').editor.IStandaloneThemeData =
     editorSelectionHighlight: '#ADD6FF4D',
   },
 }
+
+export const sandboxThemeDark: import('monaco-editor').editor.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    { token: 'constant', foreground: '44ee11' },
+    { token: 'comment', foreground: grey },
+    { token: 'number', foreground: greenDark },
+    { token: 'regexp', foreground: greenLight },
+    { token: 'type', foreground: darkerBlue },
+  ],
+  colors: {
+    // 'editor.background': '#313131',
+  },
+}